25.05.17, 10:50
1 комментарий
  Скрипты

Скрипт корзины для html

Скрипт корзины для html

Итак, первым делом подключаем jQuery, а ниже скрипт корзины. Я делаю это, как обычно, перед закрывающимся тегом body:

<!-- Библиотека jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Скрипт корзины -->
<script src="libs//salejs/cart.js"></script>


Далее, необходимо произвести некоторые настройки и инициализировать скрипт. Я сделаю это ниже, под подключением скрипта корзины, но вы можете вынести его и в отдельный файл.

<script>
  cartjs.initialize({
    emailOrdersTo  : 'smart-landing@yandex.ru', // Ваша почта
    language       : 'russian',            // Язык
    currency       : 'руб.',               // валюта
 
    requireName    : true,      // Спрашивать имя покупателя.
    requirePhone   : true,      // Спрашивать телефон покупателя.
    requireEmail   : false,     // Спрашивать почту покупателя.
    requireAddress : false,     // Спрашивать адрес покупателя.
  })
</script>


Теперь давайте разместим саму кнопку корзины, в которой будет показана картинка и количество добавленных товаров:

<a href="#" class="cart-button" style="display: none;">
   <i class="fa fa-shopping-cart" aria-hidden="true"></i>
   <span class="cart-button-quantity"></span>
   <span class="cart-button-label"></span><br/>
   <span class="basket-help-text">Показать/Скрыть содержимое</span>
   <!-- Опционально, вместо span элементов можно поместить сюда картинку для кнопки. -->
</a>


Основное здесь:




Остальное я добавил самостоятельно. Теперь нужно разметить кнопку в карточке товара, которая будет добавлять товар в корзину. У меня карточка выглядит так:

<div class="good-item">
     <div class="good-img"><img src="img/tovar.png" alt="рюкзак"></div>
     <div class="good-name">JanSport PD 3331</div>
     <div class="good-price">1000 руб.</div>
     <a href="#" class="cart-buy-button" data-name="JanSport PD 3331" data-price="1000" data-quantity="1"><i class="fa fa-shopping-basket" aria-hidden="true"></i> В корзину</a>
</div>


Как вы могли заметить, у ссылки есть "говорящие" data-атрибуты. Данные этих data-атрибутов и попадают в корзину. Таки образом:

data-name - название товара/услуги
data-price - цена
data-quantity - количество
Вот, собственно, и все. Достаточно просто и быстро, в случае необходимости, можно оформить свой лендинг в стиле интернет-магазина и добавить ему корзину.шаблоны для dle 11.2

Комментарии

  1. Алексей 16 июня 2017 16:45                    

    Установил такой скрипт, вбил пол каталога и сделал редизайн сайта. А сегодня скрипт отвалился, порылся в нем и обнаружил что главный скрипт <script src="libs//salejs/cart.js"></script> внутри документа ссылается на набор функций this.baseUrl = options.baseUrl || 'http://salejs.com/v1' а доменное имя http://salejs.com/ как и http://salejs.com/v1 не открывается, помогите что можно с этим сделать!!!!!!!!!

Напишите своё мнение