Scroll

Виджеты - Интернет магазин

 Наше решение для интернет-магазина включает в себя 7 виджетов:

1. Category Menu Widget (Список категорий)
2. Products List Widget (Список товаров)
3. Product Details Widget (Информация о товаре)
4. Shopping Cart Widget (Корзина)
5. Shopping Cart List Widget (Список товаров в корзине)
6. Banner Rotator (Баннер)
7. Add To Cart Button (Кнопка «Добавить в корзину»).
2014-10-12_15_29_23-Moto_CMS.png

Рассмотрим подробнее каждый виджет.

Category Menu (Список категории)

Category Menu - это виджет каталога, который будет связывать все элементы интернет-магазина. Как вы видите на скриншоте, в настройках можно изменить расположение списка категорий (горизонтальное или вертикальное), отредактировать стиль кнопок списка категорий (Category) и подкатегорий (Subcategory).

Чтобы перейти к редактированию содержимого Category Menu, дважды кликните на изображение виджета или нажмите кнопку «Редактировать виджет» внизу панели справа. Вы можете создать новые категории, переименовать существующие и перейти на любой выбранный уровень для редактирования контента.

Кнопка «Добавить» позволяет добавить товар или создать подкатегорию, кнопка «Добавить элементы» позволяет добавить сразу несколько товаров.
2014-10-12_15_45_44-Moto_CMS.png

В папке «Category 0» создаем два продукта для примера.
2014-10-12_15_46_51-Moto_CMS.png

Для каждого продукта загружаем изображения, которые будут выводиться на экран в «Product Details light-box». Здесь вы можете добавить видео, вместо большого изображения товара, которое будет отображаться в Product Details Widget (Информация о товаре).
(Добавить → Large Preview → выбрать видео из Медиатеки или загрузить с YouTube.com).

У каждого продукта есть набор свойств, которые Вы можете отредактировать:

  • Product Code (Код продукта)  - Внимание! Код должен быть индивидуальным для каждого товара.
  • Regular Price (Обычная стоимость)
  • Sale Price (Стоимость со скидкой)
  • Brand Name (Торговая марка)
  • Model (Модель)
  • Product Thumbnail (Миниатюрное изображение продукта)
  • Short Description (Краткое описание)
  • Full Description (Полное описание).

Products List (Список товаров)

Products List предназначен для показа продукции из Category Menu. Размещать его необходимо на той же странице, на которой расположен виджет Category Menu. Обязательно соедините их между собой при помощи «e-Commerce Connection ID» (на скриншоте ID указан «store», но вы можете использовать любые буквы или цифры, главное, чтобы ID был одинаковым для виджетов Category Menu, Product List и Product Details).

Product List Widget имеет разнообразные свойства и параметры, которые вы можете отредактировать:

  • Navigation Style (Стиль навигационных кнопок)
  • Sort Style (Стиль списка сортировки товаров)
  • Product Style (Стиль представления товара)
  • Product Image Style (Стиль изображения товара)
  • Buy Button Style (Стиль кнопки «Купить»).

Как вы могли заметить, стоимость товара отображается в долларах США ($), если вы хотите, чтобы отображалась другая валюта, необходимо изменить ее в настройках ("Настройки" –>"Настройки веб-сайта" –> "Currency label").
2014-10-12_15_50_45-Moto_CMS.png

Product Details (Информация о товаре)

Данный виджет предназначен для размещения в магазине подробной информации о товаре. При нажатии на изображение товара в списке, будет открываться всплывающее окно, в котором и будет расположено описание товара. Виджет Product Details также необходимо соединить с виджетом Category menu при помощи «e-Commerce Connection ID» для корректной работы.

Виджет имеет большое количество опций и настроек, которые позволят полностью настроить его внешний вид в соответствии с дизайном вашего шаблона. Все изменения стиля отображения информации вы сможете увидеть нажав кнопку предпросмотра, в виде плюса (см. скриншот ниже). Обратите внимание, что данная опция позволит оценить то, как будет представлена информация визуально, сама же информация о товаре не отображается.
2014-10-12_15_52_33-Jewelry_Store_-_Online_store.png

Shopping Cart (Корзина)

Этот виджет отображает количество товаров, отправленных в корзину и приводит пользователя к списку товаров в корзине (Shopping Cart List Widget). Страница, где размещен виджет Shopping Cart List должна быть обязательно указана в настройках виджета Shopping Cart.

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

Shopping Cart List (Список товаров в корзине)

Этот виджет отображает список товаров, которые добавлены в корзину. Для размещения виджета создаем новую страницу или всплывающее окно. Страница, где размещен виджет Shopping Cart List должна быть обязательно указана в настройках виджета Shopping Cart.

На скриншоте ниже указаны настройки платежной системы. Можно выбрать один из предложенных способов оплаты (PayPal, Google Checkout, Robox) или, выбрать вариант с получением заказа на почту.

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

Banner Rotator (Баннер)

Banner Rotator поможет привлечь внимание покупателей к определенным товарам, например, во время акций со скидками. Баннер с функцией смены изображений, позволит разместить информацию о нескольких товарах, что выгодно скажется на продажах магазина.

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

Чтобы заполнить баннер необходимой информацией нажимаем «Редактировать виджет».

В верхнем левом углу нажимаем кнопку «Добавить», в полях слева вносим необходимую информацию: загружаем изображение товара, прописываем название, описание, постоянную стоимость и стоимость со скидкой (если необходимо), также есть возможность поставить ссылку с баннера. Связать баннер можно с другой страницей, всплывающим окном вашего сайта или с любым внешним ресурсом.
2014-10-12_15_55_29-Moto_CMS.png

После того, как Вы внесли необходимую информацию, нажимаем «Добавить». Создаем необходимое количество элементов.

Add To Cart Button (Кнопка «Добавить в корзину»)

Вы можете разместить кнопку «Добавить в корзину» на любой странице интернет-магазина. Настройки виджета позволяют указать необходимую информацию о товаре и прикрепить изображение.

Также вы можете изменить внешний вид кнопки в соответствии с дизайном сайта.

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 1 из 1
Еще есть вопросы? Отправить запрос

Комментарии

На базе технологии Zendesk