Personalize Promotions Based On Last Item Added to Cart (Shopify 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 Shopify to a dynamic variable that is accessible within Justuno promotions.

NOTE: This article only applies to Justuno installations that were done via the Shopify APP, which is available within the Shopify APP store 

 

This article covers the following material:

  1. How Cart Information Is Leveraged Through The Shopify App

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

  3. Setting Up The Custom Code Section (TAB JS)

  4. Connecting The Custom Code Within The Promotion

 


How Cart Information Is Leveraged Through The Shopify App 

There are several properties that can be pulled from the last item added within the cart through the Justuno Shopify app:

  • Product ID
  • Product Variant ID
  • Product SKU
  • Product Quantity (in cart)
  • Product Title
  • Product Image
  • Product Discount Price
  • Product Page URL

Each of these properties can be set within Justuno to a dynamic variable identifier that can then be utilized anywhere within a Justuno promotion when typed inside double curly bar brackets {{DYNAMIC_VARIABLE_NAME}}

The full script, which includes a variable initialization for each of the above listed properties and is designed for use in the TAB JS section of a promotions custom code is as follows:

jju.ajax({
    type:"GET",
    url:"/cart.js",
    cache:false,
    dataType:"JSON"
}).done(function(data){
  try{
    setTimeout(function(){
      var dLen = data.items.length-1;
      if (ju_options.personalized){
        ju_options.personalized.singleCartProdId = data.items[dLen].id;
        ju_options.personalized.singleCartProdVariantId = data.items[dLen].variant_id;
        ju_options.personalized.singleCartProdSku = data.items[dLen].sku;
        ju_options.personalized.singleCartProdQty = data.items[dLen].quantity;
        ju_options.personalized.singleCartProdName = data.items[dLen].title;
        ju_options.personalized.singleCartProdImage = data.items[dLen].image;
        ju_options.personalized.singleCartProdPrice = data.items[dLen].discounted_price;
        ju_options.personalized.singleCartProdUrl = data.items[dLen].url;
      } else {
        ju_options.personalized = {
          "singleCartProdId":data.items[dLen].id,
          "singleCartProdVariantId":data.items[dLen].variant_id,
          "singleCartProdSku":data.items[dLen].sku,
          "singleCartProdQty":data.items[dLen].quantity,
          "singleCartProdName":data.items[dLen].title,
          "singleCartProdImage":data.items[dLen].image,
          "singleCartProdPrice":data.items[dLen].discounted_price,
          "singleCartProdUrl":data.items[dLen].url,
          };
      }
      ju_push_pers(0);
    },200);
  } catch(er){
    consold.log(er)
  }
});

 


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 Shopify 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: "/cart.js",
    cache: false,
    dataType: "JSON"
}).done(function(data) {
    try {
        setTimeout(function() {
            var dLen = data.items.length - 1;
            if (ju_options.personalized) {
                ju_options.personalized.singleCartProdName = data.items[dLen].title;
                ju_options.personalized.singleCartProdImage = data.items[dLen].image;
            } else {
                ju_options.personalized = {
                    "singleCartProdName": data.items[dLen].title,
                    "singleCartProdImage": data.items[dLen].image
                };
            }
            ju_push_pers(0);
        },500);
    } catch (er) {
        consold.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 {{singleCartProdName}} as shown below
  • 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="{{singleCartProdImage}}" />

 

 

 

  • 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, Shopify, Cart, Last Item Added

Have more questions? Submit a request

0 Comments

Article is closed for comments.