Skip to content
Adobe Commerce Storefront

Search is only available in production builds. Try building and previewing the site to test it out locally.

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.

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.

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') {
  // Code that creates and adds the Edit button to the Footer slot
  // ...
}

When a shopper clicks the Edit button, they’re redirected to the product page with their current selections pre-populated, allowing them to modify their options.

Configuration Steps

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

Configure the Cart Summary Block

The enable-updating-product property is already set to true by default in the cart block. 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.

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.

Example Block Configurations

Here’s how your block configuration should look like:

Cart Block (Enabled by Default):

KeyValue
Enable Updating Producttrue
Checkout URL/checkout

Mini Cart Block (Disabled by Default):

KeyValue
Enable Updating Productfalse
Checkout URL/checkout

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 shopper is redirected to the product page with:

  • Their previously selected options pre-selected
  • The current quantity maintained

This allows them to modify their selection and update the existing cart item rather than adding a new one.

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.