Configuring Product Variation Updates in the Cart

This tutorial shows you how to configure the Edit feature for product variations in both the cart and mini-cart. The Edit button allows shoppers to update product variations (like size or color) directly from the cart pages.

The implementation is already available in the codebase. This tutorial focuses on how to enable or disable this feature through the AEM block configuration.

Note

This feature works for configurable products in the cart. When enabled, an Edit button appears for each applicable item, allowing shoppers to modify their selected options without having to navigate away from the cart.

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 cart block shows Edit buttons by default when configurable products are present. If you want to disable it:

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 false to disable 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 already 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.

Note

By default, the mini cart does not show Edit buttons and needs to be explicitly enabled.

Example Block Configurations

Here’s how your block configuration should look like:

Cart Block (Enabled by Default):

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.