Add custom product lines to the cart summary

Add text from a custom product attribute

In this task, we’ll add text that provides shipping information when certain conditions apply. For example, an item might be out of stock, and therefore cannot be shipped immediately. Or maybe the product is on clearance and cannot be returned. The CartSummaryList component is extended to display text defined by a merchant in the Admin using a custom product attribute. If the custom product attribute is not assigned to a product, then no additional information is displayed.

The following images show how these custom lines can be rendered:

1. Open the blocks/commerce-cart/commerce-cart.js boilerplate file. This file imports the CartSummaryList container, and we want to use a slot to display the custom product attribute. Find the provider.render(CartSummaryList, { line in the file and insert a ProductAttributes slot with the following code:

    slots: {
      ProductAttributes: (ctx) => {
        // Prepend Product Attributes
        const ProductAttributes = ctx.item?.productAttributes;
   
        ProductAttributes?.forEach((attr) => {
          if(attr.code === "Shipping Notes") {
            if(attr.selected_options) {
              const selectedOptions = attr.selected_options
              .filter((option) => option.label.trim() !== '')
              .map((option) => option.label)
              .join(', ');
   
              if(selectedOptions) {
                const productAttribute = document.createElement('div');
                productAttribute.innerText = `${attr.code}: ${selectedOptions}`;
                ctx.appendChild(productAttribute);
              }
            } else if (attr.value) {
              const productAttribute = document.createElement('div');
              productAttribute.innerText = `${attr.code}: ${attr.value}`;
              ctx.appendChild(productAttribute);
            }
          }
        })
      },

   This code creates a slot named ProductAttributes that displays the custom product attribute Shipping Notes, if it is assigned to a product. If the corresponding attribute is found, the slot creates a new div element and appends the attribute code and value to the element. The element is then appended to the ctx element, which is the product line in the cart summary.

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

Display promotional information in the footer of a cart item

Now we’ll add information defined in a custom cart price rule to the footer of the CartSummaryList container. If the the conditions set in the cart price rules are not met, then no additional information is displayed. For example, if a specific coupon has not been applied or if the subtotal threshold has not been met, then this information is not displayed.

1. Add a Footer slot beneath the ProductAttributes slot.

    slots: {
      ProductAttributes: (ctx) => {
        ...
        }
   
      Footer: (ctx) => {
        // Runs on mount
        const wrapper = document.createElement('div');
        ctx.appendChild(wrapper);
   
        // Append Product Promotions on every update
        ctx.onChange((next) => {
        wrapper.innerHTML = '';
   
          next.item?.discount?.label?.forEach((label) => {
          const discount = document.createElement('div');
          discount.style.color = '#3d3d3d';
          discount.innerText = label;
          wrapper.appendChild(discount);
        });
      });
    },

   This code creates a slot named Footer, which displays the promotional information defined in the custom cart price rule. If the conditions set in the cart price rule are met, the slot creates a new div element and appends the promotional information to the element. The element is then appended to the ctx element, which is the product line in the cart summary.

2. Save the file. Add products that total at least $75 and apply the BOO24 coupon code to the cart. The page displays the rule name beneath each item in the cart.