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

 

Как привязать форму Adobe Muse к CRM Bitrix24

Теперь вам не придется отказывать клиентам в разработке и интеграции форм с CRM. Раньше мы просто не знали как реализовать данную функцию. Наконец-то мы нашли решение этой проблемы и хотим поделиться с вами этим решением:

 Для работы потребуется:

Материалы для данного урока вы можете скачать по ссылке в конце статьи.

1)    Этап. Выгрузка готового проекта

Для того, чтобы начать работу с привязкой форм, Вы должны экспортировать готовый проект в HTML , для этого вы можете задействовать комбинацию клавиш Ctrl+E.
Поместите rest.php и common.js  в корневую папку сайта.

11

2) Этап. Подготовка PHP файла-обработчика для отправки в CRM

Откройте файл Rest.php  в любом редакторе (я рекомендую Sublime text)

Начнем редактировать данный файл с доступа, для отправки данных на ваш аккаунт в CRM системе.

Вам необходимо изменить такие пункты:

2

После того как вы завершите настройки доступа к аккаунту, мы настроим поля которые будут передавать наши формы. А точнее данные, которые будет обрабатывать PHP файл.

Если в Вашей форме будет использоваться всего 2 поля (Имя и Телефон), тогда вам не нужно изменять данный участок кода.
Если вы хотите добавить больше полей, например:
E-mail – Вам необходимо создать или заменить ненужное поле с такими данными:
' EMAIL_WORK' => $_POST[' EMAIL_WORK'],
Если вы хотите узнать какие еще данные вы можете передать в форме, перейдите на список функций CRM Bitrix 24

3

3) Этап. Адаптация полей формы Adobe Muse

1. Для того, чтобы обработчик смог определить поступающие данные из формы, поля формы нужно подписать. Если вы хотите, чтобы письма приходили только в CRM, удалите строчку action="scripts/form-u98.php"

(id названия файла php может отличаться от предложенного в данном уроке, но это не значит что его нужно оставить )

87

2. Добавьте полям атрибут name. Найдите у полей место, как показано на скриншоте и вставьте соответствующие поля, удалите тег name который был или замените его атрибут:

Для заголовка – добавьте строчку <input type="hidden" name="TITLE" value="Тема сообщения">

Для Имя - name="NAME"

Для Телефона - name="PHONE_MOBILE"

5

 

 

4) Этап. Редактируем файл Common.js

В данном коде потребуется заменить id формы, на вашу. Если у вас будет несколько форм, указываете id через запятую с пробелом. Например: ( “#widgetu98, #widgetu99, #widgetu100” )

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

6

5) Этап. Завершение, вставка скрипта common в проект

В разделе Other Script
Укажите путь к файлу common.js на вашем хостинге, как показано на скриншоте.

7

 

Все готово, проверяйте работоспособность только после того, как загрузите сайт на хостинг!

[sociallocker] Скачать материалы для интеграции CRM + Muse [/sociallocker]