Изменение иконки корзины
Вы можете изменить внешний вид иконки корзины, ее положение на странице, установить перенаправление покупателей на нужный раздел сайта или добавить эффект анимации с помощью специальных параметров. Их нужно добавить в код интеграции корзины.
Вы можете комбинировать разные параметры в одном коде корзины, чтобы она больше подходила к дизайну сайта и вашим задачам.
В этой статье:
Вид корзины
Вы можете изменить оформление корзины с помощью добавления параметра 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 вашего магазина.