Видео обзор виджета "Простая корзина"
Инструкция по использованию виджета "Простая корзина"
Демонстрационная страница работы виджета
"Простая корзина".
Страница виджета
в магазине.
После установки виджет появится в библиотеке Adobe Muse:
Для начала надо установить "модуль настроек" виджета, с левой стороны от рабочей области страницы:
Подключаем файлы таблицы стилей и файл самого скрипта виджета:
Эти два файла находятся в архиве виджета.
Я ничего не сказал про активацию виджета, не случайно, так как принцип работы активации, и как ею пользоваться, все это есть
тут.
У нас еще осталось три незадействованных модуля. Это "малая корзина(МК)", "корзина" и "карточка товара(КТ)". Корзину размещаем справа от рабочей области страницы:
И только справа, нигде больше. Кроме этого ее необходимо закрепить:
Форма корзины модифицирована, добавлены выпадающие списки, о них позже еще поговорим.
У нас остался модуль МК и КТ. КТ размещаем на самой странице в нужном месте. Поговорим о ней подробнее. КТ состоит из четырех важных элементов, без которых виджет не будет работать:
1. основной фрейм КТ
2. кнопка отправки товара в корзину
3. текстовый фрейм названия товара
4. текстовый фрейм цены товара
Это основные элементы КТ которые должны быть у
каждой КТ. К каждому из этих элементов изначально присвоены стили графики.
Для основного фрейма стиль графики
item_name, для кнопки
add_to_cart, для названия товара
itemn_name, для цены
itemn_price.
После того как вы настроили внешний вид первой КТ, вам достаточно будет размножить эту КТ столько раз, сколько у вас товаров на странице. Размножить, значит скопировать. И уже в скопированных КТ меняете название товара и его цену. Все очень просто. Всего два действия: скопировать и переписать название и цену.
Поговорим о модуле "корзина".
Что такое черное поле и за что оно отвечает? Это стандартное текстовое поле формы "многострочный текст":
В это поле попадают товары добавленные в корзину. Поле не видно посетителю. После отправки формы, владелец магазина увидит то, что выбрал покупатель:
Важный момент. Данное черное поле должно быть первым текстовым полем формы. То есть, если вы решили зачем то взять стандартную форму, то она выглядит так:
Поле "сообщение" и есть черное поле. Это поле вам нужно разместить в низу формы, под кнопкой "отправить". Можно его сделать поменьше, его все равно никто не увидит, в него будут попадать выбранные товары. Сделайте так:
А уже на место поля для сообщения добавьте новое поле "многострочный текст":
В результате форма будет выглядеть так:
Выпадающие списки. Максимум к форме в корзине можно применить пять выпадающих списков. По умолчанию в виджете у формы уже есть два выпадающих списка. Что бы добавить третий выпадающий список, нужно добавить еще одно поле "однострочный текст". Да, именно, списки работают с однострочным текстом. И так, добавили еще одно поле "однострочный текст". Далее важный момент, нужно снять галочку с "редактировать вместе":
Затем выделяем добавленное поле и присваиваем ему стиль графики
sp3, так как это третье поле. После этого открываем "модуль настроек" виджета и находим соответствующее поле для составления пунктов в этом выпадающем списке:
Обратите внимание, что пункты выпадающего списка в виджете разделяются знаком решетки.
Остался последний модуль МК. Его размещаем в нужном месте на странице сайта. На моем демо сайте это выглядит так:
Настраивается МК стандартными средствами программы, это обычная кнопка, со своим определенным стилем графики -
open_cart.
"Модуль настроек". Не вижу особого смысла рассказывать о всех настройках в данном модуле кроме двух последних:
Если нужно что бы все получилось "красиво", следуйте простой инструкции. "Цвет текста активной кнопки товара" должен быть точно таким же как и цвет текста кнопки в состоянии "курсор над кнопкой":
То же самое касается и второй настройки с фоном кнопки. Вот и все.
Будут вопросы по настройке, функционалу виджета, задавайте в этой теме. Буду рад помочь!
Внимание! Отзывы по виджету следует оставлять на
странице товара во вкладке "отзывы".
История обновлений
Устранен баг с формами, когда на странице с корзиной было 2 и более форм.
С этим обновлением появился ряд новых возможностей для виджета.
Появилась возможность:
- кликая по кнопке добавления товара в КТ, добавлять товар повторно. Функцию можно отключить в настройках виджета;
- автоматического удаление товаров из корзины после отправки заказа;
- закрывать корзину при клике за ее пределами. Функцию можно отключить в настройках виджета;
- компактно размещать в корзине товары с длинными названиями;
- показывать лайтбокс при добавлении товара в корзину. Так же был добавлен и второй лайтбокс, в том случае, если данный товар уже был добавлен. Функцию можно отключить в настройках виджета;
- добавлять к форме группы переключателей, которые отвечают за способ доставки товаров. Эти переключатели можно либо использовать, либо нет;
- показывать покупателям сколько денег осталось до срабатывания скидки. Функцию можно отключить в настройках виджета;
- добавлять цели метрики для всех товаров и/или для какого то конкретного товара. А так же цель можно настроить и на форму - на кнопку "Отправить".
Некоторые моменты в данном списке стоит рассмотреть подробно. Начнем с добавления лайтбоксов, которые подтверждают добавление товаров в корзину.
После обновления, в библиотеке виджета появятся два новых модуля. Это
Лайтбокс и
Лайтбокс 2. Один отвечает за новый добавленный товар в корзину, а второй за добовленный ранее товар. Просто разместите эти модули на странице и попробуйте добавлять товары в корзину. Важный момент заключается в том, что оба лайтбокса должны размещаться в белой области вашей страницы, не за пределами, как например модуль настроек виджета. Это важно!
Так же после обновления, в библиотеке появятся еще три новых модуля для настройки целей метрики. На самом деле это один модуль скопирован два раза. Просто я хотел наглядно показать как им пользоваться. Вы можете разместить на странице сколько угодно этих модулей для настройки целей. Хоть для каждого товара отдельную цель. Тут главное правильно настроить модуль. В модуле есть три поля ввода. О полях "Номер счетчика метрики" и "Идентификатор цели" говорить ничего не буду, если вы занимаетесь целями метрики, то и без меня должны знать что это такое. В принципе, в модуле есть подробное описание что и как делать, но если вам все же не понятно как найти ID кнопки какого то конкретного товара, то пишите тут же в теме, попробую объяснить, хотя на эту тему уже много было сказано и написано.
