basket_preview¶
The basket_preview macro renders a basket preview in your storefront. Internally, it uses the basket-preview and h-dropdown webcomponents.
Definition¶
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 options.sheet %}
{% if basketSettings.isBuyingEnabled %}
<basket-preview
{% if options.icon == 'value' %}is-with-value{% endif %}
sheet
basket-url="{{ shopUrls.basketUrl }}"
basket-delivery-payment-url="{{ shopUrls.basketDeliveryAndPaymentUrl }}"
module-instance-id="{{ options.instanceId }}"
>
<h-sheet-opener name="basket-preview-sheet">
<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-sheeet-opener>
<h-sheet id="basket-preview-sheet" hidden>
<h-sheet-header>
<h2 class="section-title section-title_s">{{ translate('Products in the cart') }}</h2>
<h-sheet-close class="btn btn_icon sheet__btn-right" aria-label="{{ translate('Close window') }}">
<h-icon icon-name="icon-x"></h-icon>
</h-sheet-close>
</h-sheet-header>
<h-sheet-body>
<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-sheet-body>
</h-sheet>
</basket-preview>
{% else %}
{% set basketDisabledDropdownName = 'basket-preview-sheet-disabled-' ~ options.instanceId %}
<h-sheet-opener 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-sheet-opener>
<h-sheet id="{{ basketDisabledDropdownName }}" hidden>
<h-sheet-header>
<h-sheet-close class="btn btn_icon sheet__btn-right" aria-label="{{ translate('Close window') }}">
<h-icon icon-name="icon-x"></h-icon>
</h-sheet-close>
</h-sheet-header>
<h-sheet-body 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-sheet-body>
</h-sheet>
{% endif %}
{% else %}
{% if basketSettings.isBuyingEnabled %}
<basket-preview
{% if options.icon == 'value' %}is-with-value{% endif %}
basket-url="{{ shopUrls.basketUrl }}"
basket-delivery-payment-url="{{ shopUrls.basketDeliveryAndPaymentUrl }}"
module-instance-id="{{ options.instanceId }}"
>
<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 %}
{% endif %}
{% endmacro %}