Изменение иконки корзины

Вы можете изменить внешний вид иконки корзины, ее положение на странице, установить перенаправление покупателей на нужный раздел сайта или добавить эффект анимации с помощью специальных параметров. Их нужно добавить в код интеграции корзины.

Если вы не добавили иконку корзины на сайт, вы можете сделать это по инструкции Виджет корзины

Вы можете комбинировать разные параметры в одном коде корзины, чтобы она больше подходила к дизайну сайта и вашим задачам.

Положение и вид корзины

Вы можете менять положение корзины с помощью добавления параметра data-layout в код виджета корзины. Пример:


<div data-layout="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

В нем:
VALUE — один из поддерживаемых вариантов параметра распложения коризны;
STORE_ID — ID вашего магазина.

Ниже перечислены все поддерживаемые варианты положения корзины. Вы можете увидеть, как они выглядят, и использовать их.

Значение	Положение
SMALL_ICON
SMALL_ICON_COUNTER
COUNTER_ONLY
TITLE_COUNTER
MEDIUM_ICON_COUNTER
MEDIUM_ICON_TITLE_COUNTER
BIG_ICON_TITLE_SUBTOTAL
BIG_ICON_DETAILS_SUBTOTAL

Настройка пустой корзины

Вы можете скрывать или показывать пустую иконку корзины. Это настраивается с помощью параметра data-show-empty-cart для виджета корзины"ec-cart-widget". Например, вот тут:

<div data-show-empty-cart=“VALUE” data-fixed="true" data-fixed-position="TOP_RIGHT" 
class=“ec-cart-widget”></div>
<div><script data-cfasync=“false” type=“text/javascript”
src=“https://app.ecwid.com/script.js?STORE_ID&data_platform=code” 
charset=“utf-8"></script><script>Ecwid.init();</script></div>

В примере:
VALUE — должен быть TRUE или FALSE;
STORE_ID — ID вашего магазина.

Вы можете изменить стандартную иконку корзины с помощью значения в коде интеграции data-icon в виджете"ec-cart-widget". Пример:


<div data-icon="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

В нем:
VALUE — один из поддерживаемых иконок корзины
STORE_ID — ID вашего магазина.

Все поддерживаемые виды иконки корзины есть в таблице ниже.

Значение	Иконка
BAG
CART
BASKET

Изменение формы корзины

Вы можете изменить форму границ иконки корзины. Для этого необходимо добавить параметр data-fixed-shape в код интеграции виджета корзины:


<div data-fixed-shape="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

В коде:
VALUE может быть NONE (без рамки) / RECT (прямоугольная рамка) / PILL (закругленная рамка);
STORE_ID — ID вашего магазина.

Собственая иконка корзины

Если вы хотите разместить на сайте свою иконку корзины, это тоже можно сделать с помощью специального параметра в коде интеграции: data-custom-icon-url. В примере показано, как он выглядит


<div data-custom-icon-url="VALUE" 
class="ec-cart-widget"></div>
<div><script data-cfasync="false" 
type="text/javascript" 
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

where:
VALUE — либо URL-адрес иконки корзины, либо SVG разметка;
STORE_ID — ID вашего магазина.

Изменение расположения корзины

Изменить расположение корзины на экране можно с помощью нескольких параметров, которые можно добавить в код интеграции виджета. Пример:


<div data-fixed="VALUE" 
data-fixed-position="VALUE"
data-fixed-shape="VALUE" 
data-horizontal-indent="VALUE" 
data-vertical-indent="VALUE" class="ec-cart-widget"></div>
<div>
<script data-cfasync="false" type="text/javascript" 
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

Где:
VALUE — один из поддерживаемых вариантов параметра размещения коризны;
STORE_ID — ID вашего магазина.

Все параметры перечислены в таблице ниже:

Параметр	Значение	Описание
data-fixed	TRUE / FALSE	Фиксирует корзину в определенной части сайта.
data-fixed-position	TOP_LEFT / TOP_RIGHT / BOTTOM_LEFT / BOTTOM_RIGHT	Фиксирует корзину на экране (справа или слева). Корзина будет сохранять свою позицию во время скролла
data-horizontal-indent	Positive integer including zero	Определяет границу по горизонтали между виджетами магазина и краем экрана или iframe.
data-vertical-indent	Positive integer including zero	Определяет границу по вертикали между виджетами магазина и краем экрана или контейнером iframe.

Эффекты анимации у иконки корзины

Вы можете показывать или скрывать эффекты анимации при добавлении товара в корзину. Параметр для изменения в коде интеграции — data-show-buy-animation. Пример:


<div data-show-buy-animation="VALUE" 
class="ec-cart-widget"></div>
<div><script data-cfasync="false" 
type="text/javascript" 
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

В нем:
VALUE —должен быть TRUE или FALSE;
STORE_ID — ID вашего магазина.

Изменение иконки корзины

В этой статье:

Положение и вид корзины

Настройка пустой корзины