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

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

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

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

Назвал скрипт 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 - ссылка на соглашение.

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

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

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

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

  1. Отличная вещь. Спасибо за скрипт! А получится туда добавить как-то скидку в % от суммы заказа и скидку от самовывоза? Поставил галочку Самовывоз, -10% пересчиталось.

    1. Андрей, здравствуйте. Пока такой настройки не планируется. Это же простой скрипт. Для полноценной корзины лучше CMS использовать какую-нибудь.

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

  2. Решил проблему что скрипт не пересчитывал общую стоимость при изменении количества товара. Оказалось айди товара должен начинаться с 0. Автор, добавьте это в тему, уверен я не один такой

    1. Александр, нет такой проблемы, что-то не так делаете. Где-то или какие-то лишние передает данные, которых нет на старнице, или забыли что-то передать скрипту. Из-за этого сбой происходит какой-то.Даже в демо есть товыры, в которых id не с 0 начинается. Это могут быть буквы или цифры. Любые.

  3. Подскажите пожалуйста где нужно подправить чтоб окно уведомления о принятом заказе не закрывалось так быстро, чтобы увеличить время его закрытия до 15 секунд?
    Спасибо.

    1. Василий, настройки такой нет, а навскидку не скажу, но можно один из settimeoutов посмотреть. Посмотрите, там их всего штук 5.

    2. dimadv7, я смотрел но к сожалению так и не нашел ничего:
      Как я понял за данное действие отвечает єтот кусок кода:
      sendCart: function() {
      let s = t("#smart-basket__form")[0],
      r = new FormData(s);
      t.ajax({
      url: "/smartbasket/php/smartbasket.php",
      type: "POST",
      data: r,
      processData: !1,
      contentType: !1,
      beforeSend: function() {},
      success: function(t) {},
      complete: function(s) {
      t(".smart-basket__product-item:not(:first)").remove();
      let r = e.getProducts() || {};
      e.commonResult(r, "", "submitEvent"), localStorage.clear(), "" !== a.yaCounter.counterID && "" !== a.yaCounter.targetID && ym(a.yaCounter.counterID, "reachGoal", a.yaCounter.targetID), setTimeout(() => {
      t(".smart-basket").toggleClass("smart-basket_active"),
      t("body").css("overflow", "auto")
      }, 3e3), setTimeout(() => {
      r = e.getProducts() || {},
      e.commonResult(r, "updateCommonResult"),
      e.getSmartBasketMinState(r, "updateSmartBasketMin"),
      e.showProducts(r)
      }, 4e3)
      }
      })
      },
      Но я не нашел в нем куда можно вписать значения.

    3. Василий, "4e3" и "3e3" это, скорее всего, после обфускатора так цифры зашифровались. Попробуйте их менять.

  4. Привет, отличное решение. Для маски номера не хватает: при вводе первой цифры 8, проставляет +7 и ставит курсор за скобку

    1. Илья, привет, настройка маски предусмотрена в скрипте.

  5. А можно полный скрипт с index файлом как у вас на демо. Не совсем ясен момент организации каталога товаров.

    1. Сарра, на странице с демо, можно же все посмотреть, вызвав инструменты разработчика в браузере нажав f12 или открыть кода при помощи комбинации клавиш crtl+u

  6. Данные не приходят на почту, хотя вроде всё подключил

    1. У меня - тоже.

  7. Подскажите, вот если поменять вид и сделать не кнопками размер как в примере, в вот типа выпадающим списком

    Пицца «Ветчина и грибы»
    320 Р

    32 см
    26 см
    22 см

    то скрипт уже не работает( в чём проблема, подскажите! заранее спасибо!

    1. Артем, потому, что в логике реакция на клик, а не change, поэтому не работает.

  8. Крутая корзина! Но есть куча вопросов и не только у меня по поводу прихода письма на почту, было б круто увидеть полную видео-инструкцию с описанием процесса установки настройки! Спасибо)

    1. Александр, проверяйте пути, проверяйте все ли сделано по инструкции. Читайте эту статью, если не отправляются данные. Откройте консоль разработчика и устраните все ошибки.

  9. Здравствуйте, Дмитрий!
    Подскажите, пожалуйста - можно ли сделать так, чтобы, ну, скажем: "все пиццы были в одном "product__element"?
    То есть, наряду с "размером", был еще "вид пиццы" со сменой картинки.
    ?
    То, что Вы сделали и так - круто, просто мне немного не хватает под то, что хочу сделать - очень похоже на "вариативные товары" Вукоммерца.

    1. Александр, если переписывать всю логику скрипт заново, то можно сделать все.

  10. smbasket not function все подключено

  11. Все подключил как в примере, и на выходе ошибка
    Cannot read property 'isRequired' of undefined

    Как исправить ? проект чистый кроме этой библиотеки нет ничего, создал исключительно чтоб проверить.. Но не работает

    1. Oleg, добавьте в настройки:

      agreement: {
      isRequired: false,
      isChecked: flase,
      }
      
  12. Вопрос "можно ли сделать так, чтобы, ну, скажем: «все пиццы были в одном «product__element»?" порешал табами.

    1. Александр, здорово)

  13. подскажите как добавить тут два поля одно просто для пожеланий а второе выбрать время доставки и день

    1. Ян, в смысле как? при помощи JS создать поля, добавить в форму, потом при помощи PHP принять и обработать эти поля и добавить значения в функцию для отправки письма.

    2. Ян, смогли разобраться?

      Тоже интересно, нужно добавить поля

  14. Да разобрался если хотите поле слева то

    let s1 = t("").attr({
    class: "smart-basket__user-form"
    }),
    r1 = t("").attr({
    class: "smart-basket__user-info"
    }),
    n1 = t("").attr({
    class: "smart-basket__input-wrapper"
    }),
    i1 = t("").attr({
    class: "smart-basket__user-input mypole",
    type: "text",
    placeholder: "Укажите адресс доставки",
    name: "userCity",
    required: !0
    });
    n.append(i1);

    а для правого поля вот код

    let o1 = t("").attr({
    class: "smart-basket__input-wrapper"
    }),
    l1 = t("").attr({
    class: "smart-basket__user-input mypole",
    type: "tel",
    placeholder: "Укажите время",
    name: "userTime",
    required: a.telIsRequired
    }).mask("00:00");
    o.append(l1);

    ну и в формах делаете

    if (isset($_POST['userCity']) ) {
    if(empty($_POST['userCity'])) {
    echo 'notCity';
    } else {
    $adres = "Адрес: " . strip_tags($_POST['userCity']) . "; ";
    }
    }

    if (isset($_POST['userTime']) ) {
    if(empty($_POST['userTime'])) {
    echo 'notTime';
    } else {
    $time = "Время: " . strip_tags($_POST['userTime']) . "; ";
    }
    }

    ' . $name . $adres . $time . $tel . $finalPrice .'

    и все работает)

  15. Здравствуйте!
    Подскажите такой момент: можно ли сделать вывод товаров в корзину, которая статичная и находится под блоком с товарами, а не в отдельном попапе? У меня в проекте планируется простой вывод только названия товара, кол-во, цена и итоговая цена всех товаров.

    1. Cybborgus, здравствуйте. Можем попробовать разработать такой модуль. Напишите мне в ВК или Телеграм.

  16. Здравствуйте!
    Как сделать так чтобы при нажатии на кнопку "В корзину", число товара в нем увеличивалась, а не выходило попап окно "товар уже добавлен"

    1. Алмаз, здравствуйте, нет такой возможности. Увеличивать количество, после добавления в корзину, можно только в самой корзине.

  17. Дмитрий, Спасибо за замечательный скрипт.
    Подскажите, пожалуйста, как реализовать функцию, которой ему очень не хватает: платная доставка и самовывоз.
    Было бы здорово в настройка указать стоимость доставки по городу (к примеру, 300 рублей) - единую цену. И добавить возможность "Самовывоза". Если покупатель выбирает Самовывоз, то общая стоимость не изменяется, а если выбирает "Доставка", то в корзине появляется соответствующий пункт и добавляется стоимость +300 рублей.
    Спасибо Вам еще раз за скрипт.

  18. Никак не отправляется на почту, и с php а также с smtp пробывал никак

  19. _https://www.komtet.ru/lib/plangs/php/proverka-raboty-funkcii-mail-dlya-php, с этого сайта код взял на хостинг загрузил и сообщения приходят а с вашим скриптом никак. Заранее спасибо

    1. Jeryn, а какие ошибки в консоли? Версия php > 7? jQuery > 3?

  20. productSize: 'product__size',
    Разве не productSize: 'product__size-element', должно быть?

    1. Pirate, совершенно верно. Спасибо. Поправил.

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

 

© 2014 — 2020, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности