Scroll

Виджеты - Расширенный интернет-магазин

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

  • Advanced Products Details (расширенные детали продукта)
  • Advanced Shopping Cart (расширенная корзина покупок)
  • Category Menu (меню категорий)

1.png

Обратите внимание! Для соединения виджетов между собою (это требуется для использования одного содержимого и настроек в нескольких виджетах) необходимо установить одинаковое значение поля e-Commerce Connection ID, которое может вмещать буквы или цифры.
2.png

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

Виджет меню категорий предоставляет такие опции:
Orientation (ориентация виджета) - горизонтальная/вертикальная.

Category Button Style (стиль кнопки категории):

  • Text Padding (отступ текста)
  • Horizontal Spacing (горизонтальный пробел)
  • Button Top Color (цвет верхушки кнопки)
  • Button Bottom Color (цвет низа кнопки)
  • Button Alpha (прозрачность кнопки)
  • Button Corner Radius (радиус угла кнопки) - радиус закругления углов кнопки
  • Button Stroke Thickness (толщина границы кнопки)
  • Button Stroke Color (цвет границы кнопки)
  • Button Stroke Color (цвет границы кнопки)
  • Button Over Top Color (цвет верхушки кнопки при наведении мыши)
  • Button Over Bottom Color (цвет низа кнопки при наведении мыши)
  • Button Text Over Color (цвет текста кнопки при наведении мыши)

Subcategory Button Style (стиль кнопки подкатегории):

  • Width (ширина)
  • Height (высота)
  • Text Padding (отступ текста)
  • Button Top Color (цвет верхушки кнопки)
  • Button Bottom Color (цвет низа кнопки)
  • Button Background Alpha (прозрачность кнопки)
  • Button Corner Radius (радиус угла кнопки) - радиус закругления углов кнопки подкатегории
  • Button Stroke Thickness (толщина границы кнопки)
  • Button Stroke Color (цвет границы кнопки)
  • Vertical Spacing (вертикальный пробел)
  • Horizontal Spacing (горизонтальный пробел)
  • Button Over Top Color (цвет верхушки кнопки при наведении мыши)
  • Button Over Bottom Color (цвет низа кнопки при наведении мыши)
  • Button Text Over Color (цвет текста кнопки при наведении мыши)

По нажатию "Редактировать виджет" предоставляется возможность редактировать содержимое каталогов виджета меню категорий - создать новую(-ые) категорию(-и), переменовать существующую(-ие) и переместиться в выбранную подкатегорию для редактирования элементов.4.png

"Категория 1" имеет два созданных продукта-элемента, каждому из которых доступны такие опции:

Каждый элемент содержимого имеет такие настройки:

  • Product Code (код продукта)
  • Regular Price (обычная цена)
  • Sale Price (цена со скидкой)
  • Brand name (брэнд)
  • Model (модель)
  • Product Thumbnail (иконка)
  • Short description (короткое описание)
  • Full Description (полное описание)

Виджет Category Menu (меню категорий) имеет также две новые опции для каждого элемента - Size (размер) и Color (цвет).5.png

Размер должен быть заполнен согласно форме:

Размер1|1; Размер2|1.5; Размер3|2

Цвет должен быть заполнен согласно форме:

Цвет1|1; Цвет2|0.7; Цвет3|1.2

где Размер1, Размер2Размер3 - доступные размеры; Цвет1, Цвет2, Цвет3 - доступные цвета;  числа после разделителя
"|" - коэффициент цены. Цена умножается на коэффициент, указанный для каждого показателя (Размер1, Размер2, Размер3, Цвет1, Цвет2, Цвет3). Если цена не зависит от размера (или цвета), значение коэффициента должно быть равно единице для всех размеров (цветов).

Двойное нажатие по элементу (к примеру, черные наручные часы на скриншоте выше - Модель "А") открывает изображения продукта (элемента), которые будут отображаться в Product Details lightbox (лайтбокс деталей продукта). Здесь пользователь может также добавить видео, которое будет воспроизведено как увеличенный просмотр элемента в виджете Product Details (детали продукта) - для этого следует пройти по Добавить → Large Preview → Выбрать видео из Медиатеки или сервиса YouTube.6.png

Products List7.png

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

Products List (список продуктов) имеет широкий выбор редактируемых параметров и свойств. Среди них: Navigation Style (стиль кнопок навигации), Sort Style (стиль кнопок сортировки), Product Style (стиль отображения элементов), Product Image Style (стиль отображения изображения элемента), Buy Button Style (стиль кнопки покупки).

