// Look for your Klaviyo implementation - which will look something like:
{% if product %}
<script type="text/javascript">
 var _learnq = _learnq || [];
 var item = {
 "ProductName": "##{{ product.title }}",
 "ProductID": "##{{ product.id }}",
 "SKU": "##{{ product.sku }}",
 "Categories": ##{{ product.categories | json }},
 "ImageURL": "##{{ product.image.src }}",
 "URL": "##{{ shop.url }}##{{ product.url }}",
 "Brand": "##{{ product.vendor }}",
 "Price": ##{{ product.price | money_without_currency }},
 "CompareAtPrice": ##{{ product.compare_at_price | money_without_currency }}
 };
_learnq.push(["track", "Viewed Product", item]);
// Add Retention's View Product Event call here
geq.event('Viewed Product Reclaim', item);
</script>
{% endif %}

//An example of Klaviyo's add to cart script 
<script type="text/javascript"> document.querySelector('ProductForm__AddToCart').addEventListener('click',function (){ 
_learnq.push(['track', 'Added to Cart', item]); 

// Add Retention's Add To Cart Event call here 
// Method 1: (EASY) Use the same item as Klaviyo
geq.addToCart(item);  
// Method 2: (ADVANCED) Customize the item 
// NOTE: you can edit the payload if you need to    

if (typeof geq !== 'undefined' && typeof geq.addToCart === 'function') {      geq.addToCart({
name: item.ProductName,
price: item.Price,        
productID: item.ProductID,        
categories: item.Categories,        
imageURL: item.ImageURL,        
URL: item.URL,        
brand: item.Brand, 
CompareAtPrice: item.CompareAtPrice})
;} 
}); 
</script>

// Step 1: Copy and Paste the function below - no modifications needed

function createCheckoutAbandonmentPayload(cartId, cartAmount, currency, lineItems, checkoutUrl) {
    return {
        cart_id: cartId || "",
        cart_amount: cartAmount || "",
        currency: currency || "",
        extra: {
            line_items: lineItems.map(function(item) {
                var lineItem = {};

                // Assign properties if they exist
                if (item.Quantity) lineItem.quantity = item.Quantity;
                if (item.RowTotal) lineItem.line_price = item.RowTotal;
                
                var product = {};
                if (item.ProductName) product.title = item.ProductName;
                if (item.ProductID) product.id = item.ProductID;
                if (item.ProductURL) product.url = item.ProductURL;

                if (item.ItemPrice) product.price = { amount: item.ItemPrice, currencyCode: currency || "" };
                if (item.SKU) product.sku = item.SKU;
                if (item.ImageURL) product.image = { src: item.ImageURL };

                // Add the product only if it has data
                if (Object.keys(product).length > 0) lineItem.product = product;

                return lineItem;
            }),
            checkout_url: checkoutUrl || ""
        }
    };
}

// Step 2: Build the necessary variables required for the payload
// *NOTE* You are required to assign the variable values to the appropriate dynamic data from your platform

var cartId = {{ cart_id_value }}; // Replace with actual cart ID
var cartAmount = {{ cart_amount_value }}; // Replace with actual cart amount
var currency = "USD"; // Replace with actual currency code if different
var checkoutUrl = {{ checkout_url_value }}; // Replace with actual checkout URL
var lineItems = {{ all_cart_items }}; // Replace with actual cart items

// The "lineItems" variable above will contain all the products in the users cart
// *NOTE* The formatting for this variable is very specific - please ensure its an array of objects with the following layout and values:
 
 [
    {
        "ProductID": "string",  // The unique identifier for the product (e.g., "24757")
        "SKU": "string",  // The stock keeping unit (e.g., "LUX-SAT-PNL-BURG")
        "ProductName": "string",  // The name of the product (e.g., "*FR* LUXE Satin Drape Panel by Eastern Mills")
        "Quantity": number,  // The quantity of the product (e.g., 1)
        "ItemPrice": number,  // The price per item (e.g., 21.99)
        "RowTotal": "string",  // The total price for the row (e.g., "21.99")
        "ProductURL": "string",  // The URL for the product (e.g., "https://www.eventdecordirect.com/catalog/...")
        "ImageURL": "string",  // The URL for the product image (e.g., "https://static.eventdecordirect.com/images/...")
        "ProductCategories": ["string"] // An array of categories the product belongs to (e.g., ["Event Curtains", "Drapes"])
    },
    // Separate products by commas
]

