Installing Justuno on Bigcommerce Stencil Themes

If you are using a Stencil theme in Bigcommerce follow these steps to install Justuno.

 

Step 1: Go to your Justuno dashboard and in the settings area find the embed code tab. Copy the embed code

Screen_Shot_2018-02-21_at_12.25.07_PM.png

 

Step 2: Log into your Bigcommerce store and navigate to "Storefront Design" > "Footer Scripts"

Step 3: Paste in the Justuno embed code. If you already have some scripts there, don't worry! Simply paste the Justuno code below all other scripts! 

Screen_Shot_2018-02-21_at_12.19.57_PM.png

 

Cart Tracking Code

Step 4: You can copy the following code and paste it right underneath the code you just pasted in you BigCommerce footer script section to enable our cart tracking features.

<script data-cfasync="false">
    window.juapp = window.juapp || function() {(window.juapp.q = window.juapp.q || []).push(arguments)};
    var ju_cart_arrary = [];
    {{#each cart.items}}
    {{#if type '===' 'Item' }}
        var juitem_pid = "{{product_id}}";
        var juitem_qty = {{ quantity }};
        var juitem_pr = {{ price.value }};
        var juitem_nm = "{{ name }}";
ju_cart_arrary.push({ itemid: juitem_pid, quantity: juitem_qty, price: juitem_pr, name: juitem_nm }); {{/if}} {{/each}}

juapp(
'cartItems',
'',
ju_cart_arrary
);
window.ju_init = function(){ jju("#form-action-addToCart").bind("click",function(){var t=jju(this).closest("form").find('input[name="product_id"]').val(),e=jju(".productView-title").length?jju(".productView-title").text():jju(".breadcrumb-label").text(),r=parseFloat(jju(".price.price--withoutTax").text().replace(/[^\d.-]/g,"")),a=parseInt(jju(".form-increment .form-input.form-input--incrementTotal").attr("value"));juapp("cartItemAdd",t,{quantity:a,price:r,name:e})}); }
</script>

 

Step 5: Go to Advanced Settings › Affiliate Conversion Tracking. Then, paste this code into the Conversion Tracking Code area.

<script data-cfasync="false">
(function() {
    // Bigcommerce doesn't provide variables for individual product info, so we grab it from their GA script
    var products = [];
    var scripts = document.getElementsByTagName('script');
    
    for(var i=0;i<scripts.length;i++)if(scripts[i].innerHTML.match(/pageTracker\._addItem/)){for(var stuff=scripts[i].innerHTML.match(/_addItem\(([^\)]+)/g),c=0;c<stuff.length;c++){var txt=stuff[c],fields=(txt=(txt=(txt=(txt=txt.replace("_addItem(","")).replace(/'|\n/g,"")).replace(/,\s+/g,",")).trim()).split(",");products.push({orderId:fields[0],sku:fields[1],name:fields[2],category:fields[3],price:fields[4],quantity:fields[5]})}break}
    
    // now product info is available to pass to a conversion tracking script

    juapp('order','%%ORDER_ID%%',
    {
      total:%%ORDER_AMOUNT%%,
      subtotal:%%ORDER_SUBTOTAL%%,
      tax:0,
      shipping:0,
currency:'USD' }); for (var i=0; i < products.length; i++) { juapp('orderItem',products[i].sku,{ name:'Unknown', quantity:products[i].quantity, price:products[i].price, color:'Unknown', size:'Unknown' }); } })(); </script>

 

TAGS: Bigcommerce stencil theme, install on bigcommerce stencil, stencil theme

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.