Ensure dynamic, accurate pricing for bundled products in the cart drawer by:

  • Automatically recalculating bundle pricing when items are added, removed, or quantities are changed.
  • Reflecting bundle-specific discounts in real time.
  • Updating the UI without requiring a full page reload.

Why Is This Important?

Accurate Pricing Feedback:

Users expect to see immediate price adjustments when interacting with bundled items.

Maintain Discount Logic Integrity:

Bundles often rely on conditional pricing, resulting in recalculation that can overcharge or under-discount users.

Avoid Checkout Discrepancies:

If cart and checkout totals differ, it causes confusion and trust issues, leading to abandonment.

Deliver Seamless UX:

Real-time updates keep the interaction smooth and reduce friction compared to delayed or backend-only updates.

Implementation Plan

1. Track Bundle Items in the Cart

Identify which cart items are part of a bundle using line_item.properties or specific tags.

Use a common identifier such as _bundle_id to group related items for price calculation.

Example:

json
{ "_bundle": true, "_bundle_id": "starter_kit", "_bundle_price_type": "dynamic"
}

2. Listen for Cart Events

Use JavaScript (vanilla or with your framework) to detect relevant changes:

  • Quantity increase or decrease
  • Removal of a bundle item
  • Addition of new bundle items

Hook into these actions via event listeners or cart update callbacks.

Example:

js
document.querySelectorAll('.quantity-input').forEach(input => { input.addEventListener('change', () => { recalculateBundlePricing(); });
});

3. Recalculate Bundle Pricing Logic

Use stored base prices and apply real-time discount logic to get the final price.

  • Sum the individual prices of included items.
  • Apply a predefined bundle discount (e.g., 15%).
  • Update the price display accordingly.

Example:

js
function updateBundlePrice(bundleItems) { const total = bundleItems.reduce((sum, item) => sum + item.price, 0); const discount = 0.15 * total; displayPrice(total - discount);
}

Bundle items can be pulled from the current cart state (e.g., JSON from window.cart or fetched via AJAX).

4. Update the DOM Without Reload

Update the visible bundle price element using JavaScript after recalculating:

js
function displayPrice(newPrice) { document.querySelector('.bundle-price').textContent = `$${(newPrice / 100).toFixed(2)}`;
}

Ensure proper currency formatting and consider localization.

5. Handle Partial Bundles Gracefully

If a user removes one or more items from a bundle, apply fallback logic:

  • Remove the bundle discount entirely.
  • Or show a partial bundle warning (e.g., “Add all items to receive 15% off”).
js
if (bundleItems.length < expectedCount) { showBundleWarning("Incomplete bundle – discount not applied.");
}

6. Sync With Backend on Cart Update

While the frontend handles dynamic UI updates, the backend should validate and enforce:

  • Accurate pricing and discount application at checkout
  • Bundle integrity based on configured rules
  • Edge cases like incompatible items or invalid combinations

Backend/API Considerations

  • Ensure backend supports dynamic bundle pricing logic or responds with recalculated totals on cart API calls.
  • Validate discount eligibility when partial bundles are submitted.
  • Ensure the same bundle rules are enforced both client-side and server-side.