Как сделать корзину в muse
Добавление корзины покупок на веб-сайты Adobe Muse
某些 Creative Cloud 应用程序、服务和功能在中国不可用。
Новые функции больше не добавляются в Adobe Muse. Поддержка этого приложения будет прекращена 26 марта 2020 г. Для получения подробной информации и поддержки посетите страницу прекращения обслуживания Adobe Muse.
Приложение Adobe Muse позволяет продавать товары через виджет Shopify Cart. Shopify представляет собой решение для электронной коммерции, с помощью которого можно создать интернет-магазин для продажи товаров. Shopify позволяет систематизировать продукты, настроить электронную витрину, принимать платежи банковскими картами, отслеживать и обрабатывать заказы — всего несколькими щелчками мышью.
Перед конфигурацией виджета Shopify в приложении Adobe Muse требуется открыть учетную запись Shopify. Сразу после настройки учетную запись Shopify можно использовать для конфигурации магазина на веб-сайте и продажи товаров.
Загрузка виджета Shopify
Откройте следующую ссылку в браузере:
Нажмите кнопку Get This Widget (Загрузить виджет).
Виджет Shopify будет загружен в папку загрузок по умолчанию. Расположение папки «Загрузки» зависит от браузера, который вы использовали для загрузки, и операционной системы компьютера.
Создание и настройка корзины
Чтобы добавить и настроить кнопку Shopify, выполните следующие действия:
Прежде чем приступить к настройке виджета Shopify в Adobe Muse, необходимо настроить магазин и создать список продуктов в вашей учетной записи Shopify.
Информация о загрузке виджета Shopify представлена в разделе Загрузка виджета Shopify.
На панели «Библиотека» выберите Виджеты Adobe > Виджет Shopify и перетащите этот виджет на холст веб-страницы.
На панели «Параметры» выполните следующее действие:
Укажите заголовок элемента, например, имя продукта.
Выберите, если вы хотите отображать только кнопку «Купить».
Текст «Купить» используется по умолчанию, но вы можете изменить его в соответствии со своими потребностями.
Используйте палитру цветов, чтобы настроить цвет кнопки.
Вы можете выбрать один из двух размеров кнопки: Компактная (230px) или Обычная (450px).
Отправить пользователя в
Укажите, куда попадает посетитель сайта при нажатии кнопки Shopify.
Создание и настройка кнопки Shopify
Чтобы добавить и настроить виджет Shopify, выполните указанные ниже действия.
Прежде чем приступить к настройке виджета Shopify в Adobe Muse, необходимо настроить магазин и создать список продуктов в вашей учетной записи Shopify.
Информация о загрузке виджета Shopify представлена в разделе Загрузка виджета Shopify.
На панели «Библиотека» выберите Виджеты Adobe > Shopify Button и перетащите кнопку Shopify Button на холст веб-страницы.
На панели «Параметры» выполните следующее действие:
ID коллекций Shopify
Укажите ID ваших коллекций Shopify.
Обзор и инструкция виджета «Простая корзина» для Adobe Muse
Виджет работает только на пк версии.
Видео обзор виджета «Простая корзина»
Инструкция по использованию виджета «Простая корзина»
Демонстрационная страница работы виджета «Простая корзина».
Страница виджета в магазине.
После установки виджет появится в библиотеке Adobe Muse:
Для начала надо установить «модуль настроек» виджета, с левой стороны от рабочей области страницы:
Подключаем файлы таблицы стилей и файл самого скрипта виджета:
Эти два файла находятся в архиве виджета.
Я ничего не сказал про активацию виджета, не случайно, так как принцип работы активации, и как ею пользоваться, все это есть тут.
У нас еще осталось три незадействованных модуля. Это «малая корзина(МК)», «корзина» и «карточка товара(КТ)». Корзину размещаем справа от рабочей области страницы:
И только справа, нигде больше. Кроме этого ее необходимо закрепить:
Форма корзины модифицирована, добавлены выпадающие списки, о них позже еще поговорим.
У нас остался модуль МК и КТ. КТ размещаем на самой странице в нужном месте. Поговорим о ней подробнее. КТ состоит из четырех важных элементов, без которых виджет не будет работать:
1. основной фрейм КТ
2. кнопка отправки товара в корзину
3. текстовый фрейм названия товара
4. текстовый фрейм цены товара
Это основные элементы КТ которые должны быть у каждой КТ. К каждому из этих элементов изначально присвоены стили графики.
Для основного фрейма стиль графики item_name, для кнопки add_to_cart, для названия товара itemn_name, для цены itemn_price.
После того как вы настроили внешний вид первой КТ, вам достаточно будет размножить эту КТ столько раз, сколько у вас товаров на странице. Размножить, значит скопировать. И уже в скопированных КТ меняете название товара и его цену. Все очень просто. Всего два действия: скопировать и переписать название и цену.
Поговорим о модуле «корзина».
Что такое черное поле и за что оно отвечает? Это стандартное текстовое поле формы «многострочный текст»:
В это поле попадают товары добавленные в корзину. Поле не видно посетителю. После отправки формы, владелец магазина увидит то, что выбрал покупатель:
Важный момент. Данное черное поле должно быть первым текстовым полем формы. То есть, если вы решили зачем то взять стандартную форму, то она выглядит так:
Поле «сообщение» и есть черное поле. Это поле вам нужно разместить в низу формы, под кнопкой «отправить». Можно его сделать поменьше, его все равно никто не увидит, в него будут попадать выбранные товары. Сделайте так:
А уже на место поля для сообщения добавьте новое поле «многострочный текст»:
В результате форма будет выглядеть так:
Выпадающие списки. Максимум к форме в корзине можно применить пять выпадающих списков. По умолчанию в виджете у формы уже есть два выпадающих списка. Что бы добавить третий выпадающий список, нужно добавить еще одно поле «однострочный текст». Да, именно, списки работают с однострочным текстом. И так, добавили еще одно поле «однострочный текст». Далее важный момент, нужно снять галочку с «редактировать вместе»:
Затем выделяем добавленное поле и присваиваем ему стиль графики sp3, так как это третье поле. После этого открываем «модуль настроек» виджета и находим соответствующее поле для составления пунктов в этом выпадающем списке:
Обратите внимание, что пункты выпадающего списка в виджете разделяются знаком решетки.
Остался последний модуль МК. Его размещаем в нужном месте на странице сайта. На моем демо сайте это выглядит так:
«Модуль настроек». Не вижу особого смысла рассказывать о всех настройках в данном модуле кроме двух последних:
Если нужно что бы все получилось «красиво», следуйте простой инструкции. «Цвет текста активной кнопки товара» должен быть точно таким же как и цвет текста кнопки в состоянии «курсор над кнопкой»:
То же самое касается и второй настройки с фоном кнопки. Вот и все.
Будут вопросы по настройке, функционалу виджета, задавайте в этой теме. Буду рад помочь!
Внимание! Отзывы по виджету следует оставлять на странице товара во вкладке «отзывы».
История обновлений
Устранен баг с формами, когда на странице с корзиной было 2 и более форм.
С этим обновлением появился ряд новых возможностей для виджета.
Появилась возможность:
Так же после обновления, в библиотеке появятся еще три новых модуля для настройки целей метрики. На самом деле это один модуль скопирован два раза. Просто я хотел наглядно показать как им пользоваться. Вы можете разместить на странице сколько угодно этих модулей для настройки целей. Хоть для каждого товара отдельную цель. Тут главное правильно настроить модуль. В модуле есть три поля ввода. О полях «Номер счетчика метрики» и «Идентификатор цели» говорить ничего не буду, если вы занимаетесь целями метрики, то и без меня должны знать что это такое. В принципе, в модуле есть подробное описание что и как делать, но если вам все же не понятно как найти ID кнопки какого то конкретного товара, то пишите тут же в теме, попробую объяснить, хотя на эту тему уже много было сказано и написано.