Program Details

What are Program Details?

Program details inform the shopper of the type of items in their cart. With program details, shoppers will be able to see which items in their cart are part of TryNow.

See this recipe for more specific instructions and recommendations.

Prerequisites

A working TryNow button should be implemented.

Implementation

JavaScript

When injecting the selling plan name with JavaScript, the item must first be determined to be on a TryNow selling plan.

1. The item must first be associated with the TryNow selling plan, which can be found in a meta tag and compared wherever the cart drawer items are populated. This can be in a header.liquid script or a theme.js script.

// Check for the selling plan ID and append the selling plan name if they match
const sellingPlanIdMeta = 
      document.querySelector('meta[name="trynow:selling_plan_id"]').getAttribute("content");

2. Then the selling plan name can be injected into the document wherever this javascript is run:

if (sellingPlanIdMeta 
    	&& item.selling_plan_allocation 
    	&& item.selling_plan_allocation.selling_plan.id == sellingPlanIdMeta) {
    const sellingPlanName = item.selling_plan_allocation.selling_plan.name;
  
	// Choose the element you'd like to append the Selling Plan Name to
    const newItemDetails = newItem.querySelector(".details span");
  
  // Create the Selling Plan Name element
    const sellingPlanDetailsElement = document.createElement("span");
    spanElement.textContent = sellingPlanName;
  
  // Append the new Element
    newItemDetails.append(sellingPlanDetailsElement);
}

Liquid

TryNow recommends adding the selling plan name to whatever liquid code defines the cart drawer, page, or pop-out if it does not already exist wherever you render your cart as it helps with shopper confusion:

{%- if item.selling_plan_allocation != null -%}
  <p class="product-option">{{ item.selling_plan_allocation.selling_plan.name }}</p>
{%- endif -%}

Ideally the selling plan name should be added using the Liquid templating language.