Дизайн иконки корзины

Дата последнего изменения:

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

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

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

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

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

Вы можете менять положение корзины с помощью добавления параметра 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_COUNTER shopping-bag-big-icon-details-subtotal.png

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

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


<data-show-empty-cart=“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 вашего магазина.

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

Вы можете изменить стандартную иконку корзины с помощью значения в коде интеграции 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-store-redirect-url в коде интеграции виджета корзины, как в примере ниже:


<div data-store-redirect-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>

В нем:
VALUE это URL страницы, на которую перенаправляем при клике на корзину;
STORE_ID — ID вашего магазина.

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

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

К началу
Статья ответила на ваш вопрос?

Замечательно! Спасибо за ответ!

Пожалуйста, пришлите нам этот вопрос. Мы будем рады ответить по почте.

Отправить вопрос