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

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

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

Для пользователей Wix and Wordpress: следуйте инструкции про то, как настроить дизайн виджета корзины на Wix и на Wordpress.

Вид корзины

Вы можете изменить оформление корзины с помощью добавления параметра 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 shopping-bag-small-icon.png
SMALL_ICON_COUNTER shopping-bag-small-icon-counter.png
COUNTER_ONLY shopping-bag-counter-only.png
TITLE_COUNTER shopping-bag-title-counter.png
MEDIUM_ICON_COUNTER shopping-bag-medium-icon-counter.png
MEDIUM_ICON_TITLE_COUNTER shopping-bag-medium-icon-title-counter.png
BIG_ICON_TITLE_SUBTOTAL shopping-bag-big-icon-title-subtotal.png
BIG_ICON_DETAILS_SUBTOTAL shopping-bag-big-icon-details-subtotal.png

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

Вы можете скрывать или показывать пустую иконку корзины. Это настраивается с помощью параметра 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 shopping-bag-bag.png
CART shopping-bag-cart.png
BASKET shopping-bag-basket.png

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

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

Была ли эта статья полезной?

Приятно! Спасибо за ваш отзыв.

Спасибо за ваш отзыв.

Простите за это! Что было не так?
Пользователи, считающие этот материал полезным: 105 из 175
Мы используем cookie-файлы и сервисы аналитики, чтобы помнить о ваших предпочтениях, оценивать эффективность наших рекламных кампаний и улучшать работу сайта. Выбирая «Принимаю», вы даёте согласие на использование файлов cookie.
Принимаю Не принимаю