Скрипт позволяет за несколько минут без программирования сделать корзину на сайте, в том числе и на отдельных HTML-страницах без системы управления контентом.
Подробная документация по позволяет настроить форму заказа на вашем сайте со всеми существующими у него возможностями. А набор готовых решений, созданный на основе практик продаж в действующих интернет-магазинах, подскажет вам идеи по развитию и улучшению вашего сервиса.
Если при установке и использовании скрипта у вас возникли вопросы – их решить поможет служба технической поддержки сервиса.
Для установки корзины на сайт необходимо скопировать фрагмент кода из личного кабинета, содержащий три основных файла:
Код корзины [демо-версия]:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script defer src="//lk.easynetshop.ru/frontend/v5/test.js"></script>
<link href="//lk.easynetshop.ru/frontend/v5/test.css" rel="stylesheet">
Код для кнопки КУПИТЬ [демо-версия]:
<button class="btn-ens-action btn-ens-style" data-rel="4a9f99dc105">Купить</button>
Код для кнопки КУПИТЬ [демо-версия #2]:
<button class="btn-ens-self btn-ens-style" data-name="Карбонара" data-price="450" data-desc="Бекон, сыры чеддер и пармезан, моцарелла" data-img="https://easynetshop.ru/assets/images/pizza.png">Купить</button>
После установки кода
на вашем сайте появится корзина:
JavaScript создаст HTML-код корзины:
А также выполняет обмен данными с сервером, на котором хранятся данные о товарах, заказах и персональные настройки интернет-магазина. Без серверной части реализация корзины невозможна.
Размещение кода корзины внутри HTML-страницы:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>EasyNetShop</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="JS с настройками из личного кабинета"></script>
<link href="CSS с настройками из личного кабинета" rel="stylesheet">
</head>
<body>
<a class="btn-ens-action btn-ens-style" data-rel="Код товара из личного кабинета">Купить</a>
</body>
</html>
Все настройки уже внутри JS
Для настройки потребуется указать адрес вашего сайта, email для отправки заказов и указать параметры товаров в личном кабинете.
<div id="easynetshop-cart">
<div id="enscart_my_wrapper">
<div id="enscart_myimage_wrapper"> <img src="https://i.ibb.co/ZfJ03Ns/shop1.png"> </div>
<div id="enscart_my_counter_wrapper"><span id="easynetshop-cart-count"> 0 </span></div>
</div>
</div>
Кроме установки кода корзины, на страницах вашего сайта также потребуется установить кнопки для добавления товара. Если такие кнопки «Купить» уже есть на странице, потребуется их связать с корзиной, для однозначного выбора товара, который они будут добавлять в заказ.
Для работы с товарами корзина использует собственный каталог, которым Вы можете управлять внутри личного кабинета. Он позволяет устанавливать цену товара, изображение, остаток на складе, сопутствующие товары и описание.
Для связки можно использовать один из 4 вариантов размещения кода на странице:
Использовать код кнопки купить, который автоматически генерируется при создании товаров в личном кабинете. Пример:
<a class="btn-ens-action btn-ens-style" data-rel="ID товара"> Купить </a>>
В этом коде:
.btn-ens-style (необязательный) содержит визуальные настройки для кнопки "купить", вы можете заменить его на собственный класс, содержащий настройки оформления. Или можно создать стили в конструкторе
."btn-ens-action (обязательный) не визуальный, он не содержит стилей оформления. Добавляет реакцию на событие клика по этому элементу и отправляет товар из параметра data-rel в корзину
data-rel="ID товара" (обязательный), содержит ID товара из личного кабинета, который будет добавлен в заказ при нажатии на эту кнопку.
Использовать ссылку на страницу, где установлена корзина. Данный вариант можно использовать, если система вашего сайта не позволяет добавлять произвольный HTML-код в нужное место. Пример:
<a href="Адрес страницы#ensadd:ID товара">Купить</a>
В этом коде:
Адрес страницы (необязательный) может содержать URL страницы вашего сайта, на которой установлена корзина. При отсутствии адреса добавление товара произойдет на текущей странице.
ID товара (обязательный), содержит ID товара из личного кабинета, который будет добавлен в заказ при нажатии на эту кнопку.
Также использование ссылки с таким параметром может быть использовано для формирования ссылок с других сайтов (рекламных площадок, агрегаторов и т.п.) при переходе по такой ссылке пользователь автоматически добавит товар в корзину и перейдет сразу к оформлению заказа.
Использовать добавление товара через вызов функции, которую можно добавить к элементу через событие «клик» по нему. Пример:
<button onclick="easynetshop_buy('ID товара');">Купить</button>
<button class="btn-ens-self btn-ens-style"
data-name="Карбонара"
data-price="450"
data-desc="Бекон, сыры чеддер и пармезан, моцарелла"
data-img="https://easynetshop.ru/assets/images/pizza.png">
Купить
</button>
В коде подключения содержится файл с готовыми стилями оформления элементов корзины. Сами элементы, генерируемые скриптами соответствуют стандартам HTML5 и верстка на основе bootstrap.
В соответствии с принципами каскадных таблиц стилей вы можете частично или полностью переопределить любой из параметров, указанных в css-файле. Для этого требуется после установки стандартных стилей добавить новое описание для выбранного элемента. Например, чтобы изменить цвет кнопки необходимо указать новые стили для классов которые изменились:
<style>
#enscart_wrapper #enscart_image_wrapper {
background-color: #1170bb;
}
#easynetshop-cart-default #enscart_wrapper {
top: auto; right: auto;
left: 10px;
bottom: 20px;
}
</style>
Кроме этого, для редактирования стилей можно скачать готовый файл, изменить в нем параметры оформления и загрузить на свой сервер, указав путь к нему для подключения.
Кроме стилей можно менять и текст, надписи, заголовки в шапке выпадающих окон корзины, надписи на кнопках и др. Подробную информацию по настройке соотвествтующих элементов можно найти по ссылкам:
Есть вопрос?