Commerce Cart renderings

Abstract

Overview of the Commerce Cart group, which contains renderings to display the content of the shopping cart.

You can add the Commerce Cart renderings to your storefront so that a customer can add items to their shopping cart when they browse your storefront. This topic describes the renderings accessible from the Commerce Cart section in the Toolbox.

The following image shows an example of a Product Detail Page (PDP) on the live storefront.

Example of the product page on the live storefront

On the PDP, when the customer clicks Add to Cart, the Free Gift Selection rendering and the Minicart rendering are updated accordingly. Similarly, on the Shopping Cart page, the Free Gift Selection rendering, the Shopping Cart Lines rendering, the Shopping Cart Total rendering, and the Promotion Codes rendering communicate and update accordingly.

The following image shows an example of a Shopping Cart page.

Example shopping cart page

Customers can browse the storefront and add items to the cart anonymously. If the customer adds items to the cart while browsing the site anonymously, those items remain in the cart after a successful login. If the customer adds products to their cart while logged in, the products remain in the cart after the session ends. Later, if the customer adds items to the cart anonymously and then logs in, the saved cart is merged with the anonymous cart.

Illustration of cart merge functionality.

You use the Add To Cart rendering on product detail pages to enable the customer to add the current product or product bundle to the shopping cart.

When you add the rendering to a page in the Experience Editor with a basic custom theme applied, it looks like this:

Add To Cart rendering

When the customer clicks Add to cart, the system validates that the Quantity field is a positive integer. If the Quantity field passes validation, the system adds the product to the shopping cart with the specified quantity, the product ID of the current product, and the catalog and variant ID as needed. Whether the product is added as a separate line depends on the configuration of the rollup property in the Commerce Engine. If turned on, lines with the exact same product variant are merged into one.

You use the Free Gift Selection rendering to display a list of products that the customer can select free gifts from. With the Storefront site template, this rendering is used on the Shopping Cart page. You can, however, also use the Free Gift Selection rendering on the Product Detail Page. When the customer adds a product to the cart that entitles them to a free gift, the free gift selection displays. The Free Gift Selection rendering is hidden until the customer fulfills the criteria for a free gift. You configure which products are available as free gifts in the Commerce Business Tools. For a video overview, see Free Gift with Purchase on Master Sitecore.

Note

Product bundles are not supported. For additional FAQs, see Dynamic Bundle and Free Gift Selection FAQ.

You should ensure the Free Gift Selection rendering is available on the Shopping Cart page at the very least because a promotion that entitles the customer to a free gift can be based on other criteria than buying a specific product. It can be based on any qualifier defined in the Commerce Engine, for example the cart total, which might not be cached until the customer begins the checkout process.

Having the Free Gift Selection rendering on the PDP is optional but it improves usability as customers are immediately prompted to select the free gifts they are entitled to. By default, if customers do not claim their free gifts, they are prompted on every page they visit until they select them. You can change the default behavior by modifying the Scriban template and the associated JavaScript so that the Free Gift Selection rendering is only displayed when an add-to-cart event is triggered by the Add to Cart rendering.

To display variant properties (such as Color and Size) as part of the Free Gift Selection rendering, in the Commerce Business Tools for Merchandising, edit the display properties for the product variant. In the Edit Display Properties dialog box, select the Display On Site check box.

Important

Using the Free Gift Selection rendering on the Product Detail Page might impact performance because this page is viewed often. In comparison, the Shopping Cart page is only viewed on checkout.

In the Experience Editor, with the Storefront Branded theme applied, the Free Gift Selection rendering looks like the following:

Free Gift Selection rendering in the Experience Editor.

On the live storefront, on the Shopping Cart page, the Free Gift Selection rendering displays a list of free gifts that the customer can choose from, as shown in the following example:

Note

Images displayed for the Free Gift Selection rendering are configured at the site level.

Free Gift Selection rendering displayed in the cart.

You can modify the labels in the Free Gift Selection section as required. You can also change the vertical layout of the free gift list to a horizontal one by adding a new rendering variant to the Free Gift Selection rendering.

After the customer has claimed the free gifts, the Shopping Cart page is updated as follows:

Shopping Cart page after Claim Gift action.

On the Product Detail Page, the Free Gift Selection rendering looks like this:

Free Gift Selection rendering on the Product Detail Page.

Note

You customize the Free Gift Selection rendering by modifying the Scriban template.

You use the Minicart rendering on catalog and product pages to display a summary of the contents of the shopping cart. It is typically located in the header of the page so that it is available on all pages. When you add the Minicart rendering to a page in the Experience Editor with the Storefront Branded theme applied, it looks like the following with all details showing based on mock data and images:

Miniart rendering in the Experience Editor.

Note

The Minicart - deprecated rendering is only available for existing sites and is based on a MVC view instead of a Scriban template in a rendering variant.

On the live storefront, the shopping cart count is visible at all times and shows the number of products in the cart. When the customer hovers the mouse over the shopping cart link or clicks the link, a drop-down window appears that shows the content of the cart. If there are products in the shopping cart, the shopping cart lines and total are displayed.

