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

06.11.22. Друзья, с радостью сообщаю, что начинаю разработку новой версии корзины (SmartBasket). Теперь это будет каталог товаров с удобным редактированием из админки. Многие просили упростить этот процесс и сделать более наглядным.

В связи с этим к вам есть небольшая просьба. Если у вас есть какие-то идеи, советы или пожелания – добавляйтесь в телеграм-чат.  Так я пойму, что Smartbasket действительно кому-то нужен и есть смысл развивать проект. Будем голосовать за новый функционал, общаться и вместе делать корзину лучше. Хочется делать продукт не «в стол», а чтобы он реально было полезен людям.

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

Скрипт, который описан в статье ниже больше не поддерживается.

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

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

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

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

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

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

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

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

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

<div class="smart-basket__wrapper"></div>
<script src="./smartbasket/js/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-element',
  });
});

Теперь при клике на элемент с размером из "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,
  });
});

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

Пользовательское соглашение

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

agreement: {
 isRequired: true,
 isChecked: true,
 isLink: 'https://smartlanding.biz'
}

Где:

  • isRequired - включает или отключает поле;
  • isChecked - автоматически делает отмеченным поле;
  • isLink - ссылка на соглашение.

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

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

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

06.11.22. Друзья, с радостью сообщаю, что начинаю разработку новой версии корзины (SmartBasket). Теперь это будет каталог товаров с удобным редактированием из админки. Многие просили упростить этот процесс и сделать более наглядным.

В связи с этим к вам есть небольшая просьба. Если у вас есть какие-то идеи, советы или пожелания – добавляйтесь в телеграм-чат.  Так я пойму, что Smartbasket действительно кому-то нужен и есть смысл развивать проект. Будем голосовать за новый функционал, общаться и вместе делать корзину лучше. Хочется делать продукт не «в стол», а чтобы он реально было полезен людям.

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

Скрипт, который описан в статье выше больше не поддерживается.

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

  1. Alex

    Дмитрий, с настройкой почты не получается, как правильно настроить отправку почты?

  2. Никита

    Добрый день! Спасибо большое за корзину. Я делаю небольшой проект по инжинирингу данных и это именно то, что нужно.

    Но вот беда: при увеличении/уменьшении количества товаров напрямую из корзины, не пересчитывается количество товаров (sbQuantity) и (sbPriceCommon) у каждого элемента в коллекции e в функции commonResult. И у t в функции updateBasket то же самое.

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

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

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

    ПС: Оставлю комментарий, если кто-то ещё упорется как я. Всё нормально и с вёрсткой и скрипт прекрасно работает.

    Вот это место: data-sb-id-or-vendor-code="{{ el.id }}"

    Дело в том, что айдишник товара у меня в базе - число и jinja в шаблоне "{{ el.id }}" подставляет в этот параметр именно число, а не строку. И из-за этого всё ломается.

    Приведение к строке в шаблоне не помогло "{{ el.id|string }}" .
    Но помог вариант с добавлением пробела "{{ el.id|string + ' '}}".

    Но обнаружил, что джаваскрипт это довольно забавно и нашёл эту строчку.

    let r = t(this).data("sbId")

    Мои полдня мучений закончились :D

    Смотрите, как теперь могу:
    let r = t(this).data("sbId").toString()

    1. Антон

      Никита, Спасибо за помощь)

  3. Az

    А как быть если цена с копейками?

  4. Богдан

    не могу разробраться как сделать
    <?php
    require_once($_SERVER['DOCUMENT_ROOT'] . '/smartbasket/php/phpmailer/phpmailer.php');

    // *** SMTP *** //

    require_once($_SERVER['DOCUMENT_ROOT'] . '/smartbasket/php/phpmailer/smtp.php');
    const HOST = 'smtp.zzz.com.ua';
    const LOGIN = 'admim8@vaki6.zzz.com.ua';
    const PASS = 'qazXSW45';
    const PORT = '465';

    // *** /SMTP *** //

    const SENDER = 'admim8@vaki6.zzz.com.ua';
    const CATCHER = 'admim8@vaki6.zzz.com.ua';
    const SUBJECT = 'Заявка с сайта';
    const CHARSET = 'UTF-8';

  5. Андрей

    Дмитрий здравствуйте, а можно ли как то расширить количество задаваемых параметров. Цена не зависит от этих параметров. То есть цена у одной единицы товара всегда одна, а вот сопутствующих параметров много. Но все они идут как описание к товару. Скажите пожалуйста, как сложно добавить такой функционал?

    1. Дмитрий Давыдов

      Здравствуйте, сложность - понятие относительное. Но скрипт не поддерживается, так как я потерял исходники, поэтому, в планах делать новую версию. Когда "дойдут" руки, сообщу об этом на блоге. Скорее всего это будет уже готовый модуль без необходимости прописывать data-атрибуты, а будет админка и визуальный редактор для наполнения товара, как в Битриксе или Webasyst.

  6. Виктор

    Выдает ошибку Uncaught TypeError: $(...).smbasket is not a function
    И никак не могу побороть :(
    Кто-то сталкивался или у всех всё получилось?

  7. Max

    Здравствуйте, подскажите пожалуйста, как убрать скролл при появлении модального окна об успешном добавлении товара в корзину

  8. ясно

    Чекбоксы бы с возможностью выбора нескольких вариантов сразу, + в цену за каждый чекбокс.

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