Configure cart summary

By default, the CartSummaryList container shows a stepper for the quantity selector and hides savings. This tutorial shows you how to change the quantity selector to a dropdown menu and configure how the cart summary displays savings.

What you’ll edit or create

• Edit the cart block — blocks/commerce-cart/commerce-cart.js
• Edit the CartSummaryList container
• Create the dropdownOptions constant
• Edit the Cart content document

What you’ll build

By the end of this tutorial, you’ll have:

• A dropdown quantity selector in the CartSummaryList container, replacing the default stepper.
• Cart summary savings displayed the way you configure them.
• A savings display driven by the Cart content document.

Step-by-step

Change the product quantity selector to a dropdown menu

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

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

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 default 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 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 the Cart content document

To allow a merchandiser or other non-developer to configure how to display savings values, you need to make more changes to the commerce-cart.js file and the relevant content documents. For guidance on starter content and the Sidekick browser extension, review Create your storefront .

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 content document in your site’s content folder, and add two rows to the Commerce Cart table that set the visibility values for these properties.

   

   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.

Related

• Cart containers — reference for the cart summary containers you configured.
• Slots — extend these containers with custom UI.