Корзина на JS

Готовый функционал оформления заказа на сайте.
Добавляет товары в заказ, считает скидки и доставку и отправляет на почту.

Установить виджет Смотреть пример

video Как установить на сайт [видео, 46 секунд]

Пример работы

Карбонара, 30 см, традиционная - --- руб.

Как сделать корзину на JS

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

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

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

Онлайн-оплата

Сформирует покупателю ссылку для онлайн-оплаты на итоговую сумму заказа

Скидки и промо-коды

Рассчитает покупателю размер скидки от суммы заказа или по промо-коду

Варианты доставки

Предоставит покупателю возможность выбора варианта доставки

Уведомление в Telegram

Отправит сообщение о заказе в ваш личный чат телеграм или в вашу рабочую группу.

Статусы заказов

Покажет покупателю историю его покупок и текущий статус каждого из его заказов.

Поддержка сервиса

Поможет в установке и настройке индивидуального дизайна

Присоединяйтесь к нам в Telegram
@EasyNetShop_support

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

Библиотека 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>

Настроить свою корзины

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

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

Рекомендованный код

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

<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>

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

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

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