Muse Masters
Free cart for Adobe Muse

Интернет-магазин, бесплатная корзина для 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 есть смысл без него поисковики не так хорошо индексируют сайт.

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

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

Корзина для Adobe Muse

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

Мы VK

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

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