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

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

  • 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 *** //

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

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

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

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

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

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

  • Вячеслав

    Классная корзина.
    Скиньте посадочную страницу с 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 указываете.

    Ответить

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

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