Show promotion based on last item added to cart (Shopify Only)

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

At a glance:
How Cart Information Is Leveraged Through The Shopify Code
Use-Case: Personalized Promotion Using Product Image And Product Name
Setting Up The Custom Code Section (TAB JS)
Connecting The Custom Code Within The Promotion

Last update 01/04/2022

How Cart Information Is Leveraged Through The Shopify Code

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

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

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(){
if (data.items && data.items.length>0){
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)
}
});

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 src=" {{singleCartProdImage}} " style="height: 175px; width: 175px;" />

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

Visit Justuno @justuno.com