0
Заголовок темы

Обзор и инструкция виджета "Простая корзина" для Adobe Muse

Видео обзор виджета "Простая корзина"


Инструкция по использованию виджета "Простая корзина"


Демонстрационная страница работы виджета "Простая корзина".
Страница виджета в магазине.

После установки виджет появится в библиотеке Adobe Muse:



Для начала надо установить "модуль настроек" виджета, с левой стороны от рабочей области страницы:

Инструкция к виджету Простая корзина: шаг 2

Подключаем файлы таблицы стилей и файл самого скрипта виджета:

Инструкция к виджету Простая корзина: шаг 3

Эти два файла находятся в архиве виджета.

Я ничего не сказал про активацию виджета, не случайно, так как принцип работы активации, и как ею пользоваться, все это есть тут.

У нас еще осталось три незадействованных модуля. Это "малая корзина(МК)", "корзина" и "карточка товара(КТ)". Корзину размещаем справа от рабочей области страницы: 

Инструкция к виджету Простая корзина: шаг 4

И только справа, нигде больше. Кроме этого ее необходимо закрепить:

Инструкция к виджету Простая корзина: шаг 51

Форма корзины модифицирована, добавлены выпадающие списки, о них позже еще поговорим.

У нас остался модуль МК и КТ. КТ размещаем на самой странице в нужном месте. Поговорим о ней подробнее. КТ состоит из четырех важных элементов, без которых виджет не будет работать:

1. основной фрейм КТ
2. кнопка отправки товара в корзину
3. текстовый фрейм названия товара
4. текстовый фрейм цены товара

Инструкция к виджету Простая корзина: шаг 6

Это основные элементы КТ которые должны быть у каждой КТ. К каждому из этих элементов изначально присвоены стили графики.
Для основного фрейма стиль графики item_name, для кнопки add_to_cart, для названия товара itemn_name, для цены itemn_price

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

Поговорим о модуле "корзина".
Что такое черное поле и за что оно отвечает? Это стандартное текстовое поле формы "многострочный текст":

Инструкция к виджету Простая корзина: шаг 8

В это поле попадают товары добавленные в корзину. Поле не видно посетителю. После отправки формы, владелец магазина увидит то, что выбрал покупатель:

Инструкция к виджету Простая корзина: шаг 9

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

Инструкция к виджету Простая корзина: шаг 10

Поле "сообщение" и есть черное поле. Это поле вам нужно разместить в низу формы, под кнопкой "отправить". Можно его сделать поменьше, его все равно никто не увидит, в него будут попадать выбранные товары. Сделайте так:



А уже на место поля для сообщения добавьте новое поле "многострочный текст":

Инструкция к виджету Простая корзина: шаг 11

В результате форма будет выглядеть так:

Инструкция к виджету Простая корзина: шаг 12

Выпадающие списки. Максимум к форме в корзине можно применить пять выпадающих списков. По умолчанию в виджете у формы уже есть два выпадающих списка. Что бы добавить третий выпадающий список, нужно добавить еще одно поле "однострочный текст". Да, именно, списки работают с однострочным текстом. И так, добавили еще одно поле "однострочный текст". Далее важный момент, нужно снять галочку с "редактировать вместе":

Инструкция к виджету Простая корзина: шаг 13

Затем выделяем добавленное поле и присваиваем ему стиль графики sp3, так как это третье поле. После этого открываем "модуль настроек" виджета и находим соответствующее поле для составления пунктов в этом выпадающем списке:

Инструкция к виджету Простая корзина: шаг 14

Обратите внимание, что пункты выпадающего списка в виджете разделяются знаком решетки.

Остался последний модуль МК. Его размещаем в нужном месте на странице сайта. На моем демо сайте это выглядит так:



Настраивается МК стандартными средствами программы, это обычная кнопка, со своим определенным стилем графики - open_cart.

"Модуль настроек". Не вижу особого смысла рассказывать о всех настройках в данном модуле кроме двух последних:

Инструкция к виджету Простая корзина: шаг 15

Если нужно что бы все получилось "красиво", следуйте простой инструкции. "Цвет текста активной кнопки товара" должен быть точно таким же как и цвет текста кнопки в состоянии "курсор над кнопкой":



То же самое касается и второй настройки с фоном кнопки. Вот и все.

Будут вопросы по настройке, функционалу виджета, задавайте в этой теме. Буду рад помочь!

Внимание! Отзывы по виджету следует оставлять на странице товара во вкладке "отзывы".
 

История обновлений

1.1 [04.04.2017]
 

Устранен баг с формами, когда на странице с корзиной было 2 и более форм.

1.2 [29.05.2017]
 

