Как сделать корзину в muse

Добавление корзины покупок на веб-сайты Adobe Muse

Как сделать корзину в 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

Как сделать корзину в muse

Виджет работает только на пк версии.

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

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

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

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

Как сделать корзину в muse

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

Как сделать корзину в muse

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

Как сделать корзину в muse

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

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

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

Как сделать корзину в muse

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

Как сделать корзину в muse

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

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

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

Как сделать корзину в muse

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

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

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

Как сделать корзину в muse

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

Как сделать корзину в muse

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

Как сделать корзину в muse

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

Как сделать корзину в muse

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

Как сделать корзину в muse

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

Как сделать корзину в muse

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

Как сделать корзину в muse

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

Как сделать корзину в muse

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

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

Как сделать корзину в muse

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

Как сделать корзину в muse

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

Как сделать корзину в muse

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

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

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

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

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

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

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

Так же после обновления, в библиотеке появятся еще три новых модуля для настройки целей метрики. На самом деле это один модуль скопирован два раза. Просто я хотел наглядно показать как им пользоваться. Вы можете разместить на странице сколько угодно этих модулей для настройки целей. Хоть для каждого товара отдельную цель. Тут главное правильно настроить модуль. В модуле есть три поля ввода. О полях «Номер счетчика метрики» и «Идентификатор цели» говорить ничего не буду, если вы занимаетесь целями метрики, то и без меня должны знать что это такое. В принципе, в модуле есть подробное описание что и как делать, но если вам все же не понятно как найти ID кнопки какого то конкретного товара, то пишите тут же в теме, попробую объяснить, хотя на эту тему уже много было сказано и написано.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *