Custom widget with CSS

by ian_smithz

HTML

<!-- Parts of our JavaScript API to implement on the Order Confirmation Pages -->

<!-- Header code. Loads the scarab-v2.js and identifies the merchant account (here the emarsys demo merchant 1A65B5CB868AFF1E). Replace it with your own Merchant ID before hitting 'Run' -->
<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>

CSS

.scarab-itemlist {
  padding:0px 20px;
  position:relative;
  border: 1px solid #C5D7EF;
}

.scarab-item {
  display:inline-block;
  width:120px;
  margin:5px;
  vertical-align:top;
  font-size: 12px;
  font-family:Arial,sans-serif;
  text-align:center;
}
.scarab-item img {
  max-width:100px;
  max-height:100px;
  display:block;
  margin:0px auto;
  border:0px;
}

.scarab-prev,.scarab-next {
  position:absolute;
  width:20px;
  height:20px;
  line-height:20px;
  top:50%;
  margin-top:-10px;
  cursor:pointer;
  text-align:center;
  font-size:16px;
  color:#C5D7EF;
}
.scarab-prev {
  left:0px;
}
.scarab-next {
  right:0px;
}
.scarab-disabled-button {
  cursor:default;
  opacity: 0.4;
}

JavaScript

// The usual commands to identify visitors and report cart contents. Please note the empty cart values - remember to empty the cart on purchase. 
ScarabQueue.push(['setEmail', '[email protected]']);
ScarabQueue.push(['cart', []]);

// Passing on order details. The price values passed on here serve as the basis of our revenue and revenue contribution reports.
ScarabQueue.push(['purchase', {
    orderId: '231213',
    items: [
      {item: 'item_1', price: 19.9, quantity: 1},
      {item: 'item_2', price: 29.7, quantity: 3}
    ]
}]);

// Firing the ScarabQueue. Should be the last call on the page, called only once.
ScarabQueue.push(['go']);

// You can easily test how this works. Just replace the demo Merchant ID with your own.
// Log into your Predict Dashboard, click LIVE EVENTS, and on the event screen select 'my visit' from the dropdown. 
// Hit Run in JSFiddle. Refresh Live Events and you should see the Purchase event reported with the above value.