mooShop 1.0

Creates a webshop + shopping cart from json-files (products and settings)
Ideal for smaller webshops that have to be integrated in existing website.
You can add it to any container (body, just one column, whatever). It will adapt the amount of products per line to the container width (also when container is flexible). No page reloads when changing productgroup or checking out the product details.
Doesn't contain CMS, customer administration, checkout / payment code! (complete examples might be added later though)


Current version
GitHub Issues


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.


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




```javascript #JSON { "currency": "us-dollar", "currencySign": "$", "valBefore":true, //true will show the amount as $100, false as 100$
"valPrecision":0, //decimals "emailAddress":"", //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.



```javascript #JSON

        "name":"group 1",
        "hidden": false,

                "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


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, where you can also see some basic checkout functionality in development.


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.


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.

blog comments powered by Disqus