Bundle Shipping

Assign a shipping method to individual bundle cards. When the visitor selects a bundle in swap mode, the specified shipping method is automatically applied after the cart items are updated.

<!-- Via attribute (static card) -->
<div data-next-bundle-card
     data-next-bundle-id="premium"
     data-next-shipping-id="5"
     data-next-bundle-items='[{"packageId":10,"quantity":2}]'>
  Premium Bundle
</div>

// Via auto-render JSON definition
{
  "id": "premium",
  "shippingId": "5",
  "items": [{ "packageId": 10, "quantity": 2 }]
}

The value of data-next-shipping-id must be a valid ref_id from the campaign's shipping methods (campaignStore.data.shipping_methods).

How It Works

Shipping is applied after the bundle items are successfully written to the cart. When the selection changes from card A to card B:

1. The previous bundle's items are removed and the new bundle's items are added (swapCart)
2. If the cart write succeeds and card B has data-next-shipping-id, the shipping method is set via cartStore.setShippingMethod(id)
3. Cart totals are recalculated with the new shipping method (the calculate API receives the selected shipping ref_id)

If the cart write fails, shipping is not changed — the previous shipping method and selection are preserved. Any shipping errors are logged to the console via the enhancer logger.

If card B does not have data-next-shipping-id, the previously set shipping method persists.

Combining with Include Shipping

Use data-next-include-shipping="true" on the container to include shipping costs in the price displays. This works independently of data-next-shipping-id — one controls which shipping method is selected, the other controls whether shipping is visible in price calculations.

<div data-next-bundle-selector
     data-next-include-shipping="true">

  <div data-next-bundle-card
       data-next-bundle-id="standard"
       data-next-shipping-id="3"
       data-next-bundle-items='[{"packageId":10,"quantity":1}]'>
    <h3>Standard</h3>
    <span data-next-bundle-display="price"></span>
  </div>

  <div data-next-bundle-card
       data-next-bundle-id="express"
       data-next-shipping-id="7"
       data-next-bundle-items='[{"packageId":10,"quantity":1}]'>
    <h3>Express</h3>
    <span data-next-bundle-display="price"></span>
  </div>

</div>

When Shipping Is Not Applied

Shipping is only set in swap mode after a successful cart write. It is not applied when:

• The selector uses data-next-selection-mode="select" — shipping is set when the external action writes to the cart, not on card click
• The selector is in upsell context (data-next-upsell-context) — upsell operations write to the order, not the cart