Navigation Style (стиль кнопок навигации):

  • Navigation Text Style (стиль отображения текста навигации)
  • Show Navigation Header (отображать "шапку" навигации) (параметры сортировки)
  • Show Navigation Footer (отображать низ навигации) (параметры сортировки)
  • Text Over Color (цвет текста при наведении мыши)
  • Product Count Label (текст, который выводится после показателя кол-ва элеменов на текущей странице Products List виджета)
  • Next Label, Previous Label (текст следующей или предыдущей страницы/элемента)
  • No Products Message (сообщение об отсутствии продуктов в данной категории)

Sort Style (стиль кнопок сортировки):

  • Text Style (стиль отображения текста)
  • Sort Background Color (цвет фона поля сортировки)
  • Sort Button Color (цвет кнопки сортировки)
  • Sort Stroke Color (цвет границы поля сортировки)
  • Sort By Label (обозначение метода сортировки)
  • Default Sort Method (метод сортировки по умолчанию)
  • Enable Inverse Sort (включить обратную сортировку)
  • New Arrivals Label (обозначение новых поступлений)
  • Price Label (обозначение цены)
  • Model Label (обозначение модели)

Product Style (стиль отображения элементов):

  • Show Title (отображеть название)
  • Title at The Top (название вверху)
  • Show Description (отображать описание)
  • Show Price (отображать цену)

Обратите внимание! Виджет Advanced Product Details (расширенные детали продукта) отображает новые свойства - Size (размер) и Color (цвет). Рекомендуется отключить Buy Button (кнопка покупки) в виджете Products List (список продуктов) для предотвращения покупки пользователем продукта (элемента) путём нажатия кнопки покупки (Buy Button, Add Button) без просмотра возможных вариантов размера и цвета для конкретного продукта (элемента), которые отображаются виджетом Advanced Product Details (расширенные детали продукта). Это можно сделать в настройках виджета Products List > Product Style > Add Button Mode > hide
8.png

  • Title Style (стиль заголовка)
  • Description Style (стиль описания)
  • Sale Price Style (стиль цены со скидкой)
  • Regular Price Style (стиль обычной цены)
  • Price Placement (положение цены) - Center/Left/Right (по центру/слева/справа).

Product Image Style (стиль отображения изображения элемента):

  • Scaling Mode (режим масштабирования) - Fill (растянуть), Fit (вписать), Resize (изменить размер), Crop (обрезать), Pattern (замостить).

Buy Button Style (стиль кнопки покупки):

  • Button Label (обозначение кнопки покупки)
  • Button Width/Height (ширина/высота кнопки)
  • Show Icon (отображать иконку)
  • Background Style (стиль фона) - Image/Color (изображение/цвет)
  • Background Alpha (прозрачность фона), %

Advanced Product Details
Advanced Product Details (расширенные детали продукта) также должен быть соединен с Category Menu (меню категорий) соответствующим “e-Commerce Connection ID” для корректного отображения элеменов.
9.png

Этот виджет также имеет большое количество опций и настроек для наиболее полного соответствия дизайну Вашего шаблона. Его можно просмотреть нажатием кнопки "Предпросмотр", а также "+" Click to enlarge.
10.png

 Basic Settings (основные настройки):

  • Image X Offset (смещение перед изображениями по горизонтали), Image Y Offset (смещение перед изображениями по вертикали)
  • Content Horizontal Padding (отступ содержимого по горизонтали)
  • Title Text Style (стиль названия)
  • Short Description Style  (стиль короткого описания)
  • Regular Price  Style (стиль обычной цены)
  • Sale Price Style (стиль цены со скидкой)
  • Image width/height (ширина/высота изображения)
  • Image Background/Border Color (цвет фона/границ изображения)

Close Button Style (стиль кнопки закрытия):

  • Label (обозначение)
  • X Offset (смещение по горизонтали), Y Offset (смещение по вертикали)
  • width/height (ширина/высота)
  • Show icon (отображать иконку/эскиз)
  • Icon (эскиз)
  • Icon Placement (расположение иконки) - Right (справа), Left (слева)
  • Icon Padding (отступ иконки)
  • Background Color (цвет фона под иконкой)
  • Background Over Color (цвет фона иконки при наведении указателя мыши)

