Готовый скрипт корзины на JS

Создание корзины

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

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

Если при установке и использовании скрипта у вас возникли вопросы – их решить поможет служба технической поддержки сервиса.

Карбонара

руб. В корзину

Для установки корзины на сайт необходимо скопировать фрагмент кода из личного кабинета, содержащий три основных файла:

Библиотека jQuery (возможно уже используется и повторная установка не потребуется)
JavaScript корзины с персональными настройками
Стили CSS оформления корзины

Пример установки на страницу

Код корзины [демо-версия]:

<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 для отправки заказов и указать параметры товаров в личном кабинете.

Скрипт корзины с настройками

Кнопка перехода к офромлению заказа

По-умолчанию, при установке скрипта на страницу сайта иконка корзины с фиксированным положением на странице добавляется автоматически. Но если необходимо использоваться собственный элемент в качестве кнопки перехода к оформлению заказа, то необходимо этому элементу добавить id="easynetshop-cart". Внутри такого блока могут быть использованы любые элементы (картинки, кнопки, текст). Пример:

<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 вариантов размещения кода на странице:

Ссылка на страницу

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

Видео

Кроме этого, для редактирования стилей можно скачать готовый файл, изменить в нем параметры оформления и загрузить на свой сервер, указав путь к нему для подключения.

Настройка формы заказа

Кроме стилей можно менять и текст, надписи, заголовки в шапке выпадающих окон корзины, надписи на кнопках и др. Подробную информацию по настройке соотвествтующих элементов можно найти по ссылкам:

Скрипт корзины на JS