Sales channels menu section
Sales channels menu section
Customize theme
| Async | Yes |
| Function | await discountNinja.api.cache.clear() |
| Clears all session and local storage data used by the script. Also clears the content of the indexedDb used by the script. | |
| Type | Public |
| This function is intended for use in troubleshooting sessions. |
| Async | Yes |
| Function | await discountNinja.api.cart.add(variant: number, quantity: number, properties?: Record<string, string>, sellingPlanId?: number) |
| Adds a variant to the cart. Note: this is an asynchronous function; the result must be awaited. | |
| Type | Public |
| This function is intended for use in integration code by third parties. | |
| Parameters | variant (number): the variant id |
quantity (number): the number of items to add | |
properties? (Record<string, string>): an optional object with key/value pairs of line item properties | |
sellingPlanId? (number): an optional selling plan (to allow for recurring purchases based on a subscription) |
| Async | No |
| Property | discountNinja.api.cart.content |
| Can be used to get access to an object that represents the content of the cart, including any discounts applied by Shopify's backend. | |
| Type | Public |
| This function is intended for use in integration code by third parties. | |
| Return value | object | null Returns the Shopify cart object. Returns null if no cart is available. |
| Async | Yes |
| Property | await discountNinja.api.cart.prefill(variants?: string[], redirectUrl?: string) |
| Can be used to prefill a cart with specific variants. Typically used to create a link to a prefilled, discounted cart. Cf. https://support.discountninja.io/en/articles/5194395-how-to-build-a-prefilled-discounted-cart | |
| Type | Public |
| This function is intended for use in integration code by third parties. | |
| Parameters | variants?: string[]: a comma-separated list of the variant id of the product variants you want to add to the cart; for each variant you'll need to specify the quantity. |
This parameter is optional. If it is omitted, the app will look for a query parameter named variants instead. If neither is available the prefill method will not execute. | |
redirectUrl?: string: define which page should be loaded once the cart is prefilled | |
This parameter is optional. If it is omitted, the app will look for a query paramer named redirectUrl instead. If neither is available the default value is "/cart". |
| Async | Yes |
| Function | await discountNinja.api.checkout.isDiscounted() |
| Can be used to check if any of the promotions apply to the cart and result in a product, order or shipping discount. | |
| Type | Public |
| This function is intended for use in integration code by third parties. | |
| Return value |
The return value indicates if the app will instruct Shopify to apply discounts at checkout. Additionally, when this function returns |
| Async | No |
| Function | discountNinja.api.checkout.addPipelineRule() |
| Can be used to add custom business logic that is executed when the customer click the checkout button. | |
| Discount Ninja needs to take over the checkout process when a user clicks the checkout button to ensure the checkout is correctly discounted. | |
| As a result, the app overrides any logic you may have associated with clicking the checkout button. To execute this logic you can add it to the pipeline of rules that is executed by the app. | |
Each pipeline rule is a parameterless function that returns a boolean indicating if execution should continue (true) or not (false). | |
| Type | Public |
| This function is intended for use in integration code by third parties. | |
| Return value | boolean The return value indicates if the rule was added properly. |
| Async | Yes |
| Property | await discountNinja.api.checkout.with(variants: string[], discountCodes?: string[]) |
| Can be used to checkout using specific variants and one or more discount codes. | |
| Type | Public |
| This function is intended for use in integration code by third parties. | |
| Parameters | variants?: string[]: a comma-separated list of the variant id of the product variants you want to add to the cart; for each variant you'll need to specify the quantity. The variant and the quantity are separated by an x. E.g. 123456x2 |
discountCodes?: string[]: a list of discount codes to apply to the cart |
| Async | Yes |
| Function | await discountNinja.api.discountCode.add(discountCode: string) |
| Adds a discount code or promotion code to the Discount Ninja promotion code field programmatically. | |
| Type | Public |
| This function is intended for use in integration code by third parties. | |
| Parameters | discountCode (string): the discount code to add |
| Async | Yes |
| Function | await discountNinja.api.discountCode.remove(discountCode: string) |
| Removes a discount code or promotion code from the Discount Ninja promotion code field programmatically. | |
| Type | Public |
| This function is intended for use in integration code by third parties. | |
| Parameters | discountCode (string): the discount code to remove |
| Property | discountNinja.api.discountedCart.content |
| Can be used to get access to an object that represents the content of the cart, including any discounts applied by Shopify's backend. | |
| Type | Internal |
| This is an internal function or property. Use it only for debugging purposes. Do not rely on this function or property in your integration code. | |
| Return value | object | null Returns an object representing the current cart, with the applicable Discount Ninja offers applied. Note that amounts returned are in cents, not in dollars. |
| Property | discountNinja.api.entitlements |
| Lists the entitlements that apply based on the available offers. The array contains one item for each available offer. It details the prerequisites that were found in the cart, the discount amount, the target products and the entitled line items that were found in the cart. | |
| Type | Public |
| This function is intended for use in integration code by third parties.. | |
| Return value | object[] | null Returns an array of Entitement info objects. |
| Async | No |
| Function | discountNinja.api.events.subscribe(eventName: string) |
| Provides instructions on how to subscribe to an event with a given name. Note: this function does not, itself, subscribe to the event. | |
| See the list of available events. | |
| Type | Public |
| This function is intended for use in integration code by third parties. |
function printInstructionsToSubscribeToEvent(event) {
if (discountNinja) discountNinja.api.events.subscribe(event);
}
printInstructionsToSubscribeToEvent('cart:updated')
// Prints the following message on the console:
// To subscribe to this event use the following code:
// document.addEventListener("la:dn:cart:updated", function(event) { const eventData = event.detail.data[0]; console.log('Event la:dn:cart:updated was published.', eventData); });
| Async | No |
| Function | discountNinja.api.events.publish(eventName: string) |
| Publishes an event to the PriceRuleEngine. | |
| See the list of available events. | |
| Type | Public |
| This function is intended for use in integration code by third parties. |
| Async | No |
| Function | discountNinja.api.help() |
| Prints a link to this page on the console. | |
| Type | Public |
| This function is intended for use in integration code by third parties. |
| Async | No |
| Function | discountNinja.api.lineItem.getUpdatedKey(key: string) |
| Returns the updated key associated with a cart line item. A key can be updated by Shopify's back-end when properties are added, a selling plan changes or a discount is added. Cf. https://support.discountninja.io/en/articles/9109023-fix-network-requests-to-cart-js | |
| Type | Public |
| This function is intended for use in integration code by third parties. | |
| Parameters | key (string): the original key of the cart line item |
| Return value | string The updated key. |
| Async | No |
| Function | discountNinja.api.offers.all |
| Lists all the active offers loaded by the app. | |
| Type | Internal |
| This function returns an internal object. Do not rely on the properties of this object in your integration code as they may be removed or renamed in future versions. | |
| Return value | object[] An array of offer objects, representing the offers that are applicable in the current context. |
| Async | No |
| Function | discountNinja.api.offers.get(token: string) |
| Finds a specific offer in the list of all the active offers loaded by the app. | |
| Type | Internal |
| This function returns an internal object. Do not rely on the properties of this object in your integration code as they may be removed or renamed in future versions. | |
| Parameters | token (string): the token of the offer to find |
| Return value | object | null Anoffer object if the offer is found, otherwise null. |
| Function | discountNinja.api.promotions.all |
| Lists all the active promotions loaded by the app. | |
| Type | Internal |
| This function returns an internal object. Do not rely on the properties of this object in your integration code as they may be removed or renamed in future versions. | |
| Return value | object[] An array of promotion objects, representing the promotions that are applicable in the current context. The promotion object provides information about the trigger used and the list of offers associated with the promotion. |
| Function | discountNinja.api.promotions.get(token: string) |
| Finds a specific promotion in the list of all the active promotions loaded by the app. | |
| Type | Internal |
| This function returns an internal object. Do not rely on the properties of this object in your integration code as they may be removed or renamed in future versions. | |
| Parameters | token (string): the token of the promotion to find |
| Return value | object | null A promotion object if the promotion is found, otherwise null. |
| Async | No |
| Function | discountNinja.api.promotions.trigger(tokens: string) |
| Triggers a private promotion programmatically. | |
| Use this as a programmatic alternative to using a discount link. To trigger a promotion based on a promotion code, use the Discount Code Add function instead. | |
| Type | Public |
| This function is intended for use in integration code by third parties. | |
| Parameters | tokens (string | string[]): the token(s) of the promotion(s) to trigger |
| Async | Yes |
| Function | await discountNinja.api.strikethroughPricing.apply() |
| Triggers a refresh of all strikethrough pricing programmatically. This is typically not required since the app automatically detects situations where the strikethrough pricing must be updated. | |
| For an event based approach, use this event instead. | |
| Type | Public |
| This function is intended for use in integration code by third parties. |
| Async | No |
| Function | discountNinja.api.strikethroughPricing.setBeforeRender(async (input: Object) => string) |
| Discount Ninja ships with its own internal rendering function wired up as the “before render” callback. This function allows the user to override this callback with a custom callback. | |
| Parameters |
This is the shape of the |
| Return value | |
| Type | Public |
| This function is intended for use in integration code by third parties. |
| Async | Yes |
| Function | await discountNinja.api.widgets.render() |
| Triggers a refresh of all widgets (including strikethrough pricing) programmatically. This is typically not required since the app automatically detects situations where the widgets must be updated. | |
| Type | Public |
| This function is intended for use in integration code by third parties. |
| Async | Yes |
| Function | await discountNinja.api.widgets.promotionCodeField.toggle() |
| Expands or collapses the promotion code field widget. | |
| Type | Public |
| This function is intended for use in integration code by third parties. |
| Async | No |
| Function |
|
| Expands or collapses the instructions section in the footer of the promotion code field. | |
| Type | Public |
| This function is intended for use in integration code by third parties. |
| Event | la:dn:api:ready |
| Direction | This event is published by the app. You can optionally subscribe to it. |
| Behavior | Signals that the script has loaded and interaction with the API is possible. |
| Event | la:dn:promotions:loaded |
| Direction | This event is published by the app. You can optionally subscribe to it. |
| Behavior | Published after promotions have been loaded, processed and filtered by the app. It allows the consumer to inspect which promotions are available for the user during the browsing session. |
| Event properties | The event data contains a promotions object. |
| Event | la:dn:product:discount:calculated |
| Direction | This event is published by the app. You can optionally subscribe to it. |
| Behavior | This event is published when the (discounted) price of any marked product on the page has been calculated. |
| The app will attempt to find all products on a page based on markers in the HTML. It then applies the available promotions to those products and publishes one event per product variant with the results. | |
| For the current product, this event is published when the page is loaded and is published again when the selected variant or selected selling plan changes. For other products, this event is published only once per product and per page load. | |
| Event properties | The event data contains a product variant price info object. |
document.addEventListener("la:dn:product:discount:calculated", function(event) {
const productVariantPriceInfo = event.detail.data[0];
console.log('Product variant price calculated', productVariantPriceInfo);
});
| Event | la:dn:cart:updated |
| Direction | This event is published by the app. You can optionally subscribe to it. |
| Behavior | Published when a change to the cart has been detected and promotions have been evaluated. |
| This event is published when the page is loaded and is published again when the content of the cart changes or the set of applied promotions changes. | |
| Event properties | The event data contains a discounted cart object. |
| Event | la:dn:cart:discounted |
| Direction | This event is published by the app. You can optionally subscribe to it. |
| Behavior | Published when a discount has been applied to the cart. |
| This event is published when the page is loaded and is published again when the content of the cart changes or the set of applied promotions changes. | |
| Event properties | The event data contains a discounted cart object. |
| Event | la:dn:cart-mutations:processing |
| Direction | This event is published by the app. You can optionally subscribe to it. |
| Behavior | Published when the store is making updates to the cart. |
| This event is published when Discount Ninja detects that network requests have been made to clear, update, change or add to the cart. Specifically, the app detects fetch requests to the /cart/add.js, /cart/update.js, /cart/change.js and /cart/clear.js (see https://shopify.dev/docs/api/ajax/reference/cart). |
| Event | la:dn:cart-mutations:processed |
| Direction | This event is published by the app. You can optionally subscribe to it. |
| Behavior | Published when the store has finished making updates to the cart. |
| This event is published when Discount Ninja detects that all network requests to the /cart/add.js, /cart/update.js, /cart/change.js and /cart/clear.js (see https://shopify.dev/docs/api/ajax/reference/cart) have been completed. |
| Event | la:dn:checkout:initiate |
| Direction | This event is subscribed to by the app. To publish it, use the following syntax: |
| |
| Behavior | This approach is useful if you need to trigger checkout programmatically without bypassing Discount Ninja. Note: if you need a custom checkout pipeline (for example, you may want to execute custom validation logic before allowing the checkout to proceed) when clicking the checkout button, use this API function instead. |
| Event | la:dn:money:convert |
| Direction | This event is subscribed to by the app. To publish it, use the syntax explained in the example below. |
| Behavior | Most currency conversion mechanisms are supported out-of-the-box by Discount Ninja. This means there is no need to implement custom logic in most cases. |
| In case the currency conversion mechanism of your theme (or supporting app) is not automatically triggered, you can publish this event after the theme has updated prices to let Discount Ninja know that it should re-render prices. |
| Event | la:dn:collection:updated |
| Direction | This event is subscribed to by the app. To publish it, use the syntax explained in the example below. |
| Behavior | When collection products are added, removed or updated the app must recalculate the discounted prices and render the price. |
| Most mechanisms used to update collections are supported out-of-the-box by Discount Ninja. This means there is no need to implement custom logic in most cases. | |
| In case the app is not automatically detecting a situation where collection products are updated, you can publish this event after the theme has updated the products to let Discount Ninja know that it should re-render prices. |
| Event | la:dn:product:changed |
| Direction | This event is subscribed to by the app. To publish it, use the syntax explained in the example below. |
| Behavior | When a product page is rendered, the app calculates the discounted price for the selected variant of that product. If the same product page is re-used to render a different product (without navigating or reloading the page), this event can be used to inform Discount Ninja of that. |
| This event is only required in unusual cases where the same product page is used to render the product details of different products (usually variations of the same product that are not modeled as product variants). | |
| Parameters | detail.data.product.id (number): the id of the productdetail.data.product.handle (string): the handle of the product |
| Event | la:dn:variant:changed |
| Direction | This event is subscribed to by the app. To publish it, use the syntax explained in the example below. |
| Behavior | When a different variant is selected, the app must recalculate the discounted price and render the price. |
| Most mechanisms used to change variants are supported out-of-the-box by Discount Ninja. This means there is no need to implement custom logic in most cases. | |
| In case the app is not automatically detecting a situation where the product variant is changed, you can publish this event to let Discount Ninja know that it should re-render prices. | |
| Parameters | detail.data.variant.id (number): the id of the selected variant |
| Event | la:dn:drawercart:opened |
| Direction | This event is subscribed to by the app. To publish it, use the following syntax: |
| |
| Behavior | When a drawer cart is opened the app may need to render discounted prices. |
| In case the app is not automatically detecting a situation where the drawer cart is opened, you can publish this event to let Discount Ninja know that it should re-render the line item prices and subtotal in the drawer cart. |
| Event | la:dn:entitlements:calculated |
| Direction | This event is published by the app. You can optionally subscribe to it. |
| Behavior | Published when the (discounted) cart and the associated entitlements have been calculated. |
| This event is published when the page is loaded and is published again when the content of the cart changes or the set of applied promotions changes. | |
| Event properties | The event data contains an array with Entitlement info objects. Each object documents if the user is entitled to a gift for a gift offer. |
| Event | la:dn:promotioncode:added |
| Direction | This event is published by the app. You can optionally subscribe to it. |
| Behavior | Published when the a promotion code is redeemed using the promotion code field. |
| Event properties | The event data contains: - promotionCode: the promotion code that is applied- success: a boolean indicating that the code was added successfully- manual: a boolean indicating if the code was added manually or by the system |
| Event | la:dn:promotioncode:removed |
| Direction | This event is published by the app. You can optionally subscribe to it. |
| Behavior | Published when the a promotion code is removed using the promotion code field. |
| Event properties | The event data contains: - promotionCode: the promotion code that is removed- success: a boolean indicating that the code was removed successfully |
| Property | Type | |
|---|---|---|
amount | number | The discount amount, expressed in cents. |
discountCode | string | The offer token, Shopify discount code or promotion code associated with the applied discount. |
discountedPrice | number | The discounted price, expressed in cents. |
isCurrentProduct | boolean | true if the user is on a product page that matches the handle for this object |
isDiscountedByOffer | boolean | true if the variant is discounted by a Discount Ninja offer (not, for example, a compare-at price). |
offerToken | string | The token of the offer associated with the applied discount. |
originalPrice | number | The original price (i.e. the price before discounts are applied), expressed in cents. |
percentage | number | The discount percentage. |
productHandle | string | The handle of the product associated with the object. |
sellingPlan | number | null | The id of the selected selling plan for subscription products. Null for one-time purchases. |
promotionToken | string | The token of the promotion associated with the applied discount. |
variantId | number | null | The id of the selected variant. Null if the variant is not known, for example for products on collection pages. |
| Property | Type | |
|---|---|---|
offerToken | string | The token of the offer. |
applied | boolean | Indicates if the offer has been applied to the cart. |
source | "app" | "native" | null | Set to "app" if the offer was configured in Discount Ninja. If set to "native", this offer is a wrapper for a discount configured in Shopify. |
prerequisite | object | |
prerequisiteItems | array | An array of objects that lists the line items that are considered prerequisites for this offer to apply. Each object has two properties: - key (string): the key of the line item- quantity (number): the number of items on the line item that are prerequisites |
entitlement | object | |
amount | number | null | The amount that is discounted. Null for a shipping offer. |
level | "product" | "order" | "shipping" | Indicates at what level the offer discounts the cart. |
type | "gift" | "percentage" | "fixed_amount" | "fixed_price" | The type of entitlement that is applied by the offer. |
target | object | |
variants | string | null | A comma-separated list of variant ids the customer is entitled to. |
collections | string | null | A comma-separated list of collection handles the customer is entitled to. |
products | string | null | A comma-separated list of product handles the customer is entitled to. |
allProducts | boolean | Set to true if the entitlement applies to all products. |
shipping | boolean | Set to true if the entitlement applies to the shipping line. |
entitledItems | object | |
quantity | number | The number of items the customer is entitled to. |
claimed | number | The number of entitled items the customer has added to the cart. |
lineItems | array | An array of objects that lists the line items that are considered entitled items. Each object has two properties: - key (string): the key of the line item- quantity (number): the number of items on the line item that are entitlements |
sets | array | An array of objects that lists the sets ( a group of prerequisites and entitlements). |
| Property | Type | |
|---|---|---|
appliedPromotions | array | The list of the product, discount and shipping promotions applied to the cart. |
offerToken | string | The token of the Discount Ninja offer. |
promotionToken | string | The token of the Discount Ninja promotion. |
discountCode | string | null | The discount code if the discount is applied using a Shopify discount code. Null if the discount is applied using a Discount Ninja offer. |
priceRuleId | string | null | The identifier of the Shopify price rule if the discount is applied using a Shopify discount code. Null if the discount is applied using a Discount Ninja offer. |
amount | number | The discount amount, in cents. |
tier | number | The number of the tier of the offer that is applied. The first tier is 1. |
level | "product" | "order" | "shipping" | Indicates at what level the offer discounts the cart. |
currency | string | The ISO code of the currency of the cart. |
discountCode | string | null | The native Shopify discount code that is applied to the cart. Null if no code is applied. |
items | array | The list of line items in the cart. |
offerToken | string | The token of the Discount Ninja offer. |
promotionToken | string | The token of the Discount Ninja promotion. |
discountCode | string | null | The discount code if the product discount is applied using a Shopify discount code. Null if the product discount is applied using a Discount Ninja offer. |
priceRuleId | string | null | The identifier of the Shopify price rule if the product discount is applied using a Shopify discount code. Null if the product discount is applied using a Discount Ninja offer. |
discount | object | |
product | object | |
amount | number | The discount, in cents, per product. |
percentage | number | The discount per product as a percentage. |
line | object | |
amount | number | The discount for the cart line, in cents. |
percentage | number | The discount for the cart line as a percentage. |
isGift | boolean | True if the item represents a gift with purchase. |
isSubscriptionProduct | boolean | True if the item is purchased with a selling plan. |
price | object | |
product | object | |
discounted | number | The discounted price per product, in cents. |
original | number | The original price per product, in cents. |
compareAt | number | The compare-at price per product, in cents. |
line | object | |
discounted | number | The discounted price for the cart line, in cents. |
original | number | The compare-at price for the cart line, in cents. |
compareAt | number | The compare-at price for the cart line, in cents. |
product | object | |
available | boolean | True if the variant is available. False if the variant is out of stock. |
collectionIds | string | null | A comma-separated list of collection identifiers associated with the product. Null if the product does not belong to any collections. |
collections | string | null | A comma-separated list of collection handles associated with the product. Null if the product does not belong to any collections. |
productHandle | string | The handle of the product. |
productId | number | The identifier of the product. |
sellingPlanId | number | null | The identifier of the selling plan. Null for one-time purchases. |
tags | string | null | A comma-separated list of tags associated with the product. Null if the product does not have tags. |
title | string | The title of the variant. |
variantId | number | The identifier of the variant. |
orderDiscount | number | The total order discount in cents. |
orderDiscounts | array | The list of order discounts applied to the cart. |
offerToken | string | The token of the Discount Ninja offer. |
promotionToken | string | The token of the Discount Ninja promotion. |
discountCode | string | null | The discount code if the order discount is applied using a Shopify discount code. Null if the order discount is applied using a Discount Ninja offer. |
priceRuleId | string | null | The identifier of the Shopify price rule if the order discount is applied using a Shopify discount code. Null if the order discount is applied using a Discount Ninja offer. |
amount | number | The discount amount, in cents. |
percentage | number | The discount percentage. |
tier | number | The number of the tier of the offer that is applied. The first tier is 1. |
lineItems | array | The list of line items affected by the order discount. |
valueType | "percentage" | "fixed_amount" | "fixed_price" | The type of discount. |
shipping | object | undefined | An object containing information about the shipping discount that is applied to the cart. Undefined if no shipping discount is applied. |
offerToken | string | The token of the Discount Ninja offer. |
promotionToken | string | The token of the Discount Ninja promotion. |
discountCode | string | null | The discount code if the shipping discount is applied using a Shopify discount code. Null if the shipping discount is applied using a Discount Ninja offer. |
priceRuleId | number | null | The identifier of the Shopify price rule if the shipping discount is applied using a Shopify discount code. Null if the shipping discount is applied using a Discount Ninja offer. |
subtotal | object | Overview of the subtotal of the cart, after applying product discounts. |
discount | number | The discount in cents. This is the sum of all product discounts. |
discountedPrice | number | The subtotal in cents after product discounts. |
originalPrice | number | The subtotal in cents before product discounts. |
total | object | Overview of the total of the cart, after applying product and order discounts. |
discount | number | The discount in cents. This is the sum of all product and order discounts. |
discountedPrice | number | The total in cents after product and order discounts. |
originalPrice | number | The total in cents before product and order discounts. |
token | number | The token of the cart, provided by Shopify. |
Refresh behavior JavaScript method
document.addEventListener("la:dn:cart:updated", function(event) {
const discountedCart = event.detail.data[0];
//The code below simply adds a line in the console log
console.log('Ready to update the progress bar based on the discounted total', discountedCart.total.discountedPrice);
//Run a sample implementation for a shipping bar
updateFreeShippingBar(discountedCart.total.discountedPrice);
});
function updateFreeShippingBar(discountedTotal) {
//In this example we assume that the threshold is $50
//We multiply by 100 to express the threshold in cents as opposed to dollars.
//This allows us to compare the threshold to the discounted total.
//We then multiply by the currency conversion rate provided by Shopify,
//this allows us to handle multiple currencies.
const conversionRate = Shopify.currency.rate;
const freeShippingThresholdInCents = 50 * 100 * conversionRate;
//We can now calculate the amount remaining (i.e. how much more the visitor must
//spend to reach the threshold). Note that the discountedTotal is provided
//in cents and in the currently select currency.
const centsRemaining = freeShippingThresholdInCents - discountedTotal;
//Finally, we can calculate this amount as a percentage of the total.
const percentageRemaining = Math.max(centsRemaining, 0) / freeShippingThresholdInCents * 100;
const percentageComplete = 100 - percentageRemaining;
//TODO: Update the progress bar
//You'll need to update the code below to update the progress bar
//based on the discounted total.
//How that is accomplished depends on the specific theme you use.
console.log(`Free shipping is ${percentageComplete}% complete, ${percentageRemaining}% left`);
}
| App blocks | Code edits | |
|---|---|---|
| Available on stores that do not have an Online Store 2.0 theme? | No | Yes |
| Requires manually cleaning up code in the theme after uninstalling the app? | No | Yes |
| Maximum flexibility to position each widget? | No | Yes |
| Optimal performance? | Yes | Yes |
| Available for each widget? | No | Yes |
| Attribute | Data type | Notes |
|---|---|---|
handle | string | The handle of the product. |
id | number | The ID of the product. |
collection-handles |
| A comma-separated list of collection handles indicating which collections the product belongs to. Use [[--NONE--]] if the product does not belong to any collections. |
collection-ids |
| A comma-separated list of collection IDs indicating which collections the product belongs to. Use [[--NONE--]] if the product does not belong to any collections. |
available | boolean | true if the variant is available. false if the variant is out of stock. |
price | number | The price (in cents) of the first available variant of the product. This should align with the title and image displayed. |
compare-at-price | number | The compare-at price (in cents) of the first available variant of the product. This should align with the title and image displayed. |
price-varies | boolean | true if the product includes variants with different prices. false if all variants have the same price.If price-varies is true, the app uses the price-min instead of the price, unless a variant is specified. |
compare-at-price-varies | boolean | true if the product includes variants with different compare-at prices. false if all variants have the same compare-at price.If compare-at-price-varies is true, the app assumes some variants have a compare-at price and others don't. |
price-min | number | The lowest price (in cents) of any variants of the product. This price is displayed when price-varies is true. |
tags |
| A comma-separated list of tags of the product. Use [[--NONE--]] if the product does not have any tags. |
variant | number | [Optional] The id of the variant in this attribute. If omitted the price of the first available or lowest priced variant is used. See the section on variant price. |
<script>
document.addEventListener('Searchanise.AutocompleteUpdated', function() {
document.dispatchEvent(new CustomEvent('la:dn:collection:updated'));
});
document.addEventListener('Searchanise.ResultsUpdated', function() {
document.dispatchEvent(new CustomEvent('la:dn:collection:updated'));
});
</script>
Theme picker
Example
Mark price section
Add tags to HTML
Mark product price and tags
Add tags to HTML
Dispatch event
Mixed mode
Custom mode of PLP
CSS selectors
Cart item components
:bolt: | Quickstart | Create your first site | /pages/7FvWQMF0kTK7HGhlQfmo | ||
:leaf: | Editor basics | Learn the basics of GitBook | https://github.com/GitbookIO/gitbook-templates/blob/main/product-docs/broken-reference/README.md | ||
:globe-pointer: | Publish your docs | Share your docs online | /pages/QPzbTvC6XsT5gERiU43E |
Add alt text and captions to your images
| Analytics | Track analytics from your docs | https://www.gitbook.com/integrations#analytics | ||
| Support | Add support widgets to your docs | https://www.gitbook.com/integrations#support | ||
| Interactive | Add extra functionality to your docs | https://www.gitbook.com/integrations#interactive | ||
| Visitor Authentication | Protect your docs and require sign-in | https://www.gitbook.com/integrations#visitor-authentication |