Personalize Promotions Based On Last Item Added to Cart (Bigcommerce Only)

This article shows how Justuno can create personalized promotions by using data from a dynamic BigCommerce variable.

Last updated 7/15/2021

Use-Case: Personalized Promotion Using Product Image And Product Name

In this use-case, We use the cart properties Product Name and Product Image of the last added cart item within our Bigcommerce store to create a personalized promotion.

Step 1: Setting Up The Custom Code Section (TAB JS)

• Copy and paste the below code snippet into your TAB JS custom code section within the design canvas. For more information regarding this head here: How to add custom code in Justuno.

jju.ajax({
type:"GET",
url:"/api/storefront/carts",
cache:false,
dataType:"JSON"
}).done(function(data){
try{

var dLen = data[0].lineItems.physicalItems.length-1;
var dArr = data[0].lineItems.physicalItems[dLen];


if (ju_options.personalized){
ju_options.personalized.singleCartProdId = dArr.productId;
ju_options.personalized.singleCartProdVariantId = dArr.variantId;
ju_options.personalized.singleCartProdSku = dArr.sku;
ju_options.personalized.singleCartProdQty = dArr.quantity;
ju_options.personalized.singleCartProdName = dArr.name;
ju_options.personalized.singleCartProdImage = dArr.imageUrl;
ju_options.personalized.singleCartProdPrice = dArr.salePrice;
ju_options.personalized.singleCartProdUrl = dArr.url;
ju_options.personalized.andOthers = (dLen>0?'and more':' ');
} else {
ju_options.personalized = {
"singleCartProdId":dArr.productId,
"singleCartProdVariantId":dArr.variantId,
"singleCartProdSku":dArr.sku,
"singleCartProdQty":dArr.quantity,
"singleCartProdName":dArr.name,
"singleCartProdImage":dArr.imageUrl,
"singleCartProdPrice":dArr.salePrice,
"singleCartProdUrl":dArr.url,
"andOthers":(dLen>0?'and more':' ')}
};
ju_push_pers(0);
} catch(er){
console.log(er)
}
});

Step 2: Connecting The Custom Code Within The Promotion

• Add a text layer to the promotion that includes the curly bar variable for cart item name  as shown below
  

   {{singleCartProdName}} 

• Add another text layer and then enter in the source code section of that layer and paste in the curly bar variable for the item thumbnail image, also shown below as

   {{singleCartProdImage}} 

• Setting a size in the source section is also highly recommended, as it is unlikely your promotion will be as large as the sourced thumbnail image.

Get Item Name

 {{singleCartProdName}} 

Get Item Thumbnail

<img style="height: 175px; width: 175px;" src="" />

• This code snippet can be added within the POP UP JS section of the custom code to automatically close the promotion window after a period of 10,000 milliseconds, or 10 seconds. You may change the 10000 in the following code snippet to reflect any desired time period for auto-close, or not include this at all for the promotion to only close based on user input (e.g. a close button layer).

Pop Up JS

 setTimeout(function() {
    close_window();
},10000);