Description Style (стиль описания):

  • Track Width/Padding (ширина/отступ дорожки)
  • Track Button Color (цвет активного элемента полосы)
  • Track Guide Color (цвет фона полосы)
  • Description Width/Height/Vertical Padding (ширина/высота/интервал описания)

Buy Button Style (стиль кнопки покупки):

  • Label (обозначение)
  • width/height (ширина/высота)
  • Show icon (отображать иконку/эскиз)
  • Icon (эскиз)
  • Icon Placement (расположение иконки) - Right (справа), Left (слева)
  • Icon Padding (отступ иконки)
  • Background Style (стиль фона) - Image/Color (изображение/заполнение цветом)
  • Background Alpha (прозрачность фона), %
  • Corner Radius (радиус угла) - радиус закругления углов
  • Stroke Thickness (толщина границы)
  • Stroke Color (цвет границы)
  • Stroke Top Color (цвет границы)
  • Stroke Bottom Color (цвет границы)
  • Drop Shadow (отбрасывать тень)

Thumbnails Style (стиль иконок):

  • Images Number (кол-во изображений)
  • Icon Color (цвет иконок)
  • Button Color (цвет кнопки)
  • Stroke Thickness (толщина границы)
  • Stroke Color (цвет границы)

Lightbox Settings (настройки лайтбокса):

  • Enabled Slideshow (включить слайдшоу)
  • Slideshow Delay (задержка изменения изображений в слайдшоу)
  • Enable Key Navigation (включить навигацию клавишами клавиатуры)
  • Enable Mouse Wheel (включить навигацию колёсиком мыши)
  • Background Color (цвет фона)
  • Background Alpha (прозрачность фона), %
  • Button Color (цвет кнопки)
  • Button Alpha (прозрачность кнопки), %
  • Slideshow Button Color (цвет кнопки слайдшоу)
  • Slideshow Button Alpha(прозрачность кнопки слайдшоу), %
  • Auto Load & Play Video (автозагрузка и воспроизведение видео)
  • Video Sound Volume (громкость звука видео)
  • Show Media Controls (отображать кнопки управления)

Lightbox Thumbnails Style (стиль иконок в лайтбоксе):

  • Images Number (кол-во изображений)
  • Button Icon/Back Color (цвет эскиза/фона кнопки)
  • Stroke Thickness (толщина границы)
  • Stroke Color (цвет границы)

LightBox Close Button (стиль кнопки закрытия лайтбокса) - аналогично Close Button Style (стиль кнопки закрытия) виджета Advanced Product Details (расширенные детали продукта).

Lightbox Media Player Skin (тема оформления медиапроигрывателя в лайтбоксе):

  • Background Color (цвет фона)
  • Background Alpha (прозрачность фона), %
  • Elements Color (цвет элементов)
  • Elements Alpha (прозрачность элементов), %
  • Active Color (цвет активного элемента)
  • Font Style (стиль шрифта).

Shopping Cart
Shopping Cart (корзина) отображает количество продуктов (элементов), добавленных в корзину. Нажатие на этот виджет направляет пользователя к “Advanced Shopping Cart List” (расширенная корзина покупок). Раздел, который содержит “Advanced Shopping Cart List” (расширенная корзина покупок), должен быть указан в свойствах виджета Shopping Cart (корзина) > Shopping Cart List Location.
11.png

Есть возможность задать такие свойства отображения:

Display Items Count (способ подсчёта отображаемых элементов) - by number of items,  by number of products (по количеству продуктов или элементов/наименований).

Hide if Empty - скрывать виджет если корзина пуста

Not Empty Cart Text - текст, отображаемый когда корзина не пуста

Empty Cart Text - текст, отображаемый когда корзина пуста

Not Empty Cart Icon - иконка, отображаемая когда корзина не пуста

Empty Cart Icon - иконка, отображаемая когда корзина пуста
Advanced Shopping Cart List
Advanced Shopping Cart (расширенная корзина покупок) отображает список продуктов (элементов), добавленных в корзину, в виде таблицы. Также, этот виджет позволяет установить разнообразные настройки, перечисленные ниже.

