Next Commerce
Data AttributesDisplay

Package Display

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 vs Shorthand

<!-- 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> <!-- legacy retail field -->
</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> <!-- legacy retail field -->
</div>

The shorthand makes product card components reusable across packages — use the same markup with a different data-next-package-id.

Identity

PathDescription
package.[id].nameDisplay name
package.[id].imageImage URL
package.[id].ref_idInternal package ID
package.[id].external_idExternal system ID

Pricing

Base prices

PathDescription
package.[id].pricePer-unit price
package.[id].price_totalTotal package price
package.[id].unitPriceAlias for price
package.[id].packageTotalAlias for price_total

Legacy retail / compare prices

These fields read package-level Retail Price from Campaigns App. They are preserved for existing campaigns, but new SDK 0.4.x builds should prefer Offer-based before/after pricing from bundle selector, package toggle, cart summary, and upsell price calculations.

PathDescription
package.[id].price_retailLegacy per-unit retail price
package.[id].price_retail_totalLegacy total retail price
package.[id].unitRetailPriceCalculated legacy unit retail
package.[id].comparePriceAlias for price_retail_total
package.[id].compareTotalAlias for price_retail_total

Savings

PathDescription
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

Discount Properties (Cart Context Required)

These read from the active cart and reflect any applied coupons. They evaluate to the regular price (or zero) when no coupon is applied.

PathDescription
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

Combined Savings (Legacy Retail + Discounts)

Combines legacy retail savings with cart discounts.

PathDescription
package.[id].totalSavingsAmountTotal savings (retail + coupons)
package.[id].totalSavingsPercentageTotal savings percentage
package.[id].hasTotalSavingsBoolean — has any savings

Bundle Properties

PathDescription
package.[id].qtyUnits in the package
package.[id].unitsInPackageAlias for qty
package.[id].isBundleBoolean — is multi-pack (qty > 1)

Package-level qty is legacy Campaigns App data. For new builds, send the selected quantity from the page or component and use Offers to calculate quantity-tier pricing.

Subscription Properties

PathDescriptionExample
package.[id].is_recurring (or isRecurring)Boolean — is subscriptiontrue
package.[id].isOneTimeBoolean — is one-time purchasefalse
package.[id].intervalBilling interval"month"
package.[id].interval_countIntervals per billing cycle1
package.[id].price_recurringRecurring price per cycle$29.99
package.[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>

Complete Product Card Example

<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>

Next Steps

Cart Items Template

Previous Page

Attributes

Next Page

On this page

Long Form vs ShorthandIdentityPricingBase pricesLegacy retail / compare pricesSavingsDiscount Properties (Cart Context Required)Combined Savings (Legacy Retail + Discounts)Bundle PropertiesSubscription PropertiesComplete Product Card ExampleNext Steps