Скрипт корзины для 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 - количество

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

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

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 13

  1. Жанатбек

    Я так понял письмо отправляет от salejs?
    Письмо пришло с сервиса robot@salejs.com

    • Дмитрий

      Похоже на та) Мне тоже так приходят.

  2. Сергей

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

    • dimadv7

      Скиньте ссылку, на сайт, куда вы залили, гляну.

    • dimadv7

      А, ну понял, сайт автора 502 ошибку выдает, а там лежали нужные для работы файлы. __http://salejs.com

    • dimadv7

      Уже все в порядке, вроде как

  3. Сергей

    Я так понял,если в дальнейшем будут проблемы с сайтом автора, где лежат файлы,то скрипт работать не будет.База находится по адресу __http://salejs.com/v1/.А можно как то отвязаться от сайта автора и создать отдельно файл куда поместить все данные?

    • dimadv7

      Да выходит так. Если есть желание попробуйте автору задать этот вопрос.

    • sqrt361

      Можно прописать baseUrl: 'имя вашего домена' при инициализации, но проблема в том, что серверного файла отвечающего за отправку в исходнике нет. Файл лежит на хостинге у автора и доступа к нему нет. Это конечно легко исправить, но если автор не вложил этот файл в исходники, то скорее всего на это есть причина.

  4. Игорь

    А данная технология работы с корзиной подходит для работы с сайтами, которые созданы в Adobe Muse ?

    • dimadv7

      Чем отличаются сайты сделанные при помощи adobe muse?

  5. Игорь

    Так и не понял по комментариям, скрипт работает или нет? Скачивать и устанавливать стоит?

    • dimadv7

      Работает, просто были проблемы с сайтом у разработчика, на котором расположены часть скриптов, поэтому, временно, был недоступен.

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