В этом примере мы создадим собственную корзину на HTML странице при использовании технологий JS + CSS.
1. Создаем HTML-страницу с товарами
Для построения HTML-страницы возьмем готовый пример с использованием фремворка bootstrap. На странице разместим два блока с товарами и кнопкой “Купить”. Если страница у вас уже существует - этот пункт можно пропустить и сразу перейти ко второму шагу.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<title>Pricing example · Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="card-deck mb-0 text-center">
<div class="card mb-0 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Простой</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">100 <small class="text-muted">руб</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>10 пользователей</li>
<li>2 GB диск</li>
<li>Доступ к сервису поддержки</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Купить</button>
</div>
</div>
<div class="card mb-0 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Базовый</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">200 <small class="text-muted">руб</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>20 пользователей</li>
<li>10 GB диск</li>
<li>Доступ к сервису поддержки</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Купить</button>
</div>
</div>
</div>
</div>
</body>
</html>
Результат:
2. Создаем HTML-блок для корзины
Добавим в созданный ранее код HTML блок “Корзины” Для этого создадим в структуре HTML блок id="easynetshop-cart". Место для вставки в код HTML-страницы может быть произвольным, поскольку данный элемент будет иметь фиксированное положение в окне браузера и при прокрутке страницы сохранит свое положение.
<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>
3. Настройка CSS стилей корзины
В структуре кнопки вызова корзины содержится иконка корзины с указанным адресом и элемент id="easynetshop-cart-count" со значением 0, который при добавлении товаров в корзину будет менять свое значение.
Определим CSS стили для данного элемента:
<style>
#enscart_my_wrapper {
text-align: center;
position: fixed;
top: 80px;
right: 20px;
z-index: 1140;
}
#enscart_myimage_wrapper {
background: #ffffff;
border-radius: 30px;
width: 60px;
height: 60px;
cursor: pointer;
box-shadow: 0 0 20px 0 rgba(0,0,0,.4);
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
z-index: 1140;
}
#enscart_my_wrapper img {
height: 80%;
width: auto;
padding-top: 8px;
}
#enscart_my_counter_wrapper {
cursor: pointer;
min-width: 30px;
height: 30px;
background-color: #d62240;
color: #fff;
border-radius: 30px;
position: absolute;
right: -5px;
top: -5px;
text-align: center;
line-height: 30px;
font-family: Arial,sans-serif;
margin: 0px 3px;
z-index: 1150;
}
#easynetshop-cart {
border: none;
background-color: transparent;
}
</style>
Результат:
4. Установка JS скрипта корзины
Теперь необходимо подключить к странице JS в котором будет описан весь функционал работы с добавлением товаров в корзину, удалением и изменением количества товаров.
Нам потребуется библиотека jQuery и готовый JavaScript корзины. Получить код возможно после регистрации в сервисе или для тестирования можно использовать пример:
<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">
Добавляем готовые библиотеки в <head>...</head> и в кнопку "купить" ID товара data-rel="..." из личного кабинета, а также класс btn-ens-action.
<button type="button" class="btn btn-lg btn-block btn-primary btn-ens-action" data-rel="4a9f99dc105">Купить</button>
Результат:
Готово! При нажатии на кнопку купить товар добавляется в корзину.
Получите готовый JavaScript с настройками
Укажите настройки в личном кабинете.
JavaScript корзины для сайта «Простой магазин», предназначенный для работы на абсолютно любой системе управления контентом (CMS), представляет собой асинхронный JS-функционал, позволяющий реагировать на действия посетителей сайта, отправляя на сервера «Простого магазина» информацию об активности. Получив и обработав ответ от сервера, скрипт выводит информацию для пользователей в удобном виде. Все взаимодействие по оформлению товара (добавление его в корзину, редактирование количества товаров в корзине, отправка заказа) происходит через скрипт. JS-код выполняет роль шлюза между сайтом, на котором размещена корзина, и сервером «Простого магазина», который обрабатывает информацию и выполняет действия по доставке совершенного заказа.
JavaScript и CSS легко интегрируется на любой действующий сайт (кроме сайтов, созданных на технологии Flash). Он выдаются каждому пользователю персонально при регистрации в личном кабинете.
Поскольку данный скрипт не отвечает за работу основного контента, рекомендуем его подключать асинхронно после загрузки более важных участков JS-кода. Это позволит оптимизировать работу браузера по отображению страницы, и если у пользователя медленный интернет, то значок корзины появится чуть позже всего остального контента.