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

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

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

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

Назвал скрипт 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 — полный путь к картинке;

Не обязательные атрибуты:

  • data-sb-product-size — размер. Задается, если вы используете опцию вывода размера в карточке товара. Подробнее о том, как это сделать в инструкции ниже.

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

<button 
  class="product__add-to-cart-button" 
  data-sb-id-or-vendor-code="0032pz" 
  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'.

<div class="product__quantity"></div>

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

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

После добавления параметра 'productQuantityWrapper' cо значением 'product__quantity', кнопки выбора количества автоматически появятся на сайте в указанном блоке.

Выбор размера в карточке

Недавно появилась возможность добавлять размер, который в свою очередь, может влиять и на цену. Например, в интернет-магазине продают 3 размера пиццы — 32 см, 26 см или 16 см. От радиуса зависит и цена. Вы хотите, чтобы в карточке пользователь мог выбрать нужный размер.

Выбор размера

Давайте я немного поясню суть работы. Вот так выглядит верстка блока с выбором размера у меня:

<div class="product__size">
					
 <div class="product__size-element" data-sb-curent-price="320" data-sb-curent-size="32" data-sb-curent-id-or-vendor-code="0032pz">32 см</div>
 <div class="product__size-element" data-sb-curent-price="260" data-sb-curent-size="26" data-sb-curent-id-or-vendor-code="0026pz">26 см</div>
 <div class="product__size-element" data-sb-curent-price="220" data-sb-curent-size="22" data-sb-curent-id-or-vendor-code="0022pz">22 см</div>
					
</div>

Для работы скрипта здесь важны атрибуты «data-sb-curent-price» и «data-sb-curent-size» и «data-sb-curent-id-or-vendor-code» так как в них содержаться параметры для подстановки цены, размера и артикула. То есть при размере 32 см, цена пиццы 320 рублей, при размере 22 см — цена пиццы 220 рублей и т.д. Если цена при любом размере остается одинаковой, просто укажите везде одну и туже стоимость. Аналогичная ситуация и с артикулом. Или укажите везде одинаковый, или вообще не используйте атрибут «data-sb-curent-id-or-vendor-code», если не планируете давать возможность добавлять один и тот же товар с разными характеристиками.

Чтобы цена в карточке менялась, нужно обернуть число с ценой в отдельный блок, например, span, со своим классом. У меня это выглядит так:

<div class="product__price"><span class="product__price-number">320</span> ₽</div>

Теперь класс обертки «product__size» для блока с размерами и класс обертки цены «product__price-number» нужно передать в настройки скрипта:

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

    productPrice: 'product__price-number',
    productSize: 'product__size',
  });
});

Теперь при клике на элемент с размером из «data-sb-curent-price» подставится цена в «product__price-number». Если не совсем понятно, напишите мне, попробую разъяснить.

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

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

Я специально не задавал никаких стилей и ей, чтобы у вас был полный контроль если не над всей корзиной, то над максимальным количеством ее элементов. Принцип вывода, похож на настройку предыдущего поля. Нужно указать класс элемента, в котором отобразится кнопка в параметре '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'
  });
});

Кроме того, у вас есть возможность задать текст в кнопке, перед иконкой корзины и изменить саму иконку. Делается это при помощи параметров smartBasketMinText и smartBasketMinIconPath.

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

    smartBasketMinText: 'Корзина: ',
    smartBasketMinIconPath: '/smartbasket/img/shopping-basket-wight.svg',
  });
});

Для настройки отступов и внешнего вида, иконка и текст обернуты в теги с классами «smart-basket__min-icon» и «smart-basket__min-text».

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

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

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

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

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

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

SMTP

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

// *** SMTP *** //
require_once($_SERVER['DOCUMENT_ROOT'] . '/smartbasket/php/phpmailer/smtp.php');
const HOST = '';
const LOGIN = '';
const PASS = '';
const PORT = '';
// *** /SMTP *** //

Раскомментируйте эти строки и заполните в соответствии с вашим почтовым сервисом. Возникнут вопросы — пишите.