// Step 3: Create the payload with the variables above and call the Retention function
var payload = createCheckoutAbandonmentPayload(cartId, cartAmount, currency, lineItems, checkoutUrl);

if (typeof geq !== 'undefined' && typeof geq.event === 'function') {
  geq.event("Checkout Started Reclaim", payload);
}

var item = { 
"Name": "##{{ product.title }}", 
"Price": ##{{ product.price | money_without_currency }}, 
"ProductID": "##{{ product.id }}", 
"Categories": ##{{ product.categories | json }}, 
"ImageURL": "##{{ product.image.src }}", 
"URL": "##{{ shop.url }}##{{ product.url }}", 
"Brand": "##{{ product.vendor }}" 
};

<script type="text/javascript"> 
var item = { 
"Name": "<?php echo $block->escapeJs($block->escapeHtml($_product->getName())) ?>", 
"Price": <?php echo json_encode($_product->getFinalPrice()) ?>, "ProductID": "<?php echo $_product->getId() ?>", 
"Categories": <?php echo json_encode($_product->getCategoryIds()) ?>, "ImageURL": "<?php echo $block->getImageUrl($_product, 'product_page_image_large') ?>", 
"URL": "<?php echo $_product->getProductUrl() ?>", 
"Brand": "<?php echo $_product->getAttributeText('manufacturer') ?>" }; </script>

var item = { 
"Name": _satellite.getVar('ProductName'), 
"Price": _satellite.getVar('ProductPrice'), 
"ProductID": _satellite.getVar('ProductID'), 
"Categories": _satellite.getVar('ProductCategories'), // Assumes this is a JSON array 
"ImageURL": _satellite.getVar('ProductImageURL'), 
"URL": _satellite.getVar('ProductURL'), 
"Brand": _satellite.getVar('ProductBrand') 
}

//Fetch product details via data element var item = {}; 
var prod = digitalData.products; 
if (prod.length > 0) { 
item.Name = prod[0].productName; 
item.ProductID = prod[0].productID; 
item.ImageURL = prod[0].productImageURL; 
item.URL = window.location.href; 
item.Price = prod[0].productPrice; item.index = 0; 
}
return item;

<script type="text/javascript"> var item = _satellite.getVar('klaviyo_items'); //Ensure we have the required attributes (can be modifed) function isValidItem(item ) { return item !== undefined && item.hasOwnProperty('ImageURL') && item.ImageURL !== null && item.ImageURL !== undefined && item .hasOwnProperty('Price') && item.Price !== null && item.Price !== undefined;} if (isValidItem(item)) { geq.event('Viewed Product Reclaim', item); } </script>

//Add to cart script - requires the Fetch Product Details Script above const primaryButtons = document.getElementsByClassName("btn btnPrimary"); 
const secondaryButtons = document.getElementsByClassName("btn btnSecondaryOne addToCartOrderBtn"); 

function isValidItem(atcItem) { 
return atcItem !== undefined && atcItem.hasOwnProperty('ImageURL') && atcItem.ImageURL !== null && atcItem.ImageURL !== undefined && atcItem.hasOwnProperty('Price') && atcItem.Price !== null && atcItem.Price !== undefined; 
} 

function addToCartHandler(atcItem) { 
if (isValidItem(atcItem)) { geq.addToCart(atcItem); } 
} 

function handleButtonClick() { 
var atcItem = _satellite.getVar('klaviyo_items'); addToCartHandler(atcItem); 
} 

for (const button of primaryButtons) { 
button.addEventListener("click", handleButtonClick); 
} 
for (const button of secondaryButtons) { button.addEventListener("click", handleButtonClick);
}