Smartlanding

Скрипт корзины для лендинга

Всем, привет. Многие слышали, что я начал разрабатывать свой скрипт корзины для лендинга. На блоге уже была статья на эту тему, но я использовал готовое решение другого автора.

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

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

Назвал скрипт SmartBasket и в этой статье хочу поделиться им с вами. Если он окажется полезным и интересным для вас, то напишите мне, пожалуйста, в комментариях свой отзыв (чего не хватает конкретно вам, что улучшить, какой функционал добавить и т.д.). Так я пойму, что скрипт корзины действительно нужен и будет стимул его развивать.

Демонстрация работы скрипта

Как подключить корзину

Для подключения скрипта, скачайте архив с этой страницы и поместите папку smartbasket в корень вашего сайта.

Так как скрипт использует jQuery, то убедитесь, что он у вас подключен.

После подключения jQuery (обычно перед закрывающим тегом body) подключаем и инициализируем скрипт, там же добавим div, в котором и будет располагаться основная корзина.

<div class="smart-basket__wrapper"></div>
<script src="/smartbasket/smartbasket.min.js"></script>
<script>
    $(function () {
       $('.smart-basket__wrapper').smbasket({
         /* Настройки */
       });
    });
</script>

Не забываем подключить и таблицу стилей:

 <link rel="stylesheet" href="/smartbasket/css/smartbasket.min.css">

Настройки корзины

С подключением закончили, теперь давайте займемся настройкой.

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

Итак, первое что мы сделаем — это укажем нашему скрипту обертку вашей карточки товара.

Настройка карточки

Для этого, в месте, где инициализировали скрипт указываем класс обертки карточки в параметре 'productElement':

$(function () {
  $('.smart-basket__wrapper').smbasket({
    productElement: 'product__element',
  });
});

product__element — и есть класс моего блока с карточкой.

На следующем шаге нужно указать скрипту класс кнопки, которая будет отправлять товар в корзину, для этого воспользуемся параметром «buttonAddToBasket»:
Настройки кнопки

$(function () {
  $('.smart-basket__wrapper').smbasket({
    productElement: 'product__element',
    buttonAddToBasket: 'product__add-to-cart-button',
  });
});

product__add-to-cart-button — класс моей кнопки.

У кнопки есть несколько обязательных атрибутов, в которых и хранятся основные данные о товаре.

  • data-sb-id-or-vendor-code — артикул или id товара;
  • data-sb-product-name — название товара;
  • data-sb-product-price — цена, разделенная точкой, если есть копейки;
  • data-sb-product-quantity — количество, по умолчанию укажите 1;
  • data-sb-product-img — полный путь к картинке;

Пример кнопки

<button 
  class="product__add-to-cart-button" 
  data-sb-id-or-vendor-code="001" 
  data-sb-product-name="Iphone 10" 
  data-sb-product-price="80000" 
  data-sb-product-quantity="1" 
  data-sb-product-img="http://sprosigorod.online/img/iphone-10.png">
   <i class="fas fa-cart-plus"></i> В корзину
</button>

Обратите внимание, что все атрибуты обязательны для заполнения. Если у вас нет артикула, то просто задайте уникальный набор цифр.

Следующим параметром, который мы настроим будет маска ввода номер телефона «countryCode». По умолчанию сейчас маска для Украины с первыми цифрами '+38', но вы можете поставить, '+7' или любые другие цифры.

Настройка маски телефона

Пока можно менять только их, но, если вы хотите иметь полный контроль над всеми цифрами, напишите мне и я сделаю.

$(function () {
  $('.smart-basket__wrapper').smbasket({
    productElement: 'product__element',
    buttonAddToBasket: 'product__add-to-cart-button',
    countryCode: '+7',
  });
});

Теперь укажем валюту, которую хотим использовать в корзине. Для этого есть параметр smartBasketCurrency, в который можно положить один из значков валют:
 Настройка валюты

  • $
$(function () {
  $('.smart-basket__wrapper').smbasket({
    productElement: 'product__element',
    buttonAddToBasket: 'product__add-to-cart-button',
    countryCode: '+7',
    smartBasketCurrency: '₽',
  });
});

Если ваша карточка товара предусматривает выбор количества товара, добавляемого в корзину, то укажите класс элемента где будет располагаться блок выбора количества в параметре 'productQuantityWrapper'. Например, я хочу, чтобы выбор количества располагался в теге div с классом 'product__quantity'.

Настройка количества

$(function () {
  $('.smart-basket__wrapper').smbasket({
    productElement: 'product__element',
    buttonAddToBasket: 'product__add-to-cart-button',
    countryCode: '+7',
    smartBasketCurrency: '₽',
    productQuantityWrapper: 'product__quantity',
  });
});

