Documentation Index
Fetch the complete documentation index at: https://mintlify.com/SallaApp/theme-raed/llms.txt
Use this file to discover all available pages before exploring further.
The cart page displays items added to the shopping cart and allows customers to update quantities, apply coupons, and proceed to checkout.
Template location
src/views/pages/cart.twig
Cart object
| Variable | Type | Description |
|---|
cart.id | string | Unique cart identifier |
cart.items | array | Array of cart items |
cart.sub_total | float | Sum of items price without shipping |
cart.total | float | Final cart total |
cart.discount | float | Total discount amount |
cart.tax_amount | float | Tax amount |
cart.coupon | string | Applied coupon code |
cart.is_require_shipping | bool | Whether cart requires shipping |
cart.has_shipping | bool | Whether shipping company is selected |
cart.real_shipping_cost | float | Actual shipping cost |
Free shipping bar
| Variable | Type | Description |
|---|
cart.free_shipping_bar.minimum_amount | float | Minimum amount for free shipping |
cart.free_shipping_bar.has_free_shipping | bool | Whether free shipping is achieved |
cart.free_shipping_bar.percent | float | Progress percentage (0-100) |
cart.free_shipping_bar.remaining | float | Remaining amount for free shipping |
Cart item object
| Variable | Type | Description |
|---|
item.id | int | Cart item ID |
item.product_id | int | Product ID |
item.product_name | string | Product name |
item.product_image | string | Product image URL |
item.url | string | Product URL |
item.quantity | int | Item quantity |
item.type | string | Product type |
item.price | Money | Item price |
item.total | Money | Item total (price × quantity) |
item.product_price | MoneyTaxable | Original product price |
item.is_available | bool | Whether item is still available |
item.is_hidden_quantity | bool | Whether quantity field is hidden |
item.can_add_note | bool | Whether notes can be added |
item.can_upload_file | bool | Whether files can be uploaded |
Item offers
| Variable | Type | Description |
|---|
item.offer | object | Applied offer |
item.offer.discount | float | Discount amount |
item.offer.is_free | bool | Whether item is free |
item.offer.names | string | Offer name/description |
Code examples
Display cart items
{% for item in cart.items %}
<div class="cart-item">
<img src="{{ item.product_image }}" alt="{{ item.product_name }}">
<h3>{{ item.product_name }}</h3>
<p>{{ item.price|money }}</p>
<salla-quantity-input
cart-item-id="{{ item.id }}"
max="{{ item.max_quantity }}"
value="{{ item.quantity }}"
name="quantity">
</salla-quantity-input>
<p>Total: {{ item.total|money }}</p>
</div>
{% endfor %}
Update cart item
<form onchange="salla.form.onChange('cart.updateItem', event)" id="item-{{ item.id }}">
<input type="hidden" name="id" value="{{ item.id }}">
<salla-quantity-input
cart-item-id="{{ item.id }}"
value="{{ item.quantity }}"
name="quantity">
</salla-quantity-input>
</form>
Delete cart item
<salla-button
onclick="salla.cart.deleteItem('{{ item.id }}').then(() => document.querySelector('#item-{{ item.id }}').remove())">
<i class="sicon-cancel"></i>
</salla-button>
Free shipping progress
{% if cart.free_shipping_bar %}
<div class="free-shipping-bar">
{% set is_free = cart.free_shipping_bar.has_free_shipping %}
<p>
{% if is_free %}
{{ trans('pages.cart.has_free_shipping') }}
{% else %}
{{ trans('pages.cart.free_shipping_alert', {
'amount': cart.free_shipping_bar.remaining|money
}) }}
{% endif %}
</p>
<div class="progress-bar">
<div style="width:{{ cart.free_shipping_bar.percent }}%"></div>
</div>
</div>
{% endif %}
Apply coupon
<div class="coupon-section">
<input
type="text"
id="coupon-input"
name="coupon"
value="{{ cart.coupon }}"
{{ cart.coupon ? 'disabled' : '' }}
placeholder="{{ trans('pages.cart.coupon_placeholder') }}">
<salla-button
id="coupon-btn"
class="{{ cart.coupon ? 'has-coupon' : 'has-not-coupon' }}">
{{ trans('pages.cart.save_coupon') }}
</salla-button>
</div>
Cart summary
<div class="cart-summary">
<div class="summary-row">
<span>{{ trans('pages.cart.items_total') }}</span>
<b>{{ cart.sub_total|money }}</b>
</div>
{% if cart.has_shipping %}
<div class="summary-row">
<span>{{ trans('pages.cart.shipping_cost') }}</span>
<b>{{ cart.real_shipping_cost|money }}</b>
</div>
{% endif %}
{% if cart.total_discount %}
<div class="summary-row">
<span>{{ trans('pages.cart.discount') }}</span>
<b>- {{ cart.total_discount|money }}</b>
</div>
{% endif %}
{% if cart.tax_amount %}
<div class="summary-row">
<span>{{ trans('pages.cart.VAT_tax_amount') }}</span>
<b>{{ cart.tax_amount|money }}</b>
</div>
{% endif %}
<div class="summary-row total">
<span>{{ trans('pages.cart.final_total') }}</span>
<b>{{ cart.total|money }}</b>
</div>
<salla-button id="cart-submit" width="wide">
{{ trans('pages.cart.complete_order') }}
</salla-button>
</div>
Show item offers
{% if item.offer %}
<span class="item-regular-price">{{ item.product_price|money }}</span>
<span class="offer-name">{{ item.offer.names }}</span>
{% endif %}
The cart page supports dynamic updates through the Salla API. Use salla.form.onChange('cart.updateItem', event) for automatic updates when quantities change.