Commerce Cart renderings
You can add the Commerce Cart renderings to your storefront so that a contact 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 page on the live storefront.
The following image shows an example of a 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.
Add To Cart rendering
You use the Add To Cart rendering to enable the customer to add the current product to the shopping cart. You use the Add To Cart rendering on product detail pages.
When you add the rendering to a page in the Experience Editor with a basic custom theme applied, it looks like this:
When the customer clicks Add to cart, the system validates the Quantity field. If the field is empty, a message is displayed with the default text This field is required. If the field contains a value that is not a positive integer, a message is displayed with the default text Please enter a value greater than or equal to 1.
If the Quantity field passes validation, the system adds a cart line to the shopping cart with the specified quantity, the product ID of the current product, and the catalog and variant ID as needed.
Minicart rendering
You use the Minicart rendering on catalog and product pages to display a summary of the contents of the shopping cart. When you add the Minicart rendering to a page in the Experience Editor with the Storefront Mock-up theme applied, it looks like this:
On the live storefront, the shopping cart link is visible at all times. When the customer hovers the mouse over the shopping cart link or clicks the link, the Minicart rendering appears. If there are products in the shopping cart, the shopping cart lines and total are displayed.
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.
Configuration
You can customize the minicart labels as well as the image that displays to indicate that the minicart is loading. You must have uploaded the image you want to use to the Media Library.
To improve performance, you can disable the minicart count cache as well as recalculation of the minicart.
To customize the minicart labels and loading image:
-
In the Experience Editor, click the Minicart rendering and, on the Minicart toolbar, click the Add or Change button and then click Edit the related item.
-
In the Content Editor, ensure the Minicart rendering is selected (
/sitecore/Content/<tenant>/<site>/Data/Commerce/Cart/Minicart). -
On the Content tab, in the Minicart section, in the Total Label field, define a label for the total cart count and, in the Top Text Label field, define the text that displays at the top of the minicart.
-
In the Loading Bar Image section, click Browse, and, in the Select Media dialog box, click the image you want to use and then click Select.
-
In the View Cart section, define the View Cart Link tooltip and text.
-
In the Checkout section, define the Checkout tooltip and text.
-
To save your changes, on the Home tab, click Save.
-
After you have made your changes, republish the site. On the ribbon, on the Publish tab, click Publish, Publish Site and then, in the Publish Site dialog box, click Republish to republish the entire site in all supported languages.
NoteDo not click Smart Publish or Incremental Publish because, with these options, only changed items are updated.
To configure the Minicart rendering properties:
-
On the Sitecore Launchpad, click Content Editor.
-
In the Content Editor go to
/sitecore/Content/<tenant>/<site>. -
Right-click Home and click Experience Editor.
-
In the Experience Editor, select the minicart and, on the toolbar, click More, Edit component properties.
-
In the Control Properties dialog box, in the Minicart section, add a link to the shopping cart page and a link to the first page in the checkout process).
-
If you do not want a checkout button included, select the Hide Checkout Button check box and click OK.
Shopping Cart Lines rendering
You use the Shopping Cart Lines rendering to display the content of the shopping cart with a line for each product item. 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. When you add the rendering to a page in the Experience Editor, it looks like this:
For product bundles, each individual item that makes up the bundle is shown on an indented line that displays the product image, the product name, available variants, and the quantity. The quantity shown for individual items are per bundle. On the storefront, a customer cannot change selected variants or quantities for a bundle once 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.
If any type of discount applies to a line, the type of discount appears under the unit price, and the discount amount appears under the line total.
Configuration
It is in the Control Properties dialog box that you configure the Shopping Cart Lines display. In the Experience Editor, navigate to a page with the Shopping Cart Lines component. Select the component and, from the toolbar, click More, Edit Component Properties.
In the Display section of the Control Properties dialog box, select the check boxes next to the items you want to display in the Shopping Cart Lines section. Scroll down to the Styling section and specify the look and feel of the shopping cart lines:
-
Compact Cart ‑ displays the Shopping Cart Lines component in 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.
To configure the Free gift label, in the Experience Editor, click the Shopping Cart Lines rendering and, on the toolbar, click the Add or Change button and then click Edit the related item. In the tree view ensure Shopping Cart Lines is selected (/sitecore/Content/Sitecore/Storefront/Data/Commerce/Cart/Shopping Cart Lines) and, on the Content tab in the Other section, modify the free gift label text as required.
Promotion Codes rendering
You use the Promotion Codes rendering to enable the customer to enter discount codes for their order. You 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. The system creates a new line in the rendering 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:
Shopping Cart Total rendering
You use the Shopping Cart Total rendering to summarize the total amounts for the shopping cart contents. You use the Shopping Cart Total rendering on the Shopping Cart page. In the Experience Editor, with the Storefront Branded theme applied, it looks as follows:
If the customer changes something in the shopping cart lines, the totals are automatically updated.