Skip to content

basket_preview

The basket_preview macro renders a basket preview in your storefront. Internally, it uses the basket-preview and h-dropdown webcomponents.

Definition

{% basket_preview(options) %}

Input parameters

options

object represents an object of basket preview attributes

Option key Type Default Required Description
options.icon string "" no Label of the module. Possible values are value (the cart value will be displayed) or card (the "Cart" inscription will be displayed)
options.instanceId string "" yes Unique identifier commonly provided by a special module variable moduleInstance

Example

In this example we render a basket preview with the value of products displayed as a label:

{% from "@macros/basket_preview.twig" import basket_preview %}

{{ basket_preview({
    instanceId: moduleInstance,
    icon: 'value'
}) }}

Macro source code

{% macro basket_preview(options) %}
    {% from "@macros/icon.twig" import icon %}

    {% set shopUrls = ObjectApi.getShopUrls() %}
    {% set basketSettings = ObjectApi.getBasketSettings() %}

    {% if basketSettings.isBuyingEnabled %}
        <basket-preview
            {% if options.icon == 'value' %}is-with-value{% endif %}
            basket-url="{{ shopUrls.basketUrl }}"
            basket-delivery-payment-url="{{ shopUrls.basketDeliveryAndPaymentUrl }}"
        >
            <h-dropdown name="basket-preview" direction="bottom-right">
                <h-dropdown-toggler name="basket-preview">
                    <div class="labeled-icon">
                        <div
                            class="indicator"
                            aria-label="{{ translate('Products in the cart') }}: 0. {{ translate('See details') }}"
                            data-value="0"
                        >
                            {{ icon('icon-basket', {
                                classNames: ['labeled-icon__icon'],
                                ariaHidden: true
                            }) }}
                        </div>
                        <div class="labeled-icon__signature font_bold">{{ translate('Cart') }}</div>
                    </div>
                </h-dropdown-toggler>

                <h-dropdown-content name="basket-preview">
                    <div class="basket-preview">
                        <div class="grid__row grid__row_xs-vcenter">
                            <div class="grid__col">
                                {{ icon('icon-basket', {
                                    classNames: ['icon_xxl'],
                                    ariaHidden: true
                                }) }}
                            </div>
                            <div class="grid__col">
                                <p class="align_center" tabindex="0">{{ translate('Your cart is empty') }}</p>
                            </div>
                        </div>
                    </div>
                </h-dropdown-content>
            </h-dropdown>
        </basket-preview>
    {% else %}
        {% set basketDisabledDropdownName = 'basket-preview-disabled-' ~ options.instanceId %}

        <h-dropdown name="{{ basketDisabledDropdownName }}" direction="top-right">
            <h-dropdown-toggler name="{{ basketDisabledDropdownName }}">
                <div class="labeled-icon">
                    {{ icon('icon-basket-off', {
                        classNames: ['labeled-icon__icon']
                    }) }}

                    <div class="labeled-icon__signature font_bold">{{ translate('Cart') }}</div>
                </div>
            </h-dropdown-toggler>

            <h-dropdown-content name="{{ basketDisabledDropdownName }}">
                <aside class="basket-preview__disabled">
                    <p class="basket-preview__disabled-header">
                        {{ icon('icon-basket-off', {
                            classNames: ['icon_xl', 'basket-preview__disabled-icon']
                        }) }}
                        <b tabindex="0" aria-describedby="basket-disabled-description">
                            {{ translate('Cart disabled') }}
                        </b>
                    </p>

                    <p class="font_size-s align_center" id="basket-disabled-description">
                        {{ translate('We are not accepting orders now.') }}
                    </p>
                </aside>
            </h-dropdown-content>
        </h-dropdown>
    {% endif %}
{% endmacro %}

Macros reference

Webcomponents reference

Object Api methods reference