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

How to: Create a Personalized Promotion Based on Most Recent Cart Item

This article shows how Justuno can create personalized promotions by extending data from Bigcommerce to a dynamic variable that is accessible within Justuno promotions.

This article covers the following material:

    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.

    NOTE: The promotion trigger should be set in the rules as such that it can only fire if there is at least one item in the cart.

    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);

     

    Tags: Personalization, Bigcommerce, Cart, Last Item Added