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

Корзина для landing pageВсем привет. Сегодня будем делать простую корзину для landing page на javascript. Дело в том, что меня часто спрашивали, как ее сделать и несколько раз присылали ТЗ на разработку, но я не брался, так как не особо понимал, как ее сделать, а недавно, решил поискать на форумах и блогах реализацию и наткнулся на… Salejs.

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

Посмотреть пример

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

Итак, первым делом подключаем 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>

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

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

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

<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 — количество

Вот, собственно, и все. Достаточно просто и быстро, в случае необходимости, можно оформить свой лендинг в стиле интернет-магазина и добавить ему корзину. Кстати, скрипт локализован на русский, украинский и английский язык. А какими инструментами для создания корзины на лендинг пейдж пользуетесь вы?

Скачать исходник

52 комментария

Добавить комментарий

 

Подписывайтесь на обновления, чтобы ничего не пропустить.