Корзина для сайта

Готовая корзина для вашего сайта

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

Пример работы Получить код для установки

Как установить корзину на сайт? : видео, 46 секунд

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

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

Предыдущая статьяДоработка корзины интернет-магазина
Следующая статьяОтветы на частые вопросы по онлайн-оплате в корзине EasyNetShop