Добавление иконки корзины на сайт
Если вы используете Эквид-магазин на своем собственном сайте, вы можете добавить виджет корзины. Иконка корзины показывает количество товаров, которые добавлены в корзину. Нажав на нее, покупатели могут перейти к оформлению заказа с любой страницы магазина.
Вы также можете изменить стандартный внешний вид иконки корзины, ее положение на странице, установить перенаправление покупателей на нужный раздел сайта или добавить эффект анимации с помощью специальных параметров. Их нужно добавить в код интеграции корзины. Вы можете комбинировать разные параметры в одном коде корзины, чтобы она больше подходила к дизайну сайта и вашим задачам.
Добавление стандартного виджета корзины
Если вы добавили Эквид-магазин на собственный сайт, созданный с нуля, вы можете добавить виджет корзины на сайт с помощью кода. Для этого вам нужно скопировать готовый код из панели управления Эквида и вставить его на сайт.
Чтобы добавить виджет корзины:
- В Панели управления Эквида перейдите в Сайт.
- Прокрутите страницу до секции «Ваш магазин — на любом сайте» и нажмите Выбрать платформу.
- Нажмите на карточку Собственный сайт, созданный с нуля.
- В разделе Дополнительные виджеты в секции «Дополнительная иконка корзины» нажмите Добавить иконку корзины. Код корзины для вашего магазина будет скопирован в буфер обмена.
- Зайдите в панель управления вашего сайта и откройте страницу, где добавлен ваш Эквид-магазин.
- Вставьте скопированный код в исходный код вашего сайта. Конкретный способ добавления кода зависит от вашего сайта. Это может быть отдельная кнопка или вкладка для добавления кодов. Если вы не уверены, как добавлять коды на ваш сайт, обратитесь к службе поддержки или разработчику вашего сайта.
- Сохраните изменения.
После добавления и сохранения кода виджет корзины должен появиться на вашем сайте.
Изменение оформления корзины
Вы можете изменить стандартное оформление корзины с помощью добавления параметра 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 вашего магазина.
При включённой анимации иконка будет «подпрыгивать» при добавлении товара в корзину: