Добавление иконки корзины на сайт

Если вы используете Эквид-магазин на своем собственном сайте, вы можете добавить виджет корзины. Иконка корзины показывает количество товаров, которые добавлены в корзину. Нажав на нее, покупатели могут перейти к оформлению заказа с любой страницы магазина.

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

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

Добавление стандартного виджета корзины

Если вы добавили Эквид-магазин на собственный сайт, созданный с нуля, вы можете добавить виджет корзины на сайт с помощью кода. Для этого вам нужно скопировать готовый код из панели управления Эквида и вставить его на сайт.

Чтобы добавить виджет корзины:

  1. В Панели управления Эквида перейдите в Сайт.
  2. Прокрутите страницу до секции «Ваш магазин — на любом сайте» и нажмите Выбрать платформу.
  3. Нажмите на карточку Собственный сайт, созданный с нуля.
  4. В разделе Дополнительные виджеты в секции «Дополнительная иконка корзины» нажмите Добавить иконку корзины. Код корзины для вашего магазина будет скопирован в буфер обмена.
    _________________________.png
  5. Зайдите в панель управления вашего сайта и откройте страницу, где добавлен ваш Эквид-магазин.
  6. Вставьте скопированный код в исходный код вашего сайта. Конкретный способ добавления кода зависит от вашего сайта. Это может быть отдельная кнопка или вкладка для добавления кодов. Если вы не уверены, как добавлять коды на ваш сайт, обратитесь к службе поддержки или разработчику вашего сайта.
  7. Сохраните изменения.

После добавления и сохранения кода виджет корзины должен появиться на вашем сайте.

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

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

При включённой анимации иконка будет «подпрыгивать» при добавлении товара в корзину: 

________________.gif

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

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

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

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