Demo Shop with simpleCart(js)

Here is a very simple shopping cart example based on simpleCart(JS). All you have to do is to put your donation form hash into the JavaScript snippet below.

Demo: https://international-action.org/de/shop/

❗️
Don't forget
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!
Please find more information at our support center.

<html>
<head> 
	<title>Demo Shop</title>
	<script type="text/javascript" src="/js/jquery.min.js"></script>
  
  <!-- Download simpleCart at https://github.com/wojodesign/simplecart-js -->
	<script type="text/javascript" src="/js/simpleCart.min.js"></script>
  
  <!-- Some simple shopping cart formatting -->
	<style type="text/css">
		.simpleCart_items .headerRow div, .simpleCart_items .itemRow div {
			float:left;
			width: 20%;
		}
		.simpleCart_items .itemRow {
			clear: both;
		}
	</style>
</head>
<body>
  
	<!-- Items -->
	<a href="javascript:;" onclick="simpleCart.add({name:'Inoculation', price: 5});return false;">
    A inoculation for 5 &euro;</a><br />
	<a href="javascript:;" onclick="simpleCart.add({name:'Pig', price: 20});return false;">
    A pig for 20 &euro;</a><br />
	<a href="javascript:;" onclick="simpleCart.add({name:'Standpipe', price: 200});return false;">
    A standpipe for 200 &euro;</a><br />
	<br />
	
	<!-- Shopping cart -->
	<div class="simpleCart_items"></div>
	<br />
	
	<!-- Checkout link -->
	<a href="javascript:;" class="simpleCart_checkout">Donate <span class="simpleCart_total"></span> now!</a>

  <!-- Initialize simpleCart -->
	<script type="text/javascript">
		simpleCart({
			cartColumns: [
				{attr: "name", label: "Name"},
				{attr: "price", label: "Preis", view: 'currency'},
				{attr: "quantity", label: "Menge"},
				{attr: "total", label: "Summe", view: 'currency'},
				{view: "remove", text: "Remove", label: false}
			],
			checkout: {
				type: "SendForm",
				url: "https://secure.fundraisingbox.com/app/simpleCartJs",
				extra_data: {
					hash: "PUT_YOUR_FORM_HASH_HERE" // <-- TODO
				}
			}
		});

    // Configure EURO as currency
		simpleCart.currency({
			code: "EUR",
			name: "Euro",
			symbol: " &euro; ",
			delimiter: ".",
			decimal: ",",
			after: false,
			accuracy: 2
		});
	</script>
</body>

Furthermore you should create a "thank you" page. At this page the shopping cart is cleared with the following code.

<html>
<head> 
	<title>Demo Shop Thank You</title>
	<script type="text/javascript" src="/js/jquery.min.js"></script>
  
  <!-- Download simpleCart at https://github.com/wojodesign/simplecart-js -->
	<script type="text/javascript" src="/js/simpleCart.min.js"></script>
</head>
<body>
  
  <h1>Thank you!</h1>

	<script type="text/javascript">
		simpleCart.empty();
	</script>
</body>

Please find further information at the official simpleCart(JS) documentation.

❗️Don't forget

❗️
Don't forget