Enable product variation updates in cart

The cart and mini cart drop-ins already include an Edit button that lets shoppers change a product’s size, color, or other variation options without leaving the cart. This how-to shows you how to turn that feature on or off through AEM block configuration.

What you’ll edit or create

• Edit the enable-updating-product block property
• Edit the commerce-cart block
• Edit the commerce-mini-cart block

What you’ll build

By the end of this how-to, you’ll have:

• An enable-updating-product toggle set on the commerce-cart and commerce-mini-cart AEM blocks that turns the Edit button on cart items on or off.
• An Edit button that opens a mini Product Detail Page modal, letting shoppers change size, color, or other variation options without leaving the cart.
• Confirmation messages that appear in both the cart and mini cart notification areas after a successful update.

How it Works

The Edit button feature is controlled by a configuration flag (enable-updating-product) that can be set on both the commerce-cart and commerce-mini-cart blocks in AEM. When activated, it opens a modal interface with a mini Product Detail Page (PDP) that allows shoppers to modify their selected options contextually.

Cart

In the commerce-cart.js implementation, the code checks for this flag and conditionally renders an Edit button in the Footer slot for configurable products:

// First, the configuration is read from the block with a default of 'false'
const {
  'hide-heading': hideHeading = 'false',
  'max-items': maxItems,
  // ... other config properties ...
  'checkout-url': checkoutURL = '',
  'enable-updating-product': enableUpdatingProduct = 'false',
} = readBlockConfig(block);

// Later in the code, inside the Footer slot
if (ctx.item?.itemType === 'ConfigurableCartItem' && enableUpdatingProduct === 'true') {
  const editLink = document.createElement('div');
  editLink.className = 'cart-item-edit-link';

  UI.render(Button, {
    children: placeholders?.Global?.CartEditButton,
    variant: 'tertiary',
    size: 'medium',
    icon: h(Icon, { source: 'Edit' }),
    onClick: () => handleEditButtonClick(ctx.item),
  })(editLink);

  ctx.appendChild(editLink);
}

When a shopper clicks the Edit button, a modal opens with a mini-PDP interface that allows them to modify their product options. An auto-dismissing notification appears after a successful update.

Mini Cart

Similarly, in the commerce-mini-cart.js implementation, the code uses the same configuration flag to determine whether to display an Edit button for each configurable product in the mini-cart, implementing it in the Thumbnail slot:

// First, the configuration is read from the block with a default of 'false'
const {
  'start-shopping-url': startShoppingURL = '',
  'cart-url': cartURL = '',
  'checkout-url': checkoutURL = '',
  'enable-updating-product': enableUpdatingProduct = 'false',
} = readBlockConfig(block);

// Later in the code, inside the Thumbnail slot
if (item?.itemType === 'ConfigurableCartItem' && enableUpdatingProduct === 'true') {
  const editLinkContainer = document.createElement('div');
  editLinkContainer.className = 'cart-item-edit-container';

  const editLink = document.createElement('div');
  editLink.className = 'cart-item-edit-link';

  UI.render(Button, {
    children: placeholders?.Global?.CartEditButton,
    variant: 'tertiary',
    size: 'medium',
    icon: h(Icon, { source: 'Edit' }),
    onClick: () => handleEditButtonClick(item),
  })(editLink);

  editLinkContainer.appendChild(editLink);
  ctx.appendChild(editLinkContainer);
}

When enabled, this provides a convenient modal-based editing experience. Success messages appear in both the mini-cart and main cart notification areas simultaneously, ensuring consistent user feedback across all cart interfaces.

Configuration Steps

To modify this feature’s configuration, follow these steps:

Configure the Cart Summary Block

The enable-updating-product property is set to false by default in the cart block, the same as in the mini-cart block. If you want to enable the Edit button:

1. In your AEM authoring environment, navigate to the page containing your commerce-cart block.
2. Select the commerce-cart block and open its properties dialog.
3. Locate the existing property with the Key Enable Updating Product.
4. Change its Value to true to enable the feature.
5. Save the changes.
6. Preview the changes by clicking the Preview button.
7. Publish the changes by clicking the Publish button.

Tip

The configuration is already provided in the content block, so you don’t need to add a new property - just modify the existing one as needed.

Configure the Mini Cart Block

The enable-updating-product property is also set to false by default in the mini-cart block. If you want to enable it:

1. In your AEM authoring environment, navigate to the page or header that contains your commerce-mini-cart block.
2. Select the commerce-mini-cart block and open its properties dialog.
3. Locate the existing property with the Key Enable Updating Product.
4. Change its Value to true to enable the feature.
5. Save the changes.
6. Preview the changes by clicking the Preview button.
7. Publish the changes by clicking the Publish button.

Example Block Configurations

Here’s how your block configuration should look like:

Cart Block (with Edit button enabled):

Key	Value
Enable Updating Product	true
Checkout URL	/checkout

Mini Cart Block (Disabled by Default):

Key	Value
Enable Updating Product	false
Checkout URL	/checkout

Caution

The property appears as Enable Updating Product (with spaces) in the AEM properties dialog, but is converted to kebab-case (enable-updating-product) when processed by the code.

Testing the Configuration

After configuring the feature, you should test it to ensure it’s working as expected:

1. Add a configurable product to your cart.
2. View your cart page:
   • If enabled, you should see an Edit button for each configurable product.
   • If disabled, no Edit button should appear.
3. Open the mini cart:
   • If enabled, you should see an Edit option for configurable products.
   • If disabled, no Edit option should be visible.

Feature Behavior

When the Edit button is clicked, the following happens:

1. Modal Interface: A mini-PDP modal opens directly over the current page, maintaining user context.
2. Pre-populated Options: The modal displays the product with current selections already chosen.
3. In-place Updates: Changes are applied to the existing cart item.
4. Comprehensive Messaging: Success notifications appear in:
   • The main cart notification area (if present)
   • The mini-cart message system
   • Both locations simultaneously for consistent feedback
5. Auto-dismissing Notifications: Messages automatically disappear for better UX.

Tip

Using modals ensures users don’t lose their shopping context when making product modifications.

With this simple configuration, you can provide your shoppers with a more convenient shopping experience by allowing them to modify product variations directly from the cart.

Related

• Cart overview — other cart configuration options.
• Product Details Page — the drop-in behind the in-cart edit modal.