Последняя настройка, которая сейчас доступна это вывод мини-корзины. То есть кнопки, которая отображает статус корзины (показывает текущее количество товара в корзине) и вызывает, при нажатии на нее, модальное окно с основной корзиной.

Мини-корзина

Я специально не задавал никаких стилей и ей, чтобы у вас был полный контроль если не над всей корзиной, то над максимальным количеством ее элементов. Принцип вывода, похож на настройку предыдущего поля. Нужно указать класс элемента, в котором отобразится кнопка в параметре 'smartBasketMinArea'.

$(function () {
  $('.smart-basket__wrapper').smbasket({
    productElement: 'product__element',
    buttonAddToBasket: 'product__add-to-cart-button',
    countryCode: '+7',
    smartBasketCurrency: '₽',
    productQuantityWrapper: 'product__quantity',
    smartBasketMinArea: 'header__basket-min'
  });
});

Настройка почты для отправки

Для настройки отправки почты, нужно открыть файл config.php, который находится в папке /smartbasket/php/

Настройка отправки

Здесь нас интересуют 2 строки:

  • const SENDER = 'sender@yandex.ru';
  • const CATCHER = 'catcher@list.ru';

SENDER — это адрес, с которого будет отправляться письмо. CATCHER — адрес на который будет приходить письмо. Обратите внимание, что адрес отправителя должен быть реальными, чтобы не возникало проблем с доставкой.

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

Надеюсь, что ничего не упустил, если что — пишите!

Если нужна видео-инструкция с описанием процесса установки настройки, напишите в комментариях, я попробую сделать.

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

13 комментариев

  • Дмитрий

    Перезалейти на облако, пожалуйста, ссылка на zip-архив не рабочая.

    Ответить
  • dimadv7

    Дмитрий, спасибо, обновил ссылку.

    Ответить
  • Максим

    dimadv7, спасибо, сначала показалось что сложно настроить, судя по количеству текста, но на деле это просто из-за того, что подробно расписано так. В реальности, если все переварить, то минут 5 настраивать. Но настроек, конечно, маловато…

    Ответить
  • dimadv7

    Максим, спасибо, буду пытаться упростить в будущем. А по настройкам, то их количество будет увеличиваться, если спрос на скрипт будет.

    Ответить
  • Андрей

    Возможно ли как-то в мини-корзине, указать свой текст, вместо иконки?

    Ответить
  • dimadv7

    Здравствуйте, пока нет. Можно только свою картинку:

    smartBasketMinIconPath: './smartbasket/img/shopping-basket-wight.svg',
    

    Но пока не писал об этой настройке, так как тестирую.

    Ответить
  • Александр

    Большое Вам спасибо! Все предельно просто и удобно. Кнопка «Сделать заказ» немного вылазит за пределы окна, текст «Корзина пуста. Вы не выбрали ни одного товара» отображается даже с выбранными товарами. Сейчас придумаю, как поправить, может, у меня у одного так.. В любом случае Вы сэкономили нам кучу времени, огромное спасибо!

    Ответить
  • dimadv7

    Александр, просто версию jquery 3 используйте и текста не будет, о том что корзина пуста. Спасибо за отзыв, проблема не только у вас, у всех, кто использует версию ниже 3.

    Ответить
  • Вася

    В демо не работает + и — кол.ва товара не увеличивает и не уменьшает, всегда стоит 1

    Ответить
  • dimadv7

    потому, что сейчас такие настройки стоят. Я проверял новую функцию, как она работает с разными параметрами. Вернул как было…

    Ответить
  • Вася

    dimadv7, ага вижу) ща буду скрипт себе ставить спасибо))

    Ответить
  • Александр

    Дмитрий, подскажите, почему не работает php скрипт отправки товаров из корзины? Сообщения просто не приходят, папка «Спам» также пуста. Все делал по инструкции, благодарю заранее!

    Ответить
  • dimadv7

    Александр, здравствуйте. Пишет, что сообщение отправлено? Оба указанных ящика реально существуют? Если да, то пробовали ли в другие почтовые адреса? Например, от mail.ru, если использовали yandex. Почитайте вот это, если используете яндекс. Попробуйте поинтересоваться у хостера, нет ли проблем с его стороны, пропускает ли он письма с бесплатных почтовых сервисов, или только привязанных к домену. Обратите внимание, что обязательна версия PHP не ниже 5.6 и использование jQuery > 3.0. Если что- пишите, будем разбираться.

    Ответить

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

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