If the customer qualifies for a free gift and has claimed it, the free gift is also displayed in the Minicart as highlighted in the following image:

Minicart showing a free gift.

The customer can click a line to see product details, or click the delete icon to remove a line from the cart.

If the customer clicks View cart, the Shopping Cart page appears. If the customer clicks Checkout, the first checkout step appears. You can configure the link for both buttons.

Configuration

In the Control Properties dialog box, you can configure the following properties for the Minicart rendering.

Note

You can change the minicart labels and loading image for the Minicart rendering. To customize the image that displays to indicate that the minicart is loading, you must upload the image you want to use to the Media Library.

Property

Use

View Cart Link

Configure a link to the shopping cart page.

Checkout Link

Configure a link to the first page in the checkout process.

Hide Checkout Button

Configure whether to show or hide the checkout button. If you are using the Free Gift functionality and have the Free Gift Selection rendering configured on the Shopping Cart page, you might want to hide the checkout button so that the customer is forced to visit the PDP and claim their free gifts.

Note

You customize the Minicart rendering by modifying the Scriban template.

You use the Shopping Cart Lines rendering to display the content of the shopping cart with a line for each product item. The rendering is typically used on a number of pages during the checkout process such as the Shopping Cart page where it is configured to show all content. On subsequent pages in the checkout process, the rendering generally shows less information and does not allow the content to be updated. When it is configured to render all content, each line contains the product image, the product name with a link to the product page, the variant, the unit price, the quantity, and the line total, as well as an icon to delete the line. Unlike the Minicart rendering, the customer can update the quantity for each cart line. When you add the rendering to a page in the Experience Editor, it looks like the following:

Shopping Cart Lines rendering

Note

The Shopping Cart Lines - deprecated rendering is only available for existing sites and uses renderers instead of a Scriban template.

For product bundles, each individual item that makes up the bundle is shown on an indented  line (subline) that displays the product image, the product name, available variants, and the quantity. The quantity shown for individual sublines are per bundle. A customer cannot change selected variants or quantities for a bundle after it has been added to cart. Changes can only be done by removing the current product bundle from the cart and adding it back again with the desired product variants.

Free gifts that have been claimed are identified with a free gift label and the quantity cannot be changed. It is, however, possible to remove a free gift from the cart, which means that the customer can select another free gift if they so desire.

Shopping Cart Lines on the live storefront.

Note

Images displayed for the Shopping Cart Lines rendering are configured at the site level.

If any type of discount applies to a cart line, the type of discount appears under the unit price, and the discount amount appears under the line total.

On pages in the checkout process, a scaled down version is typically configured to show the read-only content of the cart as the customer progresses through the checkout.

Checkout process order summary

In the Experience Editor, the order preview looks like this:

Order Preview shown in the Experience Editor

Note

The Shopping Cart Lines - deprecated rendering is only available for existing sites and is based on a MVC view instead of a Scriban template in a rendering variant.

Configuration

In the Control Properties dialog box, you can configure the following properties for the Shopping Cart Lines rendering.

Property

Use

Display

Table Header

Delete Button

Quantity

Unit Price

Shipping Information

Sublines

Select the check boxes next to the items you want to display in the Shopping Cart Lines section.

Styling - Commerce

Compact Cart

Displays the Shopping Cart Lines component in a smaller and compact view.

Main Title

Sets the font size to 30px for Shopping Cart Line content.

No Margins

Sets a narrower margin.

Primary Button Filled

Displays a solid primary button (if displayed).

Primary Button Line

Displays the primary button with a border.

Rounded Corners Container

Displays the Shopping Cart Lines container with rounded corners.

Secondary Button Line

Displays the secondary button (if displayed) with a border line.

Secondary Title

Sets the font size to 18px for Shopping Cart Lines content.

Note

You customize the Shopping Cart Lines rendering by modifying the Scriban template.

You use the Promotion Codes rendering to enable the customer to enter discount codes for their order. You typically use the Promotion Codes rendering on the Shopping Cart page. The customer can add a discount code in the Discount code field, and then click Add discount code. A new line is rendered for each discount code that the customer enters. Each line contains a Delete icon, so the customer can remove the discount code.

In the Experience Editor, with the Storefront Branded theme applied, it looks as follows:

Promotion Codes rendering

In the following example on the live storefront, the discount code gives the customer a 10% discount off the cart subtotal.

Promotion Codes rendering on the live storefront

You use the Shopping Cart Total rendering to summarize the total amounts for the shopping cart contents. The rendering is typically used on a number of pages during checkout such as the Shopping Cart page. It is also used on subsequent checkout pages as the customer proceeds through the checkout. The rendered content is the same in all cases. In the Experience Editor, with the Storefront Branded theme applied, it looks as follows:

Shopping Cart Total rendering

On pages in the checkout process, a scaled down version is typically configured to show the read-only content of the cart as the customer progresses through the checkout.

Checkout process order summary

If the customer changes something in the shopping cart lines, the totals are automatically updated.