Display data for a specific package using the package.[id].* syntax. When the element lives inside a parent with data-next-package-id, you can use the shorthand package.<property> and the SDK resolves the ID from the parent context.
<!-- Long form — package ID in every path --> < div > < h3 data-next-display = "package.123.name" >Product Name</ h3 > < span data-next-display = "package.123.price" >$0</ span > < s data-next-display = "package.123.price_retail" >$0</ s > </ div > <!-- Shorthand — package ID inferred from parent --> < div data-next-package-id = "123" > < h3 data-next-display = "package.name" >Product Name</ h3 > < span data-next-display = "package.price" >$0</ span > < s data-next-display = "package.price_retail" >$0</ s > </ div > The shorthand makes product card components reusable across packages — use the same markup with a different data-next-package-id.
Path Description package.[id].nameDisplay name package.[id].imageImage URL package.[id].ref_idInternal package ID package.[id].external_idExternal system ID
Path Description package.[id].pricePer-unit price package.[id].price_totalTotal package price package.[id].unitPriceAlias for price package.[id].packageTotalAlias for price_total
Path Description package.[id].price_retailPer-unit retail price package.[id].price_retail_totalTotal retail price package.[id].unitRetailPriceCalculated unit retail package.[id].comparePriceAlias for price_retail_total package.[id].compareTotalAlias for price_retail_total
Path Description package.[id].savingsAmountTotal savings amount package.[id].savingsPercentageSavings as percentage package.[id].unitSavingsPer-unit savings package.[id].unitSavingsPercentagePer-unit savings percentage package.[id].hasSavingsBoolean — has savings
These read from the active cart and reflect any applied coupons. They evaluate to the regular price (or zero) when no coupon is applied.
Path Description package.[id].discountedPriceUnit price after discounts package.[id].discountedPriceTotalTotal price after discounts package.[id].discountAmountCoupon discount amount package.[id].finalPriceFinal unit price (alias for discountedPrice) package.[id].finalPriceTotalFinal total (alias for discountedPriceTotal) package.[id].hasDiscountBoolean — has coupon discount
Combines retail savings with cart discounts.
Path Description package.[id].totalSavingsAmountTotal savings (retail + coupons) package.[id].totalSavingsPercentageTotal savings percentage package.[id].hasTotalSavingsBoolean — has any savings
Path Description package.[id].qtyUnits in the package package.[id].unitsInPackageAlias for qty package.[id].isBundleBoolean — is multi-pack (qty > 1)
Path Description Example package.[id].is_recurring (or isRecurring)Boolean — is subscription truepackage.[id].isOneTimeBoolean — is one-time purchase falsepackage.[id].intervalBilling interval "month"package.[id].interval_countIntervals per billing cycle 1package.[id].price_recurringRecurring price per cycle $29.99package.[id].price_recurring_totalTotal recurring price for all units $89.97
< div data-next-show = "package.123.isRecurring" > Billed every < span data-next-display = "package.123.interval_count" >1</ span > < span data-next-display = "package.123.interval" >month</ span > </ div > < div class = "product-card" data-next-package-id = "123" > < h3 data-next-display = "package.name" >Product Name</ h3 > < img data-next-display = "package.image" alt = "Product" > <!-- Regular price (no savings) --> < div data-next-hide = "package.hasSavings" > < p class = "price" data-next-display = "package.price" >$99</ p > </ div > <!-- Sale price --> < div data-next-show = "package.hasSavings" > < s data-next-display = "package.price_retail" >$149</ s > < p class = "price" data-next-display = "package.price" >$99</ p > < span class = "badge" > Save < span data-next-display = "package.savingsAmount" >$50</ span > (< span data-next-display = "package.savingsPercentage" >33</ span >%) </ span > </ div > <!-- Subscription --> < div data-next-show = "package.isRecurring" > < p class = "price" data-next-display = "package.price_recurring" >$29</ p > < p > Billed every < span data-next-display = "package.interval_count" >1</ span > < span data-next-display = "package.interval" >month</ span > </ p > </ div > <!-- Bundle indicator --> < div data-next-show = "package.isBundle" > < span class = "badge" > < span data-next-display = "package.qty" >3</ span >-Pack Deal </ span > </ div > < button data-next-action = "add-to-cart" data-next-package-id = "123" data-add-text = "Add to Cart" data-remove-text = "Remove from Cart" > Add to Cart </ button > </ div > 
