How to Install Justuno on Bigcommerce Blueprint Themes

If you are using a Stencil theme please use this article

Troubleshooting Tips: If the embed code is not detected within Justuno, please refresh your dashboard and the notification will go away! It can take a minute or two for the code to be detected. 

Here is a short video on how to install your basic Justuno embed code on your Bigcommerce site



Step 1: Go to your Bigcommerce store and find the apps section on the left then hit marketplace. Search for Justuno in the search bar on the left hand side 

Step 2: Once in the Justuno page hit install and walk through the set up. If you have an account associated with Justuno already a prompt will occur asking you to enter in your password. If you'd like to create a new account use Option 2. 



Step 3: When you are logged into your Justuno account head to the settings section on the left and find the embed code tab. Then highlight and copy the embed code 


Step 4: Go back to your Bigcommerce dashboard and find Storefront Design. Under Design Options head to the Themes tab and click HTML/CSS options

Step 5: Once you are in the html editor head to the left hand side and in the upper section scroll down till you find footer



Step 6: Paste the embed code on the bottom of the footer html page. Hit save and your all set! You can now use the app store to get into your Justuno Dashboard! Important note: Deleting your app within Bigcommerce does not cancel your account! You must walk through canceling your account within Justuno to ensure that billing will stop.




Step 7 (optional but recommended): Please follow the below instructions to enable visitor cart tracking for use with promotion rules and personalization.

Copy the following code into the template snippet called CartItem.html

<script type="text/javascript">
// Justuno related cart capture code
var ju_cart_arrary = ju_cart_arrary || [];
var juitem_pid = %%GLOBAL_ItemId%%;
var juitem_pr = parseFloat(('%%GLOBAL_ProductPrice%%').replace('$',''));
var juitem_prtotal = parseFloat(('%%GLOBAL_ProductTotal%%').replace('$',''));
var juitem_qty = Math.ceil(juitem_prtotal/juitem_pr);
var juitem_nm = "%%GLOBAL_ProductName%%";
ju_cart_arrary.push({ itemid: juitem_pid, quantity: juitem_qty, price: juitem_pr, name: juitem_nm });
</script>

Design_Mode.jpg

Copy the following code into the template file called Cart.html

<script type="text/javascript">
var ju_cart_arrary = ju_cart_arrary || [];
window.juapp=window.juapp||function(){(window.juapp.q=window.juapp.q||[]).push(arguments)}
juapp(
'cartItems',
'',
ju_cart_arrary
);
</script>

Design_Mode__1_.jpg

 

If you are using the "Show Cart Suggestions" feature in your Bigcommerce store.

Copy the following code into the template file called FastCartThickBoxContent.html located in the Snippets folder

<script>
window.juapp=window.juapp||function(){(window.juapp.q=window.juapp.q||[]).push(arguments)}  
try {
    
    // first parse the img html to get item ID
    var ju_item_img_html = '%%GLOBAL_fastCartProdImg%%';
    var ju_item_name_html = '%%GLOBAL_fastCartProdLink%%';
    var juitem_pid = ju_item_img_html.substring(ju_item_img_html.lastIndexOf("/products/") + 10, ju_item_img_html.lastIndexOf("/images/"));
    var juitem_nm = ju_item_name_html.replace(/<[^>]+>/g, '');
var juitem_qty = %%GLOBAL_fastCartQuantity%%;
var juitem_pr = parseFloat(('%%GLOBAL_fastCartProdTotal%%').replace(/[^\d.-]/g, ''))/juitem_qty;


    juapp(
      'cartItemAdd',
      juitem_pid,
       {
        name:juitem_nm,
        quantity:juitem_qty,
        price:juitem_pr
       }
    );
} catch(e){}
</script>

 

 

Step 8 (optional but recommended): Please follow the below instructions to enable conversion tracking for use with promotion rules and analytics.

A) Copy the same embed code from your justuno dashboard as described in step 3 into the "Advanced Settings" > "Affiliate Conversion Tracking" section of your Bigcommerce dashboard

B) Copy the following code into the "Advanced Settings" > "Affiliate Conversion Tracking" section of your Bigcommerce dashboard underneath the code you just copied from above.

<script type="text/javascript"> 
window.juapp=window.juapp||function(){(window.juapp.q=window.juapp.q||[]).push(arguments)}
juapp(
'order',
'%%ORDER_ID%%',
{total:%%ORDER_AMOUNT%%,subtotal:%%ORDER_SUBTOTAL%%,currency:'USD'}
);
</script>

The_Dashcam_Store_-_BigCommerce_Control_Panel.jpg

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.