The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

Storax jquery plugin : web store on your website and store data in the cloud

Tags :

Plugin rate :

Storax jQuery plugin lets you have a light-weight online store on your website. The data about your products stays in the cloud (Parse.com). You may add products and categories using the Parse.com's interface in excel like tables.

 

You can add/modify categories, subcategories, product data (Ex:Price,Link to product image) directly in the cloud and your website will show the updates right away!

 

However, to actually sell your products, you need a selling link for each product. This can be any third party service like Paypal,Oronjo,etc. from where users can buy your products. This link goes in your cloud database at Parse.com.

Implementation: 

HOW TO USE

The download pack contains the plugin file - store.min.js and the HTML file deployed in the demo store.html

 

1. CREATE YOUR PARSE.COM APP

Navigate to Parse.com and click Signup.

 

s1.png

 

Once you have an account, (with verified email), log into your account. Click on "Create a new App", give a name to your app and click create.

 

s2.png

 

You will given a list of keys for your app. Note your Application ID and Rest API key, since we will be using these two.

 

s3.png

 

 

2. CREATE YOUR STORE DATABASE

Navigate to the data-browser of your newly created App.

s4.png

 

Click the Import button, upload the category.json file and give the class name "category".

 

s5.png

 

This will create a table for your categories and sub categories. Delete all the rows in the table and add your store specific data to it. If you need multiple sub-categories for a main-category, create multiple rows with the same main-Category and different sub-categories.

Similarly import product.json file and give the class name "product".

 

s6.png

 

This will create a product table, where you can enter your product data. For each product you need to enter a main-category and a sub-category defined in the Category table. Note - All names and values are CASE SENSITIVE. DO NOT change the name of your classes.

NOTE: You may set permissions for both your class (table) as shown below. This will prevent other users from updating your store databse. Public may only read the data!

 

s7.png

 

s8.png

 

 

3. JAVASCRIPT CONFIG

Enter your App Id and Rest API key in a piece of javascript as shown below.

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
 //mandatory----------------
 var parseApplicationId = "qW----------------------------------pp";
 var parseRestApiKey = "JT-----------------------------------jsQ";
  
 //optional-----------------
 var storeWidgetWidth = 800; 
 var pathToLoadingImage = './loader.gif';
 var doYouHaveSubCategories = true;
</script>

 

The description of all variables is shown on the "options" part of this page.

 

To specify the width of Storax widget as a percentage(%), add the below code in your css

#store{width:70% !important;}

 

For any other specific requirement, just let me know and I will provide a hack!

 

 

4. INCLUDE STORAX PLUGIN

Include the jQuery plugin if not done already. Now, include the plugin store.min.js before the end of your body tag and you are done!

1
2
3
4
5
6
<body>
  ...
  ... 
  <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
  <script src="./store.min.js"></script>
</body>

 

 

5. CREATE A CONTAINER FOR YOUR INTERFACE

Add a div as shown below in you HTML. This div will contain the Store widget and display your Products and Categories.

1
<div id="store"></div>
Options: 
parseApplicationId
String
This is the Application Id of your Parse App This is a mandatory attribute.
parseRestApiKey
String
This is the Rest API key of your Parse App This is a mandatory attribute.
pathToLoadingImage
String
Path to a loading image that is used by Storax. Basically this image is shown when the next image is loading in the lightbox. (I have provided a loading image in this download; just provide the path to that image after you upload it to your server)
storeWidgetWidth
Integer
Default : 640 - The width of the Store widget. If this is not supplied, width of the Store defaults to 640px.
doYouHaveSubCategories
Boolean
Default : false - If the value is true, subcategories will be displayed and hence you should have all subcategory data in both your tables. If the value is false, subcategories are not considered; your model relies only on products belonging to a mainCategory.
Screenshots
  • Storax

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.4
Current version
1.0
Browsers compatibility
Google ChromeIE 9Mozilla FirefoxOperaSafari
Comments [0]