CSS и JS-скрипт корзины интернет-магазина

Создаем 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>
```

Настройка 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

Установка javascript корзины

Теперь необходимо подключить к странице 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>
5

Кнопка добавления товара в заказ

Рядом с товаром размещаем кнопку "купить" с ID товара data-rel="..." из личного кабинета, а также класс btn-ens-action.
```
<button type="button" class="btn btn-lg btn-block btn-primary btn-ens-action" data-rel="4a9f99dc105">Купить</button>
```
Результат:
6

Готово! При нажатии на кнопку купить товар добавляется в корзину.

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

Видеоинструкции по настройке корзины

Как создать страницу с товарами и подключить скрипт корзины

Создаем HTML-блок с карточками товаров

Создаем HTML-блок для отображения корзины

Настройка CSS стилей корзины и формы заказа

Установка javascript корзины

Кнопка добавления товара в заказ

Готово! При нажатии на кнопку купить товар добавляется в корзину.

Получите готовый JavaScript с настройками