Корзина для landing page

Корзина для лендинг пейдж

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

1 2 3 4

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

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

01 02 03 04 05 06 07 08 09 10 11 12

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

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

1 2 3 4 5 6 7

<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>

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

1 2	<span class="cart-button-quantity"></span> <span class="cart-button-label"></span>

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

1 2 3 4 5 6

<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 - количество
•  Скачать исходник