Program Details
Add the Try Before You Buy selling plan name to the line items in the cart.
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.
- 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 atheme.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");
- 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.
Updated about 1 month ago