Basic Settings (основные настройки):

  • Table Title Style (стиль названия таблицы)
  • Item Text Style (стиль отображения элемента)
  • After Checkout Redirect (перейти после нажатия кнопки покупки)
  • Total Price Label (надпись общей стоимости покупки)
  • Product Name Column Label (имя колонки, отображающей названия элементов)
  • Unit Price Column Label (название колонки, отображающей цену элемента)
  • Quantity Column Label (название колонки, отображающей количество элементов)
  • Subtotal Column Label (название колонки, отображающей стоимость всех добавленных элеменов данного типа, оно же: стоимость одного элемена, указанная в поле виджета Category Menu (меню категорий) - Sale Price, умноженная на количество элементов)
  • Footer X Offset (отступ между правой границей таблицы и кнопкой покупки с общей стоимостью покупки)
  • Footer Y Offset (отступ между нижней гранью таблицы и опцией Shipping Type (тип доставки) с общей стоимостью покупки, кнопкой покупки)
  • Table Border Color (цвет границ полей/сетки таблицы)
  • Remove item icon (иконка кнопки удаления элемента из таблицы)

Payment Settings (настройки платежной системы):

  • Payment system (выбор платежной системы) - PayPal, Google Checkout, Robox, Using email (используя электронную почту). Появившиеся после выбора платежной системы поля обязательны для заполнения для корректной работы системы оплаты товара!
  • PayPal email (эл.почта владельца)
  • PayPal Currency id (код валюты в системе PayPal). Коды можно просмотреть по ссылке PayPal Currency Codes. Для задания рубля в качестве валюты следует ввести RUB, для доллара США - USD
  • Google Merchant (индивидуальный код платежной системы Google)
  • Robox Merchant (индивидуальный код платежной системы Roboxchange)
  • Robox Merchant Pass 1 (пароль платежной системы Robox)
  • Robox Currency id (код валюты в системе Robox)
  • Currency (валюта)
  • Form Template Name (название формы шаблона)
  • Contact From Location (местонахождение контактной формы)

Scrollbar Style (стиль полосы прокрутки):

  • Width (ширина, пиксели)
  • Padding (отступ)
  • Track Button Color (цвет полосы прокрутки)
  • Track Guide Color (цвет направляющей полосы прокрутки)

Checkout Button Style (стиль кнопки покупки):

  • Get Shipping Details From Contact Form (получать адрес доставки из контактной формы). Для этого необходимо в контактной форме на той же странице, что и Advanced Shopping Cart (расширенная корзина покупок), иметь контактную форму с полем для ввода адреса покупателя. Подробнее - в главе Shipping Details (Address).
  • Show Shipping Types (отображать способы доставки)
  • Shipping Label (название поля выбора способа доставки)
  • Shipping Types and Cost (стоимость доставки для каждого выбранного способа). Должено быть заполнено согласно форме:

Тип 1 - $10|10; Тип 2 - $15|15; Тип 3 - $20|20,

где Тип  Тип 1 - $10, Тип 2 - $15Тип 3 - $20 - название способа доставки; число после вертикального разделителя "|" - стоимость доставки конкретным способом.
Shipping Details (Address)
Так как Advanced Shopping Cart List (расширенная корзина покупок) имеет поле Get Shipping Details From Contact Form (получать адрес доставки из контактной формы) (скриншот ниже), обязательно следует использовать eCommerce Contact Form (виджет контактной формы интернет-магазина) на той самой странице, что и Advanced Shopping Cart List (расширенная корзина покупок). Эта контактная форма во всём подобна виджету Advanced Contact Form (расширенная контактная форма), установленному по умолчанию во все шаблоны MotoCMS, за исключением отсутствия функции прикрепления файла.13.png

Вы можете добавить или удалить поля для получения необходимой информации о покупателе. eCommerce Contact Form (виджет контактной формы интернет-магазина) разработан для использования с виджетами расширенного интернет-магазина, в частности, Advanced Shopping Cart List (расширенная корзина покупок) т.к. последний не отправляет письма на Ваш почтовый ящик, а только добавляет заполненные поля в информацию о заказе в письмо, отправляемое на Ваш ящик эл.почты как только покупатель нажимает кнопку покупки (Checkout).

Ниже показан пример страницы корзины во время заполнения пользователем полей контактной формы.14.png

Как только все поля контактной формы заполнены и кнопка Применить/Отправить нажата покупателем, он может продолжить покупку - то есть, нажать кнопку Купить - она становится доступной (сравните эту кнопку на скриншоте ниже). Слева - до заполнения, справа - после заполнения и нажатия "Применить".25.PNG

