Cart demo

by agus makmun

HTML

<script>
var ScarabQueue = ScarabQueue || [];
(function(subdomain, id) {
  if (document.getElementById(id)) return;
  var js = document.createElement('script'); js.id = id;
  js.src = subdomain + '.scarabresearch.com/js/1A65B5CB868AFF1E/scarab-v2.js';
  var fs = document.getElementsByTagName('script')[0];
  fs.parentNode.insertBefore(js, fs);
})('https:' == document.location.protocol ? 'https://recommender' : 'http://cdn', 'scarab-js-api');
</script>

<script type="text/html" id="simple-tmpl" >
<![CDATA[
    <h4>Cart content</h4>
    {{if (SC.basket.length === 0){ }}Your cart is empty{{ } }}
    {{ for (var i=0; i < SC.basket.length; i++) { }}
        <span>
          {{=SC.basket[i].item}}
          <button onclick="Cart.remove('{{=SC.basket[i].item}}');">X</button>
        </span>
    {{ } }}
    <h4>Recommended based on your cart</h4>
    {{ for (var i=0; i < SC.page.products.length; i++) { }}
      {{ var p = SC.page.products[i]; }}
      <span data-scarabitem="{{= p.id }}" style="display: inline-block" class="rec-item">
         <a href="{{=p.link}}">
          <img src="{{=p.image}}" class="rec-image">
          <div>{{=p.title}}</div>
        </a>
        <div>{{=p.price}} €</div>
        <button onclick="Cart.add('{{=p.item}}', {{=p.price}});">Add to cart</button>
      </span>
    {{ } }}
]]>
</script>

<div id="personal-recs"></div>

CSS

body {
    background: white;
    font-family: sans-serif;
}
.rec-item {
    text-align: center;   
}
.rec-image {
    width: 80px;
}

JavaScript

ScarabQueue = ScarabQueue || [];

Cart = (function() {
    var cart = [];

    var render = function() {
        ScarabQueue.push(['cart', cart]);
        ScarabQueue.push(['recommend', {
            logic: 'CART',
            containerId: 'personal-recs',
            templateId: 'simple-tmpl',
            success: function(SC, render) {
                SC.basket = cart;
                render(SC);
            }
        }]);
        ScarabQueue.push(['goAsync']);
    };

    return {
        render: render,
        add: function(itemId, price) {
            cart.push({item: itemId, price: price, quantity: 1});
            render();
        },
        remove: function(itemId) {
            cart = cart.filter(function(e) {
              return e.item !== itemId;
            });
            render();
        } 
    };
}());


Cart.render();