AppStore.jsCreate an App Store with Zero Coding

How this plugin gonna help you?

AppStore.js is a jQuery plugin which lets you create an App Showcase or App Center with zero coding. It takes data from a JSON file and generates a fully Responsive and Trendy App Store in two different themes.

+ Point This plugin is Bootstrap Compatible!

How does it look like?

Currently this plugin supports two different themes, that is, a Light Theme and a Dark Theme but you can customize further with the help of options.

+ Point This Plugin doesn't use any images, it is based on pure javascript(jQuery) and CSS!

Spread the Word

If this plugin saved your time, give a second to share it among your friends and save their's

   

Getting Started

You need to include a total of 3 files to use this plugin, just keep in mind that appstore.js file to be included after the jQuery Library -

  • jQuery Library File
  • appstore.css
  • appstore.js
The Code is like → 
<html>
  <head>
    <script src="js/jquery-1.8.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/appstore.css"/>
    <script src="js/appstore.js"></script>
  </head>
</html>

Usage

Just use this below code snippet to create your appstore within the "#appstore-container" element from the json file whose link is specified in [link to json file]. The [link to json file] can be either absolute or relative link to the json file.

Minimal Code → 

// place this where you want your app store to appear
<div id="appstore-container"></div>
// place this just before the body tag for better results
<script>
$(function(){
    $("#appstore-container").appstore({json:"[link to json file]"});
});
</script>

The JSON file should be like the one shown below. The 1st item is just to describe what each field means and the 2nd item contains the actual values that your json file should have.

JSON Format → 

{
    "items": [
        {
            "title"         :"[Main title of the item]",
            "description"   :"[A brief description of the item]",
            "link"          :"[Link to the item which will be opened on clicking the button or icon]",
            "thumbnail"     :"[Link to a thumbnail picture for the item]",
            "logo"          :"[Link to an icon for the item, square size (64x64 or more)]",
            "tag"           :"[A preferable tag for the item]",
            "date"          :"[Date when the item got released]"
        },
        {
            "title"         :"AnimateScroll",
            "description"   :"A Simple jQuery Plugin for Animating Scroll with more than 30 unique easing effects.",
            "link"          :"//plugins.compzets.com/animatescroll",
            "thumbnail"     :"//plugins.compzets.com/images/animatescroll.png",
            "logo"          :"//plugins.compzets.com/images/as-logo.png",
            "tag"           :"jquery plugin",
            "date"          :"27th july, 2013"
        }
    ]
}

Options

Variable Description Default Value Valid Values
json Link to the json file from where the plugin will fetch data to create the App Store (Required) null "js/appstore.json" "//compzets.com/appstore.json"
theme Theme for your App Store light "light" "dark" "custom"
buttonValue Value on the Button present at the right hand side corner of each item View Demo Any String
buttonColor Color of the Button present at the right hand side corner of each item "#e74c3c" A String specifying the color in hex, rgb or with the color name like "#fff" "red"
backgroundColor Background Color for each item* "#0e0e0e" A String specifying the color in hex, rgb or with the color name like "#fff" "red"
titleColor Text Color for Item's Title* "#d4d4d4" A String specifying the color in hex, rgb or with the color name like "#fff" "red"
descColor Text Color for Item's Description* "#7e7e7e" A String specifying the color in hex, rgb or with the color name like "#fff" "red"
*Condition For last 3 options to take effect you should use theme as "custom"
Note: I have shown only some of the Valid Values.

Customize it

You can customize the look of the AppStore with the options provided above. Just keep in mind that you have to pass theme as "custom" for the last 3 options to take effect. Want to customize even more then continue reading....

All the Items in the App Store are structured like → 

<div id="as-item-[1,2,...]" class="as-item">
 <div class="as-item-thumbnail" style="background-image:url('[thumbnail]')">
    <a href=""><img src="[logo]" class="as-item-logo"/></a>
 </div>
 <div class="as-item-desc">
    <span class="as-icon as-icon-small"><span class="as-icon-tag"></span></span><span class="as-tag">[tag]</span>
    <span class="as-icon as-icon-small"><span class="as-icon-calendar"></span></span><span class="as-date">[date]</span>
    <h3>[title]</h3>
    <p>[descrition]</p>
    <a href="" class="as-btn" style="background-color:[buttonColor]">[buttonValue]</a>
 </div>
</div>

If you want to change the style for some specific item then you can use its specific "id" and write the css rule for it. You can see our Plugin Showcase for example.

Have it, Use it, Modify it

You can directly download the zip file or mess with the code at GitHub:

Download    Goto Github

Doesn't ring any bell?

Don't know javascript or Don't want to use any Plugins? Alright, no issues. We have also build an AppStore Builder for you!

Why this was Made?

This Plugin as well as the App is made for those folks who develop a lot of stuff and want to showcase them all easily without writing any code.

Hope this plugin as well as others save your time and ease your work!

Talk

blog comments powered by Disqus

Developed & Designed by Ram Patra in India
© Copyrights by Compzets.com