Salla Docs
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Salla - Opensource
Salla - Developers Community
  1. Theme Architecture
  2. Pages
  3. Common Pages
  • Getting Started
    • Create a theme
    • Develop a theme
    • Setup a theme
    • Publish a theme
  • Requirements & Review
    • Overview
    • Main Requirements
    • Review Process
      • UI / UX Review
      • Technical Review
      • Metadata Review
      • Pre-Launch Review
  • Files and Folders Structure
    • Directory structure
    • Twilight.json
  • Twig Template Engine
    • Basic syntax
    • Twilight flavoured twig
  • Theme Architecture
    • Layouts
      • Overview
      • Master Layout
      • Global Variables
      • CSS Variables
      • Salla Icons
      • Custom Fonts
      • Hooks
      • Localizations
    • Pages
      • Overview
      • Home Page
      • Product Pages
        • Products listing
        • Single product
      • Customer Pages
        • Profile
        • Orders list
        • Order details
        • Wishlist
        • Notifications
      • Blog Pages
        • Blog listing
        • Single blog
      • Brand Pages
        • Brands listing
        • Single brand
      • Common Pages
        • Cart
        • Loyalty
        • Thank you
        • Single page
        • Landing Page
    • Componenets
      • Overview
      • Home Components
        • Youtube
        • Fixed banner
        • Testimonials
        • Parallax background
        • Photos slider
        • Store features
        • Square photos
        • Fixed products
        • Products slider
        • Featured products - Style 1
        • Featured Products - Style 2
        • Featured Products - Style 3
        • Brands
        • Enhanced Square Banners
        • Main Links
        • Enhanced Slider
        • Slider Products with Headers
        • Latest Products
        • Vertical Menu with Slider
      • Product Components
        • Essentials
        • Options
      • Common Components
        • Header Components
        • Footer Components
        • Comments component
  • Change Log
  1. Theme Architecture
  2. Pages
  3. Common Pages

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#

Cart page

Variables#

CartPage
page
object 
optional
title
string 
optional
Title of the page. May include html tags.
slug
enum<string> 
optional
Meaningful unique identifier that is readable by users. Slug are predifned valued in which each page has a list of allowed values. Below are the allowed values for this page.
Allowed value:
cart
cart
object (Cart) 
optional
id
string 
optional
Unique string for current cart to identify the cart.
is_require_shipping
boolean 
optional
This is to indicate if any item in the cart requires shipping. Some items needn't shipping eg. digital code will be sent to the mobile, or digital programs will be sent to the mobile as url.
has_shipping
boolean 
optional
To check if the shipping company has been selected.
real_shipping_cost
number 
optional
Shipping cost can become free by an offer, coupon.
real_discount
number 
optional
Real discount considering tax (this is only for display).
sub_total
number 
optional
The sum of items price without shipping or other costs.
discount
number 
optional
Final discount.
coupon
string  | null 
optional
Coupon used in the cart.
total
number 
optional
Total price of the items in the cart including shipping.
free_shipping_bar  
object 
optional
Free shipping bar details.
items
array [object] 
optional
Items in the cart.

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
Modified at 2025-03-04 12:54:02
Previous
Common Pages
Next
Loyalty