Бесплатная корзина интернет-магазина для 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/

 

[sociallocker id=»371″] Скачать шаблон и инструкцию [/sociallocker]

 

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

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