Cart

Components

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

{% component 'header.breadcrumbs'%}

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.

{% hook 'cart:items.start' %}
{% hook 'cart:items.end' %}
{% hook 'cart:summary.start' %}
{% hook 'cart:summary.end' %}

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:

{% for item in cart.items %}
    <form onchange="salla.cart.updateItem(new FormData(event.currentTarget))" id="item-{{ item.id }}">
        <input name="id" type="hidden" value="{{ item.id }}"/>

        <salla-conditional-fields>

            <a href="{{ item.url }}">
                <img src="{{ item.product_image }}" alt="{{ item.product_name }}"/>
            </a>

            <a href="{{ item.url }}">{{ item.product_name }} </a>
            <span class="{{ item.offer?'':'hidden' }}">{{ item.product_price|money }}</span>
            <span class="{{ item.offer?'case1-style':'case2-srtyle' }}">{{ item.price|money }}</span>
            <span class="{{ item.offer?'':'hidden' }}">{{ item.offer.names }} </span>

            {% if item.is_hidden_quantity %}
                <input name="quantity" type="hidden" value="{{ item.quantity }}"/>
                <span>{{ item.quantity }}</span>
            {% else %}
                <salla-quantity-input max="{{ product.max_quantity }}" value="{{ item.quantity }}" name="quantity">
                </salla-quantity-input>
            {% endif %}

            <span>{{ trans('pages.cart.total') }}:</span>
            <span>{{ item.is_available?item.total|money: trans('pages.cart.out_of_stock') }}</span>

            {% for option_index, option in item.options %}
                {# if there is no need for a label, or it needs special handling in the element file #}
                {% if option.type in ["splitter"] %}
                    {{ option.element|raw }}
                {% else %}
                    {% if option.type != "donation" %}
                        <label for="options[{{ option.id }}]">
                            <strong>
                                {{ option.name }} {% if option.required %}<span>*</span>{% endif %}
                            </strong>
                            <small>{{ option.placeholder }}</small>
                        </label>
                    {% endif %}
                    {{ option.element(product.id)|raw }}
                {% endif %}
            {% endfor %}
        </salla-conditional-fields>  
        .....
    </form>
{% else %}
    {{ trans('pages.cart.empty_cart') }}
{% endfor %}

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.

<h4>{{ trans('pages.cart.free_shipping') }}</h4>
<p>
    <span>{{ (cart.free_shipping_bar.has_free_shipping ? trans('pages.cart.has_free_shipping') :trans('pages.cart.free_shipping_alert', {'amount': cart.free_shipping_bar.remaining|money})) | raw }}</span>
    <span>🎉</span>
</p>

<h4>{{ trans('pages.cart.summary') }}</h4>
<div>
    <span>{{ trans("pages.cart.items_total") }}</span>
    <strong>{{ cart.sub_total|money }}</strong>
</div>
<div>
    <span>{{ trans('pages.cart.shipping_cost') }}</span>
    <strong>{{ cart.real_shipping_cost|money }}</strong>
</div>

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.

{% if store.settings.cart.apply_coupon_enabled %}
    <form onsubmit="return salla.form.submit('coupon.add');" class="border-t border-border-color border-b py-5 mb-5">
        <input type="hidden" name="id" value="{{  cart.id }}">
        <label class="block text-sm">{{ trans('pages.cart.have_coupon') }}</label>
        <div class="mt-2.5 relative">
            <input placeholder="{{ trans('pages.cart.coupon_placeholder') }}"
                   class="pe-24 form-input" value="{{ cart.coupon }}"
                   name="coupon"
                   type="text">

            {% if cart.coupon %}
                <salla-button type="button" onclick="salla.coupon.remove({{ cart.id }})" class="btn--coupon has-coupon" oader-position="center">
                    <span class="coupon-text">{{ trans('pages.cart.remove_coupon') }}</span>
                    <i class="sicon-cancel icon text-xl w-8"></i>
                </salla-button>
            {% else %}
                <salla-button type="submit" class="btn--coupon" oader-position="center">
                    <span class="coupon-text">{{ trans('pages.cart.save_coupon') }}</span>
                    <i class="sicon-cancel icon text-xl w-8"></i>
                </salla-button>
            {% endif %}
        </div>
    </form>
{% endif %}

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

<salla-button onclick="salla.cart.submit()" loader-position="end" width="wide">
  {{ trans('pages.cart.complete_order') }}
</salla-button>

:::tip[Educational Clip]

:::