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

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

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

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

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

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

Пример установки корзины скопируйте код

<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">
Рекомендуем добавлять этот код перед закрывающим тегом </body>. Если возможности ограничены, то можно добавить в любое место.

Пример кнопки "купить" скопируйте код

<a class="btn-ens-action btn-ens-style" data-rel="4a9f99dc105">Купить</a>
Добавьте этот код рядом с товаром.

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

Как установить корзину на сайте

Подробное описание процесса установки корзины и размещение активных кнопок добавления товара в корзину.

Как изменить внешний вид кнопки КУПИТЬ

Настройка стилей для кнопки добавления товара в корзину или использование существующих на сайте кнопок

Как изменить иконку корзины на сайте

Использование стандартной кнопки перехода в форму заказа или создание собственной кнопки КОРЗИНА

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

В этом примере мы создадим собственную корзину на 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

    Установка 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

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

Готовый скрипт для интернет-магазина JavaScript корзины для сайта «Простой магазин», предназначенный для работы на абсолютно любой системе управления контентом (CMS), представляет собой асинхронный JS-функционал, позволяющий реагировать на действия посетителей сайта, отправляя на сервера «Простого магазина» информацию об активности. Получив и обработав ответ от сервера, скрипт выводит информацию для пользователей в удобном виде. Все взаимодействие по оформлению товара (добавление его в корзину, редактирование количества товаров в корзине, отправка заказа) происходит через скрипт. JS-код выполняет роль шлюза между сайтом, на котором размещена корзина, и сервером «Простого магазина», который обрабатывает информацию и выполняет действия по доставке совершенного заказа.

JavaScript и CSS легко интегрируется на любой действующий сайт (кроме сайтов, созданных на технологии Flash). Он выдаются каждому пользователю персонально при регистрации в личном кабинете.

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

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

Укажите настройки в личном кабинете.