Muse Masters
Free cart for Adobe Muse

Интернет-магазин, бесплатная корзина для Adobe Muse

1.Создание простого интернет-магазина в конструкторе Adobe Muse

Для начала работы нам понадобиться:

— скрипт http://salejs.com

— проект в Adobe Muse

2.Подключение скрипта

1.Необходимо вставить следующий код перед закрывающим тегом </body>

Для этого я советую воспользоваться виджетом End Body Code для Adobe Muse

<script src="http://salejs.com/v1/cart.js"></script>

<script>  cartjs.initialize({   

emailOrdersTo  : 'your-shop@mail.com',   

language       : 'russian', // Также доступны 'english' и 'ukrainian'.   

currency       : 'руб.',     // Дополнительные опции, можно их не указывать.   

requireName    : true,      // Спрашивать имя покупателя.   

requirePhone   : true,      // Спрашивать телефон покупателя.   

requireEmail   : false,     // Спрашивать почту покупателя.   

requireAddress : false,     // Спрашивать адрес покупателя.  })

</script>

В данном коде необходимо указать E-mail на который будут приходить уведомления и язык корзины.

Так же вы можете выставить валюту.

2.Поместите полученный виджет с кодом в Шаблон
1-step-cart

3.Поле вывода кол-ва добавленных товаров в корзину

Как правило данное поле размещается в шапке сайта, на всех страницах проекта. Имеет смысл, разместить данное поле в Шаблоне, который автоматически будет подставляться на всех страницах.

Переходим в шаблон, создаем шапку и вставляем следующий код:

<a href="#" class="cart-button" style="display: none;">  

<span class="cart-button-quantity"></span>  

<span class="cart-button-label"></span>  

<!-- Опционально, вместо span элементов можно поместить сюда картинку для кнопки. --></a>

2-cart-pic

! Советую сделать подложку для данного текстового поля

4.Кнопка добавить в корзину

Создадим кнопку для добавления товара в корзину. За добавления товара с его характеристиками отвечает следующий код:

<a href="#" class="cart-buy-button"  

data-name="Nexus"  

data-price="450"  

data-quantity="1"

>Купить 450 руб.</a>

data-name=»Nexus» – Название добавленного продукта в корзину

data-price=»450″ – Стоимость продукта без указания валюты

data-quantity=»1″ – Кол-во добавляемого товара

Купить 450 руб. – Надпись на кнопке добавления товара

! Добавьте фоновую кнопку для данного поля, так как оно не имеет его.

3-cart-pic

Дополнительно:

  1. Изначально для текста добавится стандартный стиль ссылок, чтобы поменять цвет текста необходимо настроить его в стилях ссылок

4-cart-pic

5-cart-pic

посмотреть пример сайта с корзиной: http://nik-sev.pp.ua/web/freecart/

Оригинал статьи: NIKSEV — Создание корзины для Adobe Muse
Скачайте все материалы из урока!

 

комментариев

      • Зато есть проблема в модуле настроек корзины ,картинка модуля отоброжается на сайте

          • Вынесли за пределы модуля ,сделали прозрачность заливки модуля на 0 % , когда делишься ссылкой ,и в ссылке тоже отображается картинка виджета как исправить этот глюк.

      • Добрый день, помогите решить проблему к этому скрипту или виджету, как увеличить ширину корзины или ширину / длину описания товара в корзине.

          • Хорошо, а как быть с размещением корзины на сайте с SSL сертификатом?
            Так как сразу конфликт и гуг ругается на то что сайт ссылается на не надежный ресурс.

          • 1) Можете развернуть скрипт на своем сервере и использовать там ssl. Инструкция https://github.com/alexeypetrushin/salejs 2) Можете отказаться от использования SSL сертификата в данном проекте потому, что в нем нет смысла.

  • добрый день
    огромное спасибо за скрипт и виджет!
    а есть ли возможность перевести этот скрипт на htpps?

      • В данной инструкции совсем не понятно что делать, я конечно понимаю что вы все знаете, но мы то не шарим, по этой причине и выбрали Muse

        И не понятно можно ли установить на хостинг, да и кстати скрипт который у вас размещен не работает, проверял уже на 17 и 18 muse. Раньше работало, а SSL вот как раз в SSL есть смысл без него поисковики не так хорошо индексируют сайт.

        Было бы просто отлично если бы вы показали хотя бы скриншотами как его установить.

        • Загвоздка в том, что данный виджет разработан на основе готового скрипта. И у нас нет знаний, как развернуть его на своем сервере. Инструкция есть и она была предложена. Но как её использовать, знает больше сам автор скрипта. Мы только упаковали виджет в более понятный для пользователей вид. Вам было бы неудобно пользоваться им в виде кода.

          • виджет работает нормально, но… после того как товар добавлен, заполнено меню обратной связи и после нажатия кнопки ОТПРАВИТЬ меню не исчезает, нет окошка подтверждения. то есть не понятно отправлен ли заказ или нет.
            может возможно добавить какой скрипт????

Мы VK

Интересные статьи

Следите за новостями

Хочешь знать о новинках Adobe Muse. Получать свежие уроки и тонны виджетов? Присоединяйся