How to use

1) Add stylesheets and javascript files to your code
2) Add the shop html-code to the container where it should be
3) Take care there are both a settings and products json-file
4) in the Shop class, change the url's so they point to your json files
5) if you need texts in other language you can make changes in Shop.texts and in the html code

example, in the header add your mootools files and shop-stylesheets: ```html

<link href="css/mooshop.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]><link href="css/mooshop-ie7.css" rel="stylesheet" type="text/css" /><![endif]-->
<script src="javascript/mootools.js"></script>
<script src="javascript/moo-drag.js"></script>
<script src="javascript/moo-mobile.js"></script>

```

```html #HTML

✖

your shopping cart



Total:	included vat:	to pay:
0	0	0

please note: other costs like sending costs might be added while checking out.

^

fold

<!-- before the closing body tag add : -->
<script src="javascript/mooshop.js"></script>

```

Settings

example:

```javascript #JSON { "currency": "us-dollar", "currencySign": "$", "valBefore":true, //true will show the amount as $100, false as 100$
"valPrecision":0, //decimals "emailAddress":"owner@ownerswebsite.com", //not used in classes, could be used to send orders to shop owner "inputPriceIncludesVat":true, //takes price for product in product file as including vat, if false, vat will be added to the price given "font":"", //to override defaults from stylesheets "headerColor":"", "headerBackground":"", "footerBackground":"", //product footer, containing price, add to cart icon etc "productWidth":220, //width of product div "unavailableText":"temporarily unavailable" //text to be shown if products[n].available is false (while products[n].hidden is also false), "username": "", "password": "" //can be used in cms }

```

Note: even though there is some options to change styling via the settings, best is of course to change the css. In settings you can't use RGBA for example.

Products

example:

```javascript #JSON

{
"productGroup":
    [{
        "name":"group 1",
        "hidden": false,
        "products":

            [{
                "name":"product 1",
                "sequence": 0,
                "description": "here comes your product description!",
                "price": 199,
                "vat": 0.25,
                "available": true,
                "hidden": false,
                "pictureLocation": "..\/json\/.products\/images\/image.png"
            }]
    }]
}

```

New In Version 1 5

1. Cart will be stored in cookie, so products not lost when leaving the page
2. Possibility to hide product groups and to change product sequence
3. ie7 & 8 issues fixed

Examples

You can download an example-folder on GitHub, taken from a real project in development (you'll need a local server to check it out)
Or check that example out at www.mamboozo.com/sol/public_html/shop.html, where you can also see some basic checkout functionality in development.

Notes

Tested on ie7+, various modern browsers, android tablet and phone
If you want to change from the older version to the latest, you'll have to make some changes in your JSON and HTML as well.

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.