С этим обновлением появился ряд новых возможностей для виджета.

Появилась возможность:

  • кликая по кнопке добавления товара в КТ, добавлять товар повторно. Функцию можно отключить в настройках виджета;
  • автоматического удаление товаров из корзины после отправки заказа;
  • закрывать корзину при клике за ее пределами. Функцию можно отключить в настройках виджета;
  • компактно размещать в корзине товары с длинными названиями;
  • показывать лайтбокс при добавлении товара в корзину. Так же был добавлен и второй лайтбокс, в том случае, если данный товар уже был добавлен. Функцию можно отключить в настройках виджета;
  • добавлять к форме группы переключателей, которые отвечают за способ доставки товаров. Эти переключатели можно либо использовать, либо нет;
  • показывать покупателям сколько денег осталось до срабатывания скидки. Функцию можно отключить в настройках виджета;
  • добавлять цели метрики для всех товаров и/или для какого то конкретного товара. А так же цель можно настроить и на форму - на кнопку "Отправить".

Некоторые моменты в данном списке стоит рассмотреть подробно. Начнем с добавления лайтбоксов, которые подтверждают добавление товаров в корзину.
После обновления, в библиотеке виджета появятся два новых модуля. Это Лайтбокс и Лайтбокс 2. Один отвечает за новый добавленный товар в корзину, а второй за добовленный ранее товар. Просто разместите эти модули на странице и попробуйте добавлять товары в корзину. Важный момент заключается в том, что оба лайтбокса должны размещаться в белой области вашей страницы, не за пределами, как например модуль настроек виджета. Это важно!

Так же после обновления, в библиотеке появятся еще три новых модуля для настройки целей метрики. На самом деле это один модуль скопирован два раза. Просто я хотел наглядно показать как им пользоваться. Вы можете разместить на странице сколько угодно этих модулей для настройки целей. Хоть для каждого товара отдельную цель. Тут главное правильно настроить модуль. В модуле есть три поля ввода. О полях "Номер счетчика метрики" и "Идентификатор цели" говорить ничего не буду, если вы занимаетесь целями метрики, то и без меня должны знать что это такое. В принципе, в модуле есть подробное описание что и как делать, но если вам все же не понятно как найти ID кнопки какого то конкретного товара, то пишите тут же в теме, попробую объяснить, хотя на эту тему уже много было сказано и написано.
Обновлено 27 Май 2017, 18:23
Здравствуйте. Заинтересовал данный виджет, но возник вопрос. Возможно ли, чтобы корзина стояла в шаблоне сайта, а кнопки с товарами разместить на разных страничках. Например, у меня на сайте для каждого товара своя страничка, и на страничке кнопка Заказать. Будет ли в этом случае виджет работать?
Да, корзина работать в шаблоне будет.
Алексей, спасибо за виджет, уже купил!
Несколько предложений для обновлений)
1. Корзина не сбрасывается после отправки заявки, т.е. человек оформил заказ, а товары так и лежат в корзине
2. Было бы круто добавить эффект перемещения товара в корзину или какой-либо эффект, чтобы после нажатия кнопки "в корзину" внимание смещалось на саму корзину
3. Мелочь - сворачивание корзины при клике в любом месте, а не только по крестику "закрыть"
4. Про цели уже спросил, будем ждать в следующих версиях

Было бы круто добавить эффект перемещения товара в корзину или какой-либо эффект, чтобы после нажатия кнопки "в корзину" внимание смещалось на саму корзину

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

 

Тоже не стал делать. Потому как мне было интересно наблюдать как товары залетают в открытую корзину :)
Но в обновлении могу такую настройку добавить.
Обновлено 2 Апр 2017, 17:06
Добрый вечер, скидка отключаемая? Не хочу делать скидку например...
Да, конечно. Можно включить, настроить процент и сумму. Можно отключить совсем.
Спасибо за виджет. Тестирую. Было бы не плохо включить возможность отключения текста в корзине: "Количество товаров в корзине:"  Т.к. если в настройках убрать этот текст, то цифры остаются.
В свойства страницы, в HEAD попробуйте добавить следующий код:
 

<style>
.items_cart_info_wrapper span:nth-child(2), .items_cart_info_wrapper span:nth-child(3) {

display: none;

}

</style>

Обновлено 17 Апр 2017, 22:43
Добавил. Все работает, спс.
Обновлено 17 Апр 2017, 22:20
Слэш забыл. Извините. Обновил код в предыдущем сообщении.
Здравствуйте!
Приобрел Ваш виджет корзина,  все отлично работает и испольуется на сайте.

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

Возможно ли добавить это в функционал или отдельно за плату усовершенствовать виджет?
Уверен это бы было полезно многим.


 