Как только клиент нажимает "Купить", система отправляет пользователя на страницу оплаты при помощи платежной системы (если установлена соответствующая платежная система). Ниже приведен пример упомянутой страницы платежной системы PayPal.16.png

 А Вы получаете письмо на Вашу эл.почту вида:17.png

В таблице предоставляется сначала перечень товаров, затем информация касательно доставки - выбранный тип доставки, адрес, контактный email, стоимость доставки. Адрес и прочая контактная информация берется с контактной формы e-Commerce Contact Form виджета.
Banner Rotator
Этот виджет позволяет Вам рекламировать Ваш продукт на домашней странице сайта. Необходимо пройти в Виджеты > Магазин > Banner Rotator, добавить его на Вашу страницу, затем дважды щёлкнуть по рабочей области виджета и добавить новый элемент. Необходимо добавить изображение предпросмотра среднего размера (medium size preview). Баннер может быть добавлен на любую страницу или всплывающее окно, а также на внешний ресурс.
19.png

Баннер имеет функцию слайдшоу. Для изменения задержки изменения изображений в секундах необходимо изменить число поля Slideshow Delay в Панели Свойств виджета.

Можно также настроить такие свойства: фон, текст, стиль изображения, переключение изображений в Панели Свойств. Ниже приведено описание некоторых свойств.

Background style (стиль фона):

  • Background Color (цвет фона виджета) - выбирается с помощью пипетки (щупа) или введением # цвета
  • Background Alpha (прозрачность фона), %
  • Corner Radius (радиус угла) - радиус закругления углов виджета баннера
  • Stroke Thickness (толщина границы)
  • Stroke Color (цвет границы)

Text style  (стиль текста):

  • Content Align (выравнивание содержимого) - Right (справа), Left (слева)
  • Content Horizontal Padding (отступ содержимого по горизонтали)
  • Content Vertical Padding (отступ содержимого по вертикали)
  • Show Description (отображать описание (Description))
  • Description Word Wrap (переносить на следующую строку описание)

Image style (стиль изображения):

  • Image Align (выравнивание изображения) - Right (справа), Left (слева), Center (по центру)
  • Image Scaling Mode (режим масштабирования) - Fill (растянуть), Fit (вписать), Resize (изменить размер), Crop (обрезать)

Pagination style (стиль переключения элементов):

  • Spots Horizontal Padding (отступ по горизонтали)
  • Spots Vertical Padding (отступ по вертикали)
  • Spot Color (цвет переключателя)
  • Spot Alpha (прозрачность переключателя)
  • Selected Spot Color (цвет переключателя в положении "выбран")

По нажатию кнопки "Редактировать виджет" открывается окно содержимого виджета:18.png

Каждый элемент содержимого имеет такие настройки:

  • Image (изображение)
  • Title (название)
  • Description (описание)
  • Regular Price (обычная цена)
  • Sale Price (цена со скидкой)
  • Link (действие по нажатию/ссылка)

Add to Cart Button
Виджет может быть добавлен на любую страницу интернет-магазина и позволяет настроить его для работы с конкретным продуктом. Он имеет такие свойства:

Product Settings:

  • Product Code (код продукта)
  • Price (цена)
  • Brand (брэнд)
  • Model (модель)
  • Thumbnail (иконка)
  • Short description (короткое описание)

Button Style:

  • Button Label (надпись на кнопке)
  • Show Icon (отображать ли иконку)
  • Background Style (изображение фона)
  • Button Top Color (цвет верхушки кнопки)
  • Button Bottom Color (цвет низа кнопки)
  • Button Alpha (прозрачность кнопки)
  • Button Corner Radius (радиус угла кнопки) - радиус закругления углов виджета Add to Cart Button
  • Button Stroke Thickness (толщина границы кнопки)
  • Button Stroke Color (цвет границы кнопки)
  • Over Top Color (цвет верхушки кнопки при наведении мыши)
  • Over Bottom Color (цвет низа кнопки при наведении мыши)
  • Drop Shadow (отбрасывать тень)
  • Enable Add to Cart Effect (включение анимации добавления в корзину)

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

Виджет "Product Details" должен быть заменен на "Advanced Product Details", а "Shopping Cart List" - на "Advanced Shopping Cart List". Виджеты обычного интернет-магазина не работают с виджетами расширенного интернет-магазина.

Обращаем Ваше внимание, что виджеты интернет-магазина и расширенного интернет-магазина работают только с Flash MotoCMS шаблонами!

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

Комментарии