Обязательность полей для заполнения пользователем

В новом обновлении, как вы и просили, добавил еще одно поле для связи (email), теперь, если кому-то накладно звонить в другие регионы, они могут сделать обязательным поле для заполнения почты.
По умолчанию обязательным оставил только телефон, но вы можете это исправить в настройках. Для этого предусмотрено 2 параметра:

  • telIsRequired
  • emailIsRequired

Чтобы сделать обязательным поле, поставьте ему значение «true». Чтобы сделать необязательным, укажите «false». Все это выглядеть может так:

$(function () {
  $('.smart-basket__wrapper').smbasket({
    productElement: 'product__element',
    buttonAddToBasket: 'product__add-to-cart-button',
    countryCode: '+7',
    smartBasketCurrency: '₽',
    productQuantityWrapper: 'product__quantity',
    smartBasketMinArea: 'header__basket-min',
    smartBasketMinText: 'Корзина: ',
    smartBasketMinIconPath: '/smartbasket/img/shopping-basket-wight.svg',

    telIsRequired: false,
    emailIsRequired: true,
  });
});

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

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

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

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

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

  • Вячеслав

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

    И почему то не работают кнопки, не выходит корзина. Сделал все по описанию

    Спасибо

    Ответить
  • dimadv7

    Вячеслав. Есть ли ошибки в консоли? На странице с demo можно посмотреть все стили, скопировать и т.д.

    Ответить
  • Emmure

    Привет! В первую очередь, огромное спасибо за твой труд! Скрипт отличный, настроил за 2 минуты. Выше был вопрос, но ответ на него не нашел. Как можно вывести в мини-корзине не кол-во товаров, общую стоимость? Заранее благодарю!

    Ответить
  • dimadv7

    Emmere, такой возможности сейчас нет.

    Ответить
  • Леонид

    Здравствуйте Дмитрий!
    Большое спасибо за скрипт!
    Долго мучился . Начал учить php. Перевёл всё в windows 1251.
    При деминимизации файлов min скрипт переставал работать
    нашёл ошибку и скрипт заработал.
    В форме заказа упростил телефон на e-mail.
    Результат можно посмотреть на __stomakit.ru

    Но есть некоторые моменты которые мне не поправить.
    JS ещё не начал изучать.
    Было бы неплохо что бы в форме заказа было не только телефон или маил , а и то и другое. причём проверка наличия телефона не обязательна. Теперь про кнопку «В корзину» если её вставлять отдельно
    без класса продукт_куантити в ячейку таблицы, то в форму заказа записывается ноль или пустота . к сожалению я несколько раз пытался писать пример кода что бы было понятно , но код почему то вырезается в этом чате и получалось не понятно.
    На моём сайте пришлось на странице «поиск по базе» , где выводились результаты поиска в таблицу, выводить результаты в виде Вашего скрипта и при большом количестве наименований клиенту неудобно просматривать результаты поиска (тем более с мобильного телефона).
    Попробуйте у себя прописать кнопку «В корзину » отдельно от всего и поймёте о чём я пишу.

    И ещё одна просьба . Подскажите что делать. Сайт в кодировке 1251, все ваши файлы я тоже исправил на 1251 кроме phpmailer. И по этому письма приходят не читабельными. Это тоже не большая проблема.
    Я написал программку которая читает заказ и по ID записывает его в базу. Но имя которое пишу по русски пока не прочитать правильно.
    В интернете вроде пишут что можно настроить установив в настройках
    charset = windows-1251 но почему то не работает

    Ещё раз большое спасибо за скрипт.

    Ответить
  • senditoy

    Если товары тянутся ajax, то не навешиваются события скрипта, и второй момент, если пользователь повторно кликает в корзину, то правильнее было бы просто увеличить кол-во, а не выдавать сообщение о том, что товар в корзине… Но в общем прикольно получилось, но все равно перепилить придется некоторые моменты мне)

    Ответить
  • dimadv7

    Леонид, в файле 'config.php' поменяли кодировку в строке?

    const CHARSET = 'UTF-8';
    

    Вставляйте с data-sb-product-quantity=»1", она для того и нужна, чтобы передавать количество. В вашем случае 1. В чем проблема-то? Это кроме количества никак на страницу не влияет. Он не вырезается а преобразовывается в 0.

    Зачем мне вставлять в отдельности от всего? Это скрипт корзины и простенького магазина.

    Ответить
  • Артём

    — Не могу понять — дублируются блок изменения количества и вывод корзины — заказы. Скрипт срабатывает получается несколько раз, при инициализации. Сам в js не силен, благодарю за помощь
    smart-basket__quantity-item
    smart-basket__min

    Ответить
  • dimadv7

    Артем, странное поведение, jquery > 3 версии, ксласс, в который выводиться мини-корзина — 1 раз на сайте встречается?

    Ответить
  • Артём

    Разобрался — нужно было совсем убрать класс враппер для корзины, оставить только мини в хедере и продукт-лист

    Ответить
  • dimadv7

    Артем, отлично)

    Ответить
  • Антон

    Подскажите как вывести корзину на отдельную страницу?

    Ответить
  • dimadv7

    Антон, не понял вопроса вашего

    Ответить
  • Антон

    dimadv7, Сделать так, что-бы товары в корзине выводились не в окне. А на определенной странице

    Ответить
  • dimadv7

    Антон, а, понял. Нет, такой возможности нет и не будет. Скрипт для других целей.

    Ответить
  • Игорь

    Добрый вечер, Дмитрий!
    Скажите, пожалуйста, какую почту нужно писать сюда?
    const SENDER = 'sender@yandex.ru';

    Ответить
  • dimadv7

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

    Ответить
  • Игорь

    Добрый день, Дмитрий!
    Спасибо большое за подробное описание установки корзины и за ответ!
    У меня всё отлично работает!
    Хотел спросить ещё один момент… Мне нужно, чтобы, кроме имени и телефона, был ещё и emal (или ещё что-то, к примеру).
    Как это реализовать? Подскажите, пожалуйста

    Ответить
  • dimadv7

    Здравствуйте, Игорь. Пока такой функции нет, и возможности добавить еще поля, пока, не получится.

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

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

    Ответить
  • Артём

    Дмитрий, подскажите как добавить возможность вызова корзины при клике на другой элемент. ( В jq пока новичок, обычный on.click не работает, предположительно из-за отсутсвия элементов в DOM на момент вызова)

    Ответить
  • dimadv7

    Артём, такой возможности не предусмотрено. Скрип срабатывает либо на кнопку в модальном окне, предлагающей перейти в корзину, либо по самой мини-корзине.

    Ответить
  • oleg

    Отличная корзина, создал проект полностью по своему желанию, большое человеческое спасибо :)

    Ответить
  • dimadv7

    Oleg, спасибо за оценку. Рад, что пригодился скрипт.

    Ответить
  • Семен

    Спасибо за корзину!
    Подскажите пожалуйста, как добавить второй параметр выбора в примере с пиццей (чтобы помимо размера, можно было выбрать например тесто).
    Пицца «Креветки и грибы»
    Размер: 16 [26] 32
    Тесто: [Сливочное] Томатное , соответственно отобразить выбор в корзине.
    __https://ibb.co/R0tJXW6 — наглядный пример. Заранее благодарю!

    Ответить
  • dimadv7

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

    Ответить
  • Светлана

    ссылка на архив битая

    Ответить
  • dimadv7

    Светлана, да нет, скачал нормально только что.

    Ответить
  • Даниил

    при суммировании товаров пишет NaN

    Ответить
  • Даниил

    Еще не отправляется на мэил заказ

    Ответить
  • dimadv7

    Данил, значит неправильно настройку произвели, если NAN. Пройдитесь внимательно еще раз по ним.

    Ответить
  • Даниил

    dimadv7, где именно это возможно? И можете скинуть настройку SMTP просто у меня не получается…
    Написано ожидайте звонка и ничего не приходит на Mail.

    Ответить
  • dimadv7

    Даниил,

    «Где именно это возможно?»

    Что конкретно? Пройтись по настройкам. В статье выше это возможно. Если NAN в цене, то скорее всего где-то не передали дата атрибут с ценой.

    Вы тестируете на хостинге или на виртуальном сервере? PHP > 7? Хостинг не бесплатный, не тестовый период? Jquery > 3.0? Ваш хостер позволяет отправлять на бесплатные почтовые ящики, не привязанные к сайту?

    Ответить
  • Ирина

    Скачать не получается … turbobit не пускает

    Ответить
  • dimadv7

    Ирина, здравствуйте. Куда турбобит не пускает? Хотя… я убрал ссылку и сделал прямое скачивание. Попробуйте еще раз.

    Ответить
  • Руслан

    день добрый
    а если к примеру добавить еще опций и что бы сумма суммировалась такое возможно сделать на вашем скрипте?

    Ответить
  • dimadv7

    Руслан, здравствуйте, сделать возможно все, но целесообразности в этом нет. Это простой скрипт на клиенте, без торговых предложений и подобного. Если нужна полноценная корзина, лучше воспользоваться какой-нибудь CMS. Webasyst, Битрикс и т.д., там можно сделать профессиональный магазин, с множеством настроек. А если сюда добавлять, то слишком тяжело поддерживать будет его. У людей уже слишком много ошибок получается. Нужно переосмыслить и как-то упростить.

    Ответить
  • Руслан

    понимаю
    сам на фрилансе работаю
    но заметил среди клиентов, что иногда просто не найти полезного скрипта для организации простого сайта с корзиной.
    К примеру, много сайтов (онлайн доставка еды, пицерии и т.д.) нуждаются в подобном, с одном стороны если не будет грузить систему и если еще применить хорошую верстку то сайт будет летать и иметь функционал корзины. У меня сейчас есть несколько клиентом на подобный функционал. планирую сделать на новом Modx evo, о не хочется использовать дополнения, они все тяжелые

    Ответить
  • dimadv7

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

    Ответить
  • Алена

    Есть ли возможность до 1000 руб. в заказе скрыть снопку Сделать заказ?

    Ответить
  • dimadv7

    Алена, здравствуйте. Нет, такой функции нет.

    Ответить
  • Мику

    Доброго дня!
    Отличный скрипт, спасибо!
    Но почему-то не идет отправка заказа с сайта.
    Подскажите в чем может быть дело?

    Ответить
  • Ирина

    Добрый день! Все работает отлично, спасибо! Для простых решений — то, что нужно! Только вот мини-корзина не хочет никак показываться. Подскажите, где стоит поискать проблему?

    Ответить
  • Анна

    Добрый день!
    Спасибо большое за скрипт!
    Такой вопрос: если рядом с выодом количества товара в корзине вверху сайта (smartBasketMinArea) написать «Оформить заказ» — то что поставить в обработчике этой ссылки, чтобы открылось окно корзины?
    onclick=»a.getModalBasket();» ?
    Не находит ни а, ни getModalBasket

    Ответить
  • dimadv7

    Мику, здравствуй. На реальном или виртуальном сервере тестируешь? Если на реальном, то проверь нет ли ошибок в консоли. Если в консоли все ок, то убедись, что используешь PHP > 7.0, должен работать и на 5.6, но я не тестировал. JQuery > 3. Не тестовый ли период хостинга, оплаченный ли, работает ли php вообще на хостинге? позволяет ли хостер отправлять на бесплатные почтовые ящики письма, или только на привязанные к домену?

    проверь все это, тогда будем дальше разбираться. Извиняюсь, что долго не отвечал. Уезжал, не мог помочь сразу.

    Ответить
  • dimadv7

    Ирина, должна показываться, класс для мини-корзины в верстку и в настройках добавили? Он уникален на странице?

    Ответить

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

 

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