при отправке товара в корзину, количество нужно изменять только в корзине

В обновлении будет возможность выбирать способ добавления товаров в корзину.
Зачем платить, если лучше подождать обновления? Ожидайте, пожалуйста, ведь "проблема" не настолько серьезная.
Алексей здравствуйте! Очень нужен ваш виджет, но ещё больше нужна его интеграция с битрикс24! Нашел виджет Влада Якупова "Интеграция с Битрикс24" https://muwilab.ru/integraciya-podpisnyih-form-s-adobe-muse.html, возможно ли их объединить собственными силами? Будет ли работать? С Уважением и надеждой на ответ, Валентин)
Обновлено 9 Июн 2017, 11:17
Указанный вами виджет работает со стандартной формой, по крайне мере так написано на странице виджета по вашей ссылке. Моя корзина так же работает со стандартной формой. Из этого следует, что, теоретически, соединить можно, но на практике как оно пойдет я не знаю, так как с виджетом интеграции не знаком. Так же прошу обратить внимание на цену обеих виджетов. Как вариант, вы можете опробовать корзину без покупки, она работает на каталисте.
Добрый день! В самой корзине поехала верстка. Как можно поправить? Пробовал создавать все модули заново - все равно съезжает
Само оно "сломаться" не могло. Видимо делаете то, что сами не понимаете ) Переустановите виджет, подключи по новой файлы в виджете. Почистите кеш браузера. 
Алексей, добрый день! Какой-то косяк с настройками, хотя возможно что-то я делаю не так ...
Вобщем происходит следующее - в "Корзине" я пытаюсь добавить "Стандартное поле" - "Номер сотового телефона". Ставлю галочку, оно появляется.
Перетаскиваю его под поле "E-mail". Далее после публикации захожу в браузере в Корзину и при попытке ввода сотового телефона у меня выпадает список способа оплаты, причем одновременно - и в поле для ввода сотового телефона и в поле для выбора способа оплаты.
Что делать?
При создании какого либо поля, снимите галочку с "редактировать вместе".
Не помогает! Даже после удаления вашего виджета, полной перезагрузки компьютера, скачивания виджета заново и последующей его повторной установки.
Первое, что сделал прежде чем что-либо менять в Корзине - снял галочку с "Редактировать вместе". Ситуация повторяется ...
Создайте новый сайт, разместите корзину, скиньте мне на почту alexejon@yandex.ru
Ловите. Отправил
Здравствуйте Алексей! Подскажите пожалуйста, оправлял друзьям сайт  с установленной "корзиной" (ваш виджет) и из 6 человек у двоих выскакивает красный экран с просьбой покупки корзины, хотя всё куплено, код введен в виджет и на своем компьютере я такой проблемы не наблюдал. Собираюсь ставить сайт с вашей корзиной на рекламу, но тут уже 2 человек могут превратиться в 200 и это действительно большая проблема! Возможно в сам виджет вписать адрес моего сайта, чтобы он не требовал ключа активации а просто запускался только на нем? Так чтобы небыло совсем варианта, что этот красный экран может появиться у кого то, во время загрузки сайта? Может за дополнительную плату, с сокращением количества сайтов которые на которых можно активировать виджет- не знаю, как, но как то (( Я понимаю, что стандартной рекомендацией будет, переустановка виджета и его переподключение, но я теперь спать спокойно не смогу и в голове постоянно будет этот экран и вариант того, что сайт на который пойдем мощная реклама, будет просто недоступен, вот очень нужно привязать мою версию виджета на мой домен, без этого экрана((( Извините за истерику)) И заранее спасибо за ответ!
Обновлено 26 Июн 2017, 00:41
Ещё у одного выскочила блокировка красным окном и после перезагрузки пропала. У меня паника) Весь сайт строил на основе вашей корзины
Обновлено 25 Июн 2017, 23:33
Напишите в ЛС, будем разбираться
https://vk.com/id89618314
Алексей, корзина "запомнила" одну почту и больше изменить ящик для доставки формы заказа не получается. Поясню - я изменил адрес электронной почты один раз. Потестировал, все хорошо. Корзина его "запомнила". Дальше меняю адрес на другой и после публикации сайта форма заказа не приходит по указанному адресу и по предидущему тоже. Потом меняю адрес обратно и после этого доставка сообщений вновь возобновляется по старому адресу. Но мне необходимо его изменить! Что делать?


Сообщение
Ник *
Ваш e-mail *
Защитный код *
 
Опрос
Каких виджетов, по вашему мнению, до сих пор не хватает (не достаточно раскрыта тема)?
Мувилаб рекомендует: быстрый хостинг с защитой от DDos атак!