Cart

The cart page template renders the shopping cart page where customers can check what they have added to their shopping cart, and then simply proceed for checkout. The general view of this page displays the list of the items added to the cart, so then the customer can modify any quantity or remove any item.
In addtion, can upload any files or attach any note along with the cart's items.

Following is the page location and url:

Example

Variables

CartPage

Components

This page starts by displaying the breadcrumbs component. The {% component breadcrumbs %} line returns the current navigation for the user.

JS Web Components

Cart page may include the following JS Web Components, which are ready-made designs and style-sets of web components for Salla stores.

Quantity Input <salla-quantity-input>

Button <salla-button>

Loyalty <salla-loyalty>

Hooks

The cart page template calls for the following hooks in order to inject extra information.

Usage

The cart page template consists of several parts, which are a form to display all of the cart's items/product, free shipping option, and any added discount.

Cart items form

Using an HTML <form>, the developer can display all of the items added to the cart. All of the items can be displayed along with their options by using a for-loop statement as follows:

Free shipping

Using the variable cart.free_shipping_bar.has_free_shipping, the developer may check if there is free shipping selected, and then build the logic to handle this part.

Apply Copoun and discount

Customer can also apply any given copoun in this page; however this is subject to the store settings which can be checked by the store.settings.cart.apply_coupon_enabled variable. Accordingly, any given discount can be shown using the cart.real_discount varible.

Finally, the complete order within the cart page can sent using the following Salla component button:

Educational Clip

Example#

Variables#

Components#

JS Web Components#

Hooks#

Usage#

Cart items form#

Free shipping#

Apply Copoun and discount#