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

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

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

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

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

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

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

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

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

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 руб. – Надпись на кнопке добавления товара

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

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

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

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

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