Managing the Shopping Cart

The shopping cart is a critical step in the conversion funnel, where customers make their final evaluation before committing to a purchase. Its purpose is to maximize confidence, reduce hesitation, and create a clear, low-friction path toward checkout. Liferay Commerce provides a set of tools designed to reduce drop-off and maintain momentum. Mastering the cart experience enables you to guide customers smoothly from intent to completion.

In this lesson, you’ll learn how the cart works within your storefronts and how to configure it to minimize friction and prevent abandonment.

Understanding the Cart Architecture

From a data model perspective, a shopping cart in Liferay Commerce is essentially an order in an “open” status. This unified structure ensures a smooth transition, enabling the customer's cart data to move cleanly into the next status (checkout) without data loss or errors.

This design choice provides significant operational value. Because both carts and completed orders use the same underlying structure, many storefront widgets can display either the cart or the order history with minimal differences. By treating the cart as an "open" order, Liferay keeps all customer activity in one unified system. This enables powerful features like reorders, quotes, approvals, and multiple carts per account.

Building the Full Cart Experience

Customers need a dedicated page where they can view items, adjust quantities, and see preliminary totals. Liferay provides two primary methods for building this critical review page, similar to the strategic choices you make when building a product details page (PDP).

Standard Page Approach

The first method uses the Open Carts widget on a standard Liferay page. This single, all-in-one widget is a quick, ready-to-use solution that automatically handles the cart's contents. This is particularly useful in a B2B context, where distributors often maintain multiple carts simultaneously for different types of orders. However, the main consideration for this approach is that structural customization, such as changing the layout or adding elements, requires coding and development resources, making it rigid for non-technical administrators.

Display Page Template Approach

In contrast, you can leverage Order Pages built with display page templates for greater flexibility. This modern, low-code method uses Liferay's page builder experience. It empowers a commerce administrator to design the entire cart layout by simply dragging and dropping fragments (e.g., item lists, order totals) without needing technical knowledge. This offers significant flexibility and ensures design consistency across different order views.

Determining Display Priority

Liferay determines which cart page to display based on a clear priority:

• Default Order DPT: If a default display page template for orders is defined, Liferay uses it to render the cart details.
• Open Carts Widget: If there is no default display page template, Liferay uses the first page containing the Open Carts widget.

By understanding this hierarchy, you can ensure customers always encounter the correct interface.

Implementing the Mini-Cart

Beyond the full cart page, providing a mini-cart offers a significant UX improvement. The Mini-Cart fragment is an essential tool for reducing friction because it offers persistent visibility. Customers can get a quick summary of their item count and subtotal from the site header, no matter where they navigate. This instant access acts as a constant, low-friction reminder to complete the transaction.

Liferay provides an out-of-the-box fragment that displays the item count and subtotal, expanding on click to show item details. While basic styling is easily possible via standard CSS, the fragment is implemented as a React application. This means significant changes to its functionality or structure require development effort to override the default component.

Clarity’s Shopping Cart Strategy

Clarity's primary goal is to minimize cart abandonment and provide a smooth B2C purchasing process. Their plan involves keeping the Mini-Cart fragment in the site header to maintain persistent visibility, acting as a constant reminder to complete the transaction. For the full cart page, they plan to use the display page template approach, once the feature is out of beta. This strategy ensures the store provides a clear, adaptable purchasing experience and minimizes friction for all customers, ultimately driving higher commitment rates.

Conclusion

Designing an effective shopping cart is key to reducing abandonment. By combining a clear review page with a persistent mini-cart, you can create a low-friction environment that leads customers to complete purchases.

Next, you'll learn how to optimize the checkout flow by configuring payment and shipping options.