Skip to content

Customize the cart summary block

This tutorial describes how to make the following customizations to the CartSummaryList container using the Adobe Commerce Boilerplate:

  • Change the product quantity selector to a dropdown menu.
  • Configure how to display savings.
  • Configure the savings display from Google Drive or Sharepoint.

Step-by-step

The following steps describe how to modify the commerce-cart.js block file in the boilerplate template to add custom content to the CartSummaryList container.

Change the product quantity selector to a dropdown menu

By default, the product quantity selector is a stepper, as shown below:

Stepper quantity selector

Stepper quantity selector

In this task, you’ll change the quantity selector to a dropdown menu. The dropdown allows shoppers to select a maximum of 20 items.

Dropdown quantity selector

Dropdown quantity selector
  1. Navigate to the blocks/commerce-cart/commerce-cart.js file and enable the dropdown selector by adding the following lines to the provider.render(CartSummaryList) method:

    quantityType: 'dropdown',
    dropdownOptions,

    The quantityType property specifies the type of quantity selector to use. The dropdownOptions property specifies the values to display in the dropdown. It is defined in the next step.

  2. Define the dropdownOptions constant at the top of the file, in the export defult async function decorate(block){} statement.

    const DROPDOWN_MAX_QUANTITY = 20;
    const dropdownOptions = Array.from(
    { length: parseInt(DROPDOWN_MAX_QUANTITY, 10) },
    (_, i) => {
    const quantityOption = i + 1;
    return {
    value: `${quantityOption}`,
    text: `${quantityOption}`,
    };
    }
    );

    This code creates an array of objects with value and text properties. The value property is the quantity value, and the text property is the text displayed in the dropdown.

  3. Save the file and generate the page to see the changes.

Display savings as a percentage or a fixed amount

In order to encourage shoppers to buy more, you can display the savings they’ll get by purchasing more items. You can display the savings on an item that’s on sale as a percentage or as a fixed amount.

Savings expressed as a percentage

Savings expressed as a percentage

Savings expressed as a percentage

Savings expressed as a total
  1. Add the following lines to the provider.render(CartSummaryList) method, below the dropdownOptions, line:

    showDiscount: true,
    //showSavings: true

    Comment out one of the lines to choose between displaying the discount as a percentage or a fixed amount.

  2. Save the file and generate the page to see the changes.

Configure the savings display from Google Drive or Sharepoint

You might want to allow a merchandiser or other non-developer to configure how to display savings values. To do this, you’ll need to make some more changes to the commerce-cart.js file. You’ll also need to make some modifications to the starter content boilerplate templates stored on Google Drive or Sharepoint. Review Create your storefront for information about the starter content and Sidekick browser extension.

  1. Comment out the savings properties from the provider.render(CartSummaryList) method.

    //showDiscount: true,
    //showSavings: true
  2. Add the following lines to the constant definitions in the export default async function decorate(block){} statement:

    'show-discount': showDiscount = 'false',
    'show-savings': showSavings = 'false',
  3. Add new lines in the provider.render(CartSummaryList) method to check whether showDiscount or showSavings is set to true:

    showDiscount: showDiscount === 'true',
    showSavings: showSavings === 'true',
  4. Save the file. When you generate the page, discounts are not displayed because the default values are false.

  5. Find the cart starter content file in the Google Drive or Sharepoint folder and add two rows to the Commerce Cart table that set the visibility values for these properties.

    Commerce Cart table

    Commerce Cart table

    Set the values of the Show Discount and Show Savings rows to either true or false.

  6. Preview the changes with the Sidekick browser extension. Then publish the changes to your staging or production environment.