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