{"_id":"5899c77783f743190077bd0a","parentDoc":null,"user":"5720ba18c669e80e00c35051","version":{"_id":"571f5e8cd8667f0e00a3c49b","hasDoc":true,"__v":12,"hasReference":true,"project":"571f5e8cd8667f0e00a3c498","createdAt":"2016-04-26T12:26:52.312Z","releaseDate":"2016-04-26T12:26:52.312Z","categories":["571f5e8cd8667f0e00a3c49c","571f73cfcb4baa0e00d13a80","571f7451cb4baa0e00d13a88","571f7d2720695f3400f38797","571f7fb0ac2a080e0014c661","571f884be54f2d0e003ebb0a","572200c9ecb38d0e00d80ebd","572c301e7c8eff0e00aaa174","57df91b2c6348d0e0020c452","57e104db9ff1e21900a721ab","57fd04caeaa77f19008b8202","5899c7113514ce0f0014da84"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"category":{"_id":"5899c7113514ce0f0014da84","__v":0,"project":"571f5e8cd8667f0e00a3c498","version":"571f5e8cd8667f0e00a3c49b","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2017-02-07T13:09:37.119Z","from_sync":false,"order":9999,"slug":"simplecartjs","title":"Shopping Cart"},"project":"571f5e8cd8667f0e00a3c498","__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-02-07T13:11:19.625Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"Here is a very simple shopping cart example based on [simpleCart(JS)](https://github.com/wojodesign/simplecart-js). All you have to do is to put your donation form hash into the JavaScript snippet below. \n[block:callout]\n{\n  \"type\": \"danger\",\n  \"body\": \"Do not forget to enable the shopping cart extension in your FundraisingBox and to put the custom field that should store the shopping cart data into your donation form!\\n\\nPlease find more information at our [support center](https://support.fundraisingbox.com/category/erweiterungen/charity-warenkorb/).\",\n  \"title\": \"Don't forget\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<html>\\n<head> \\n\\t<title>Demo Shop</title>\\n\\t<script type=\\\"text/javascript\\\" src=\\\"/js/jquery.min.js\\\"></script>\\n  \\n  <!-- Download simpleCart at https://github.com/wojodesign/simplecart-js -->\\n\\t<script type=\\\"text/javascript\\\" src=\\\"/js/simpleCart.min.js\\\"></script>\\n  \\n  <!-- Some simple shopping cart formatting -->\\n\\t<style type=\\\"text/css\\\">\\n\\t\\t.simpleCart_items .headerRow div, .simpleCart_items .itemRow div {\\n\\t\\t\\tfloat:left;\\n\\t\\t\\twidth: 20%;\\n\\t\\t}\\n\\t\\t.simpleCart_items .itemRow {\\n\\t\\t\\tclear: both;\\n\\t\\t}\\n\\t</style>\\n</head>\\n<body>\\n  \\n\\t<!-- Items -->\\n\\t<a href=\\\"javascript:;\\\" onclick=\\\"simpleCart.add({name:'Inoculation', price: 5});return false;\\\">\\n    A inoculation for 5 &euro;</a><br />\\n\\t<a href=\\\"javascript:;\\\" onclick=\\\"simpleCart.add({name:'Pig', price: 20});return false;\\\">\\n    A pig for 20 &euro;</a><br />\\n\\t<a href=\\\"javascript:;\\\" onclick=\\\"simpleCart.add({name:'Standpipe', price: 200});return false;\\\">\\n    A standpipe for 200 &euro;</a><br />\\n\\t<br />\\n\\t\\n\\t<!-- Shopping cart -->\\n\\t<div class=\\\"simpleCart_items\\\"></div>\\n\\t<br />\\n\\t\\n\\t<!-- Checkout link -->\\n\\t<a href=\\\"javascript:;\\\" class=\\\"simpleCart_checkout\\\">Donate <span class=\\\"simpleCart_total\\\"></span> now!</a>\\n\\n  <!-- Initialize simpleCart -->\\n\\t<script type=\\\"text/javascript\\\">\\n\\t\\tsimpleCart({\\n\\t\\t\\tcartColumns: [\\n\\t\\t\\t\\t{attr: \\\"name\\\", label: \\\"Name\\\"},\\n\\t\\t\\t\\t{attr: \\\"price\\\", label: \\\"Preis\\\", view: 'currency'},\\n\\t\\t\\t\\t{attr: \\\"quantity\\\", label: \\\"Menge\\\"},\\n\\t\\t\\t\\t{attr: \\\"total\\\", label: \\\"Summe\\\", view: 'currency'},\\n\\t\\t\\t\\t{view: \\\"remove\\\", text: \\\"Remove\\\", label: false}\\n\\t\\t\\t],\\n\\t\\t\\tcheckout: {\\n\\t\\t\\t\\ttype: \\\"SendForm\\\",\\n\\t\\t\\t\\turl: \\\"https://secure.fundraisingbox.com/app/simpleCartJs\\\",\\n\\t\\t\\t\\textra_data: {\\n\\t\\t\\t\\t\\thash: \\\"PUT_YOUR_FORM_HASH_HERE\\\" // <-- TODO\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t});\\n\\n    // Configure EURO as currency\\n\\t\\tsimpleCart.currency({\\n\\t\\t\\tcode: \\\"EUR\\\",\\n\\t\\t\\tname: \\\"Euro\\\",\\n\\t\\t\\tsymbol: \\\" &euro; \\\",\\n\\t\\t\\tdelimiter: \\\".\\\",\\n\\t\\t\\tdecimal: \\\",\\\",\\n\\t\\t\\tafter: false,\\n\\t\\t\\taccuracy: 2\\n\\t\\t});\\n\\t</script>\\n</body>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nFurthermore you should create a \"thank you\" page. At this page the shopping cart is cleared with the following code.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<html>\\n<head> \\n\\t<title>Demo Shop Thank You</title>\\n\\t<script type=\\\"text/javascript\\\" src=\\\"/js/jquery.min.js\\\"></script>\\n  \\n  <!-- Download simpleCart at https://github.com/wojodesign/simplecart-js -->\\n\\t<script type=\\\"text/javascript\\\" src=\\\"/js/simpleCart.min.js\\\"></script>\\n</head>\\n<body>\\n  \\n  <h1>Thank you!</h1>\\n\\n\\t<script type=\\\"text/javascript\\\">\\n\\t\\tsimpleCart.empty();\\n\\t</script>\\n</body>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nPlease find further information at the [official simpleCart(JS) documentation](http://simplecartjs.org/documentation).","excerpt":"","slug":"demo-shop","type":"basic","title":"Demo Shop with simpleCart(js)"}

Demo Shop with simpleCart(js)


Here is a very simple shopping cart example based on [simpleCart(JS)](https://github.com/wojodesign/simplecart-js). All you have to do is to put your donation form hash into the JavaScript snippet below. [block:callout] { "type": "danger", "body": "Do not forget to enable the shopping cart extension in your FundraisingBox and to put the custom field that should store the shopping cart data into your donation form!\n\nPlease find more information at our [support center](https://support.fundraisingbox.com/category/erweiterungen/charity-warenkorb/).", "title": "Don't forget" } [/block] [block:code] { "codes": [ { "code": "<html>\n<head> \n\t<title>Demo Shop</title>\n\t<script type=\"text/javascript\" src=\"/js/jquery.min.js\"></script>\n \n <!-- Download simpleCart at https://github.com/wojodesign/simplecart-js -->\n\t<script type=\"text/javascript\" src=\"/js/simpleCart.min.js\"></script>\n \n <!-- Some simple shopping cart formatting -->\n\t<style type=\"text/css\">\n\t\t.simpleCart_items .headerRow div, .simpleCart_items .itemRow div {\n\t\t\tfloat:left;\n\t\t\twidth: 20%;\n\t\t}\n\t\t.simpleCart_items .itemRow {\n\t\t\tclear: both;\n\t\t}\n\t</style>\n</head>\n<body>\n \n\t<!-- Items -->\n\t<a href=\"javascript:;\" onclick=\"simpleCart.add({name:'Inoculation', price: 5});return false;\">\n A inoculation for 5 &euro;</a><br />\n\t<a href=\"javascript:;\" onclick=\"simpleCart.add({name:'Pig', price: 20});return false;\">\n A pig for 20 &euro;</a><br />\n\t<a href=\"javascript:;\" onclick=\"simpleCart.add({name:'Standpipe', price: 200});return false;\">\n A standpipe for 200 &euro;</a><br />\n\t<br />\n\t\n\t<!-- Shopping cart -->\n\t<div class=\"simpleCart_items\"></div>\n\t<br />\n\t\n\t<!-- Checkout link -->\n\t<a href=\"javascript:;\" class=\"simpleCart_checkout\">Donate <span class=\"simpleCart_total\"></span> now!</a>\n\n <!-- Initialize simpleCart -->\n\t<script type=\"text/javascript\">\n\t\tsimpleCart({\n\t\t\tcartColumns: [\n\t\t\t\t{attr: \"name\", label: \"Name\"},\n\t\t\t\t{attr: \"price\", label: \"Preis\", view: 'currency'},\n\t\t\t\t{attr: \"quantity\", label: \"Menge\"},\n\t\t\t\t{attr: \"total\", label: \"Summe\", view: 'currency'},\n\t\t\t\t{view: \"remove\", text: \"Remove\", label: false}\n\t\t\t],\n\t\t\tcheckout: {\n\t\t\t\ttype: \"SendForm\",\n\t\t\t\turl: \"https://secure.fundraisingbox.com/app/simpleCartJs\",\n\t\t\t\textra_data: {\n\t\t\t\t\thash: \"PUT_YOUR_FORM_HASH_HERE\" // <-- TODO\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n // Configure EURO as currency\n\t\tsimpleCart.currency({\n\t\t\tcode: \"EUR\",\n\t\t\tname: \"Euro\",\n\t\t\tsymbol: \" &euro; \",\n\t\t\tdelimiter: \".\",\n\t\t\tdecimal: \",\",\n\t\t\tafter: false,\n\t\t\taccuracy: 2\n\t\t});\n\t</script>\n</body>", "language": "html" } ] } [/block] Furthermore you should create a "thank you" page. At this page the shopping cart is cleared with the following code. [block:code] { "codes": [ { "code": "<html>\n<head> \n\t<title>Demo Shop Thank You</title>\n\t<script type=\"text/javascript\" src=\"/js/jquery.min.js\"></script>\n \n <!-- Download simpleCart at https://github.com/wojodesign/simplecart-js -->\n\t<script type=\"text/javascript\" src=\"/js/simpleCart.min.js\"></script>\n</head>\n<body>\n \n <h1>Thank you!</h1>\n\n\t<script type=\"text/javascript\">\n\t\tsimpleCart.empty();\n\t</script>\n</body>", "language": "html" } ] } [/block] Please find further information at the [official simpleCart(JS) documentation](http://simplecartjs.org/documentation).