The Cart function of the shopping cart of the SAP Commerce Cloud Spartacus UI

This feature was introduced in version 1.0 of the TUA Spartacus library.

Shopping carts work differently in TUA Spartacus and core Commerce Spartacus. They need to support product supply and a complex pricing structure to support multiple types of charges, including one-time charges, recurring charges, and usage-based charges. Among the various expenses, for the shopping cart, customers need to understand the immediate payment fee at checkout and the monthly recurring expense commitment.

What is TUA Spartacus?

The Telecom and Utilities Accelerator of the project "Spartacus" (TUA Spartacus) is a streamlined Angular-based storefront for SAP Commerce Cloud, working exclusively through the Commerce REST API. TUA Spartacus collaborated with and improved the Telco and Utilities Accelerator storefronts. In addition to supporting Commerce REST APIs, Telco and Utilities Accelerator also supports TM Forum APIs to provide industry-specific functions.

TUA is the abbreviation of Telcom, Utilities and Accelerator.

Telcom Spartacus demo site：

https://jsapps.cy8u-telcoacce1-s5-public.model-t.cc.commerce.ondemand.com/telcospa/en/USD/

Utilities Storefront：
https://jsapps.cy8u-telcoacce1-s5-public.model-t.cc.commerce.ondemand.com/utilitiesspa/en/USD/

Selective Cart

This feature was introduced in version 1.5 of the Spartacus library.

The optional shopping cart feature (also known as "save for later") allows customers to choose which items in the shopping cart they wish to purchase, and leave other items in the shopping cart for future consideration. This improves the shopping experience and increases the conversion rate.

The optional shopping cart feature requires SAP Commerce Cloud version 1905.11.

Also need selectedcartaddon AddOn.

The Selective Cart module is a set of extensions that provides functions that allow customers to select which items in the shopping cart to checkout, while leaving other items in the shopping cart for future consideration.

design diagram:

saved cart

This feature was introduced in version 3.2 of the Spartacus library.

The saved shopping cart feature allows users to save one or more shopping carts for later use. Users can benefit from the saved shopping cart feature to enhance their online shopping experience. For example, they can create a saved shopping cart for items they buy regularly, or they can create a different saved shopping cart for certain types of purchases.

Enabling Saved Cart

You can enable the saved shopping cart function by installing the @spartacus/cart function library.

The saved shopping cart function is driven by CMS and consists of the following CMS components:

• AddToSavedCartsComponent
• AccountSavedCartHistoryComponent
• SavedCartDetailsOverviewComponent
• SavedCartDetailsItemsComponent
• SavedCartDetailsActionComponent

You can use SmartEdit to configure the saved shopping cart feature to display the saved shopping cart components in Spartacus, or you can use ImpEx to manually add them to the content slot.

If you are using the spartacussampledata extension, the saved shopping cart component is already enabled. However, if you decide not to use the extension, you can enable them through ImpEx.

User Interface

The saved shopping cart feature extends the shopping cart interface with name, description, and save time. When saving the shopping cart, the name is required and the description is optional.

Cart Page

When you log in and there are items in your shopping cart, you can only save the shopping cart from the shopping cart page. If you are not logged in, the "Saved Cart" and "Save Cart for Future Use" links will redirect you to the login page.

Add one or more items to your shopping cart, and then open the shopping cart page. The Save Cart For later link is displayed next to Order Summary, as shown in the following example:

Click the Save Cart For Later button.

Give the saved cart a name.

After saving the shopping cart, your current active shopping cart will no longer be displayed because it has been saved.

Saved Cart History Page

After you save the shopping cart, you can view the list of your saved shopping carts on the "Saved Shopping Cart" history page. You can access the history page by clicking "Saved Cart" in the "My Account" drop-down menu, as shown in the following example:

In the "Saved Shopping Cart" history page, you can access the details of any saved shopping cart by clicking on any element in the saved shopping cart or row (except the "Make the shopping cart active" link) information.

The following is an example of the "Saved Cart" history page:

When you click to make the shopping cart active, you can choose to keep a copy of this saved shopping cart before you click Restore. After clicking "Restore", the saved shopping cart will become the active shopping cart. After activation, the saved shopping cart will disappear from the list of saved shopping carts, unless you choose to keep a copy of the saved shopping cart. If you choose to keep a copy of your saved shopping cart, it will appear in your list of saved shopping carts. By default, the name of this newly saved shopping cart is a copy of the name of the existing shopping cart, but you can set the name of the saved shopping cart in the copied shopping cart name field, as shown in the following example:

Saved Cart Details Page

The saved shopping cart details page displays all relevant information about a specific saved shopping cart, such as the items in the shopping cart, the quantity, and the date when the shopping cart was saved.

The following figure is an example:

You can update the name and description of the saved shopping cart by clicking the pencil icon. You can also change the quantity of the product or delete it from your saved shopping cart.

If you remove all items from a saved shopping cart, the saved shopping cart will be deleted and you will be redirected to the "Saved Shopping Cart" history page.

Note that the saved shopping cart feature currently does not allow you to add multiple products to the active shopping cart from the "Saved Shopping Cart Details" page.

More original articles by Jerry, all in: "Wang Zixi":