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 note that the custom field must be hidden, as it only contains JSON for internal use.
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>

If you want to display the cart items alongside the donation form, you need to do so manually. The donation form itself does not display the cart again, as it merely contains a JSON representation in the hidden custom field.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Donation Form</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Do not display cart actions */
        .simpleCart_items .item-remove, .simpleCart_items .item-decrement, .simpleCart_items .item-increment {
            display: none;
        }
    </style>
</head>
<body>

<!-- simpleCart will automatically render the cart in this div -->
<div class="simpleCart_items"></div>

<div>
    <script type="text/javascript"
            src="https://secure.fundraisingbox.com/app/paymentJS?hash=###INSERT-YOUR-HASH-HERE###"></script>
    <noscript>Bitte Javascript aktivieren</noscript>
    <a target="_blank" href="https://www.fundraisingbox.com"><img border="0" style="border: 0 !important"
                                                                  src="https://secure.fundraisingbox.com/images/FundraisingBox-Logo-Widget.png"
                                                                  alt="FundraisingBox Logo"/></a>
</div>
<script type="text/javascript" src="path-to-jQuery-standalone"></script>
<script type="text/javascript" src="path-to-simpleCart"></script>
</body>
</html>

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