Wednesday, 1 May 2013

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


This 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






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.



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.



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.



2. Create your Store database

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



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



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".

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!





3. Javascript config

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


The description of all variables is shown below -

 

 

parseApplicationId

This is the Application Id of your Parse App

 

This is a mandatory attribute.

parseRestApiKey

This is the Rest API key of your Parse App

 

This is a mandatory attribute.

pathToLoadingImage

This the 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)

 

If this is not supplied, no loading image is shown.

storeWidgetWidth

The width of the Store widget.

 

If this is not supplied, width of the Store defaults to 640px.

doYouHaveSubCategories

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

 

If this is not supplied, the value defaults to false



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

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

2. Include plugins

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!


3. 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.


Thanks!

2 comments:

  1. Have you ever thought about adding a little
    bit more than just your articles? I mean, what you say is important and
    everything. But think about if you added some great graphics or video clips to give your posts more, "pop"!
    Your content is excellent but with pics and video clips, this blog
    could certainly be one of the best in its niche. Excellent blog!


    Feel free to visit my weblog :: buying roxicodone online ()

    ReplyDelete