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

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

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

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

Назвал скрипт 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',
  });
});

Теперь при клике на элемент с размером из "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 - ссылка на соглашение.

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

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

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

281 комментарий

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    3. Даниил,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    2. dimadv7, Да, класс в верстке есть, и он уникален.

    3. Ирина, скиньте ссылку на сайт, гляну.

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

  14. Вечер добрый. В первую очередь, хочу Вас поблагодарить за весь ваш труд. Это реально нужный софт для простеньких сайтов.
    Но возникла небольшая сложность)
    Хочу сделать чтобы при выборе количества товара, каждое нажатие на кнопку, добавляло/отнимало не по 1-ому, а скажем 10-20. Пересмотрел скрипт и то ли я не внимательный и не нашёл, то ли ещё что то))) Подскажите пожалуйста. Заранее благодарен)

    1. Danny, здравствуйте, такой возможности в скрипте действительно нет, но можно же продавать сразу по 10-20 штук (комплектами). То есть увеличивая на 1 будет увеличиваться на 10/20 штук общее кол-во.

  15. Не отправляется заказ на почту. Всё работает, при совершении заказа появляется надпись "Заказ принят ожидайте звонка", но на почту ничего не приходит. Пробовала разные почты, реальный хостинг и локальный. PHP > 7.0, JQuery > 3. Любая другая почтовая форма отправляет на отлично.
    Что я делаю не так? Понимаю, что проблема скорее всего в PHP.
    Три файла в папке "PHP"->"phpmailer" (class.phpmailer, phpmailer и smtp)оставляю без изменений, в файле "smartbasket.php" редактирую только путь к "config.php", и в самом "config.php":
    редактирую путь к "phpmailer.php" и "smtp.php", раскомментирую SMTP и вставляю свои значения
    const HOST = 'smtp.gmail.com
    const LOGIN = 'test@gmail.com';
    const PASS = 'test1234';
    const PORT = '587';
    прописываю в SENDER=test@gmail.com, в CATCHER = 'test@mail.ru'

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

    2. Ксения, исправьте адрес в "isLink: 'https://smartlanding.biz'," на свой. Ну, и вообще - пути посмотрите. Автор указал: всё должно быть в папке "smartbasket".
      У меня сначала тоже не получилось письма отправлять... :)

  16. dimadv7, спасибо за ответ - я читала всю ветку комментариев, видела этот совет неоднократно, все проверила - проблема была не в хостинге, не в коде и не в ошибках.
    У меня получилось!! Напишу, возможно кому-то поможет, у кого проблемы с отправкой почты. Как оказалось, в моем случае проблема была связана с безопасностью аккаунта гугла. Оказалось, что гугл блокировал сообщения в целях безопасности - что-то типа "кто-то пытался войти в ваш аккаунт" - ведь механизм отправки писем через smtp предполагает доступ к аккаунту, мы же прописываем логин и пароль от почты гмейл. Чтобы вылечить это надо перейти на https://myaccount.google.com/security
    и включить "Ненадежные приложения разрешены".
    После этого почта начала приходить.
    Правда почему-то не отображаются картинки.

    1. Ксения, спасибо за то, что не остались равнодушны и отписались по поводу проблемы. Действительно это может помочь другим. Я сам не активный пользователь gmail, поэтому с проблемой не сталкивался. Поэтому не мог, к сжалению предвидеть такую ситуацию. Еще раз спасибо вам.

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

    Допустим есть товар iPhone X, у меня его на складе 32 штуки, как можно ограничить количество товара в корзине? Допустим, чтобы я не получил заказ на 53 айфона.

    Сам товар придуман из головы и у меня такой товар, который можно продавать по 53 штуки =)

    1. Здравствуйте, конечно есть такой момент, но это и будет ограничение всех скриптов, написанных на клиенте без базы данных. Чтобы иметь все функции полноценной корзины, нужен полноценный интернет-магазин. А это просто что-то легкое, конечно же, не универсальное решение, но которое решает конкретные задачи.

      К сожалению без привязке к БД, хоть какой, такой функции как вам нужна быть не может, а если ее делать, то это повод задуматься уже и о выгрузки товаров, например из xml, повод давать готовую структуру и внешний вид самого каталога (списка товаров) но это все ограничит возможности внедрения в свой дизайн, а это все, не задачи конкретно скрипта. Цель была сделать простой, минимальный функционал корзины на лендинге, никак не ограничивая и ничего не навязывая конкретному дизайну и конкретному случаю.

      Если нужно больше, то это тогда нужно обратиться к CMS позволяющей реализовать магазин или писать его самому под свои нужды.

    2. dimadv7, а к примеру у меня 20 позиций, зачем мне цмска? Если ваше решение идеально подходит, как-то можно ограничить колво товара? Если ставить лимиты руками

    3. Денис, без базы данных - никак, ведь придется вести учёт и перезаписывать остаток. Например, у вас 20 товаров, купили 5, придется перезаписать наличие, а это только с БД можно делать. Чтобы иметь возможность, хранить, перезаписывать и получать текущее значение.

    4. dimadv7, А если есть база? У нас следующая система:

      В 1С хранятся все остатки, на сайт информация подгружается из MySQL, оттуда берутся все данные, что нужны:
      - название
      - артикул
      - цена
      - кол-во
      - ссылка на картинку

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

    5. Денис, ну не получится сделать без перезаписи значения, которое осталось на текущий момент))) То есть, например, сделали мы ограничение в скрипте, придумали такую настройку. Предположим 20 штук iphone SE, кто-то купил 5, и остаток не перезапишется автоматически. Для следующего покупателя тоже останется возможность купить 20 смартфонов, так как остаток - это просто текст в js никак не взаимодействующий с сервером для возможности перезаписать значение.

    6. dimadv7, Так дело в том, что и не надо, чтобы они автоматом списывались. Остатки обновляются несколько раз в день менеджерами вручную, через проводки в программе.

      В общем ладно, я уверен, что можно, интернет есть, думаю разберусь.

    7. Денис, то есть вам нужно ограничить только максимальное количество?

    8. dimadv7, именно, чтобы человек не мог заказать товара больше, чем его есть в базе и все.

    9. Денис. Опять не понял, например, у вас в базе 20 штук, мы указали в скрипте 20. Я купил 10, а через 15 минут Владимир, из комментариев ниже, покупает 15, ведь у нас в скрипте 20 стоит. Хотя у вас нет этого количества сейчас, так как я 10 купил. Как быть тогда? Сразу полсе того, как купил вам придется бежать на сайт, открывать код и менять цифру в нем на 10, чтобы Владимир не смог купить 15 штук. Так только? Ну, можно, думаю, сделать такое для очень "терпеливых" и готовых при покупке открывать код и менять цифру. Если хотите я не сжатый вам исходник скину, чтобы легче было разбираться, просто у меня сейчас совсем времени нет на скритп, ну и функция не очень популярная, так как обычно люди не готовы заниматься этим, а переходят на полноценные магазины, когда потребность такая возникает.

    10. dimadv7, Да вот именно, те у кого десятки высокомаржинальных продаж в день закажут или сделают себе полноценный сайт на цмске, на той же Могуте или Опенкарте (Битриксе, да чем угодно).

      А вот этот скрипт некая заплатка для небольших проектов и лендингов и прочей дичи, как у меня.

      Я конечно не Ванга, но 99% сайтов с твоей корзиной если и приносят заказы, то не более 1-2. Да и товара у них ограниченное количество.

    11. Денис, я просто не совсем понимаю, тогда, зачем такая возможность нужна?))

    12. Чтобы люди на этапе корзины видели, что количество товара ограничено, плюс как работает скрипт по сути?

      Один раз товар закинул, в корзине выбрал количество. Верно? Верно. Ну вот и навыбирает 2 десятка товара, которого у меня на складе 2 штуки всего. Что дальше? Делать новый заказ, переделывать старый и т.д. Нам надо так, чтобы максимально меньше общаться с клиентом.

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

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

    1. Владимир, админки нет, корзина рассчитана для чистого ХТМЛа, витрина в демо примере

    2. Денис, так каталог платный или бесплатные? просто если витрина у вас в демо, её допиливать придется (даже если человек её вытащит, ему придется писать php код для суммирования товара и т.д)

  19. скиньте пожалуйста полный код, а то в статье витрины нету(

  20. Денис, все я Вас понял) все сделал, спасибо)))

    1. Владимир, я к этому сайту не имею никакого отношения. Скрипт корзины бесплатный.

      Для того, чтобы сделать админку надо наверное тебе немного самообучиться в связке PHP + MySQL ну или чистый пхп (для случаев хранения информации в файлах.

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

    2. Владимр, Денис совершенно прав по поводу админки и "допиливания". Скрипт реализует только саму корзину. HTML вы пишите сами ,а потом добавляете в него data-атрибуты и передаете часть классов в скрипт.

  21. "Сразу полсе того, как купил вам придется бежать на сайт, открывать код и менять цифру в нем на 10, чтобы Владимир не смог купить 15 штук. Так только? "

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

    1. Денис. Да, товар у вас где-то списывается автоматом, а в скрипте менять-то придется вручную. Я об этом с самого начала и говорю. Ведь скрипт ничего не знает о том, сколько у вас осталось товара, так как он не взаимодействует никак ни с какой базой. Мы можем статично указать 1 раз. А потом менять значение придется вручную все время.

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

  22. dimadv7, У меня скрипт знает, сколько осталось товара. У меня скрипт берет все данные из MySQL, из базы складской программы.

    1. Денис, аааа, понял тогда. Тогда да, такое реализовать конечно возможно. Если значение с количеством будет не статично передано в скрипт. Думаю алгоритм такой, придумываем атрибут, например, data-sb-product-max-quantity="20", где 20 - это значение остатка, переданное из базы. Затем нужно передать в скрипт это значение, по аналогии со значениями из других дата-атрибутов. А в функции, отвечающей за увеличение количества товара addProductQuantity.click(function (e) ... проверять количество накликанное с максимальным из дата-атрибута. Но есть еще нюанс, что в скрипте предусмотрен выбор размера, а у каждого размера может быть свое количество и вот тут перестает быть все относительно просто, ведь нужно учитывать и это. Честно, сейчас не могу взяться за это все, но если нужен исходник не сжатый, то могу скинуть.

    2. dimadv7, Я напишу в ВК тогда, туда и скинешь. Размеры я не использую.

  23. "Придумать еще 1 дата-атрибут, а потом в функции отвечающей за увеличение количества проверить цифру из дата-атрибута с количеством и ввести уведомление или сделать запрет на увеличение дальше."

    Ну именно так я и думал, осталось разобраться с синтаксисом. Если с РНР я более-менее знаком, то с JS и jQuery ни капли, только на уровне простых калькуляторов.

  24. Здравствйте, пытаюсь ограничить лимит товара

    commonResult: function(a, s, n) {
    var r = 0,
    o = 0,
    limit = 100,
    i = t("").attr({
    class: "smart-basket__empty-title"
    }).text("Корзина пуста. Вы не добавили ни одного товара").fadeOut(),
    l = t("").attr({
    class: "smart-basket__success-title"
    }).text("Заказ принят. Ожидайте звонка").css("display", "none"),
    c = t("").attr({
    class: "smart-basket__result-common"
    }),
    u = t("").attr({
    class: "smart-basket__price-common"
    }),
    d = t("").attr({
    class: "smart-basket__quantity-common"
    }),
    z = t("").attr({
    class: "smart-basket__quantity-common"
    });
    for (var p in a)
    for (var m in a[p]) "sbQuantity" === m && (r += +a[p][m]), "sbPriceCommon" === m && (o += +a[p][m]);
    if (0 == +r ? i.fadeIn() : i.fadeOut(), n) t("." + l.attr("class")).css("display", "block"), setTimeout(function() {
    t("." + l.attr("class")).css("display", "none"), t("." + i.attr("class")).css("display", "block")
    }, 3e3);
    else {
    if (s) return z.html("лимит товаров: ".concat(limit)),
    d.html("Всего товаров: ".concat(r)), u.html("Общая стоимость: ".concat(o.toFixed(2), " ").concat(e.smartBasketCurrency)), c.append(i).append(l).append(d).append(u), c;
    0 == +r && t("." + i.attr("class")).css("display", "block"), t("." + d.attr("class")).html("Всего товаров: "), t("." + d.attr("class")).html("Всего товаров: ".concat(r)),t("." + z.attr("class")).html("лимит товаров: ".concat(limit)), t("." + u.attr("class")).html("Общая стоимость: ".concat(o.toFixed(2), " ").concat(e.smartBasketCurrency))
    }
    },

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

  25. код переписал, все заработало, подскажите как можно вашу витрину переписать чтоб было так,
    алгоритм: мы нажимаем на кнопку "в корзину" (товар добавляется в коризину, это уже реализовано), а как сделать чтоб при нажатии второй раз на кнопку "в корзину", чтоб удалялся товар из корзины?

  26. у вас имеется код

    if (void 0 !== r[i]) {
    var l = t(this).html();
    return t(this).text("Товар уже в корзине"), t("body").append(a.alertBlock("alreadyAdded")), setTimeout(function () {
    t(s).html(l)
    }, 1500), !1
    }

    вот как его так переписать, чтоб при клики на кнопку "в корзину", которая находится на витрини товар удалялся с корзины если он там уже имеется?

  27. что означает в коде c.click(function () { (интересует именно c)

  28. если тут есть специалисты помогите разобраться, написал такой код

    if (void 0 !== r[i]) {
    var products = a.getProducts() || {};
    var id = t(this).attr("data-sb-id-or-vendor-code"); // id товара
    var index = products.indexOf(id);
    console.log(index);
    if(index === -1) {
    products.push(id);
    } else {
    products.splice(index, 1);
    }
    localStorage.setItem('basketItems', JSON.stringify(products));
    }

    суть алгоритма в том, чтоб удалить в массиве localStorage индекс по id, ну я получаю ошибку products.indexOf is not a function

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

    1. Владимир, накладно это, переписывать логику скрипта. Нужно садиться и разбираться во всех тонкостях, а вы хотите чтобы кто-то на глаз подсказал что и как вам сделать. Ещё и в сжатой и минифицированная версии копаться...

  29. b.click(function (e) {
    e.preventDefault();
    var n = t(this).data("sbId"),
    r = +y.val(),
    o = +k.val(),
    i = o * r;
    r > 1 && (r--, i = o * r, f.val(r), a.updateBasket(s, n, r, i), a.getSmartBasketMinState(s, "updateSmartBasketMin"), a.commonResult(s, "updateCommonResult")), k.val(o), _.val(+i.toFixed(2)), y.val(r)
    }), v.click(function (e) {
    e.preventDefault();
    var n = t(this).data("sbId"),
    r = +y.val(),
    o = +k.val(),
    i = o * r;
    r >= 1 ? (r++, i = o * r, f.val(r), a.updateBasket(s, n, r, i), a.getSmartBasketMinState(s, "updateSmartBasketMin"), a.commonResult(s, "updateCommonResult")) : r = 1, k.val(o), _.val(+i.toFixed(2)), y.val(r)
    }), i.append(l), c.append(p), c.append(u), c.append(d), m.append(f), h.append(k), g.append(_), n.append(o.append(c).append(i).append(h).append(m).append(g).append(w))
    };

    ребят код ужасный, нельзя было его оформить грамотно? без сокращения слов, не b.click, а например button.click или это так сложно когда пишешь код?

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

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

    скиньте не сжатую версию js скрипта, если Вас не затруднит

  31. Дим спасибо Вам огромное за труд, Вы УМНИЧКА)

  32. Добрый день. Можно ли добавить поле "адрес доставки " и можете ли сделать чтобы письма дублировались в группу телеграм . У меня создана группа с ботом куда прилетают все данные с формы обратной связи , можно ли также сделать с корзиной. Большое спасибо за вашу работу.

  33. Добрый день. Огромное благодарность автору за проделанную работу. Скрипт классный и реально необходим для не масштабных проектов.
    Но столкнулся с такой проблемой - перепробовал практически все не приходят письма о совершенном заказе пробовал и через php и sendmeil.
    Помогите пожалуйста разобраться.
    Настраиваю на почту от домена. Забивал и настройки b от почты хостера и от аккаунта яндекса.
    Аякс форма показывает что письмо отправлено а почта не приходит. При чем у меня на сайте есть еще одна форма которая отправляет почту через sendmail - письма приходят.
    Грешу на то что у меня подключен httsp или путь до скрипта отправки так как там используется деректива server root - но пробовал указывать полный путь до оброботчика письма не приходят.
    Если не трудно помогите пожалуйста.

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

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

    1. Сеня, Здравствуйте,используйте jQuery 3 версии и все будет в порядке)

  35. Здравствуйте. Скрипт супер но у меня не работает один параметр. Поставил все по инструкции но почему то размер товара в карточке товара нельзя выбрать ! Названия размеров есть но на них нажать нельзя. причем пробовал даже ваши div-ы с размерами вставлять в свою разметку но ничего не происходит. В настройках скрипта указал путь до product__size но такое ощущение как будто скрипт не видит этот параметр. Заранее спасибо за помощь.

    1. Данил, здравствуй. Так сложно сказать в чем проблема, скинь ссылку, посмотрю.

  36. Здравствуйте. Заказы на почту приходят без картинок (
    Как поправить?

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

  37. Здравствуйте. Как сделать чтобы на почту отправлялась и общая стоимость заказа!

    1. Альберт, создать еще одно поле и поместить туда общую сумму. Как вы уже пробовали? Какие проблемы и ошибки появились? Как пробовали их решить?

    2. dimadv7, В общем проблем нет, только на gmail почта не приходит. Отправляю на Яндекс, всё приходит моментом. А конкретней можно про общую сумму? Где делать правку? Я если честно в скрипт не залазил, просто скопировал демку и поправил под свои нужды.

    3. Альберт, в скрипте уже реализовано 3 поля, по аналогии нужно создать еще одно и поместить в него вытащенное из productsArr нужное значение с общей суммой. Потом в обработчике принять данные из этого поля и добавить его в цикл, при отправке на почту. По поводу gmail, проверь спам, если нет, то попробуй с использованием SMTP-протокола отправить.

    4. dimadv7, короче понятно, что ни чего не понятно. Я не прогер.

    5. Альберт. То, что вам нужно не делается одним движением руки. И не 15 минутное дело. А настройки такой в скрипте нет. Поэтому без переделки скрипта - никак не добиться того, что вам нужно.

    6. Понятно, спасибо.

  38. Приветствую Дмитрий!
    Очень и очень годный скрипт. Только есть проблемка, я готов профинансировать решение. Вопрос в следующем, все подключил все работает но вот письма не приходят, я уже миллион почтовых ящиков перепробовал, миллион smtp прописывал и ничего. Через OpenServer смотрю письма в папку email ложатся. P/S использовал и PHP5.6 & 7.0 & 7.2 не приходят письма все ровно. Хостеру также писал! Буду весьма благодарен за ответ.

    1. Давайте по почте или в соцсетях спишемся и будем разбираться)

    2. dimadv7, Спасибо вам за помощь! Проблема была в моем случаи с redirect в .htaccess

  39. Есть ли возможность в самой корзине вывести чекбокс с "Я принимаю условия пользовательского соглашения" как это реализовано в вашем SmartLid? Или этого нет?

    1. Дмитрий, здравствуйте. Да, конечно. В следующем обновлении сделаю обязательно.

    2. dimadv7, когда примерно оно появится? Хочу уже попробовать ваш скрипт в связке с одной flat-cms системой.

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

  40. Ну что, так и не появилось времени, чтобы галочку в форму вставить? :)))

    1. Да, так и не появилось

    2. dimadv7, эх жалко. Никаких прогнозов нет по этому поводу?

    3. Займусь на днях, попробую все сделать. Ориентировочно до конца недели.

    4. dimadv7, спасибо. Просто хочу на боевом проекте испробовать

  41. Добрый день.
    А можете выложить исходники работающей страницы с корзиной и отправкой на почту?
    Я всё сделал по Вашей инструкции и не работает(
    Я начинающий, прошу Вас выложить исходиники рабочие.

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

    что бы send.ph файл принимал данные заказа и через него я смог на почту отправлять?

    просто Ваш метод на почту ничего не приходит.

    Помогите пожалуйста

    1. Руслан, у всех работает. Что-то либо неправильно делаете, либо к хостеру нужно обратиться. Если решили делать свой обработчик, то в js файле есть строка:

      url:"/smartbasket/php/smartbasket.php"
      

      Это путь к обработчику, можете делать свой.

    2. dimadv7, Подскажите пожалуйста. Вот я заменил Ваш smartbasket.php на свой.

      <?
      $sendto = &quot;n@gmail.com&quot;; //Почта для приема заявок 
      $name2 = $_POST[&#039;userName&#039;];
      $phone2 = $_POST[&#039;userTel&#039;];
      $userEmail2= $_POST[&#039;userEmail&#039;];
      
      // Формирование заголовка письма
      $subject = &quot;Новый заказ&quot;; //Тема письма
      $headers = &quot;From: Новый заказ  \r\n"; //От кого
      $headers .= "MIME-Version: 1.0\r\n";
      $headers .= "Content-Type: text/html;charset=utf-8 \r\n";
      
      $msg = "";
      $msg .= "Заказ с сайта\r\n";
      $msg .= "<strong>Имя:</strong> ".$name2."\r\n";
      $msg .= "<strong>Телефон:</strong> ".$phone2."\r\n";
      $msg .= "<strong>userEmail:</strong> ".$userEmail2."\r\n";
      $msg .= "";
      
      mail($sendto, $subject, $msg, $headers);
      ?>
      

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

      Заранее спасибо за быстрый ответ!
      Спасибо, что вообще отвечаете! РЕСПЕКТ

    3. Руслан, а как вы файл передаете этим кодом? Нет, так не получиться все, прочитайте про ajax и про то, как передавать вложения.

    4. dimadv7, я своим файлом принимаю данные инпутов методом пост и передаю данные на почту и все. файлы не передаю.
      1) А почему так нельзя как я написал?
      2) А можно Ваш метод ajax заменить на мой просто принимать данные post методом и пересылать полученные данные на почту?

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

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

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

    2. Верно, не совсем то, что я имел ввиду. Не страшно. А можно ли данный скрипт как-то доработать таким образом, чтобы была возможно вариации товара. То-есть, один и тот же товар, но скажем, с разным цветовым решением? Имею ввиду, когда клиент кликает по цвету - отображается определенное фото и после заказа все это передается на почту?

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

  44. Здравствуйте. замечательная корзина! Хотелось бы еще что бы можно было повторно добавлять в корзину один и тот же товар при повторном нажатии на кнопку. Возможно ли это реализовать?

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

  45. Здравствуйте, в чем может быть проблема? Общая сумма не пересчитывается, поотключал все скрипты с сайта.

    1. Артем, есть ли ошибки в консоли браузера?

    2. dimadv7, Ошибок нет, все работает кроме подсчета общей суммы в корзине, странно.

    3. dimadv7, Видео записал) https://youtu.be/TK5rfaOzc2Q

    4. Артем, попробуйте удалить все из корзины, почистить куки и попробовать еще раз. Такое могло случиться из-за того, что пока настраиваете и тестируете, часть данных берется из кук, часть новых измененных данных перезаписывает их и возникает конфликт. Когда все настроено, и больше в код не вносятся правки, такой проблемы быть не должно.

  46. Здравствуйте! Спасибо вам за скрипт! Напишите пожалуйста инструкцию добавления дополнительного поля в корзине (на примере поля для введения адреса). Заранее огромное спасибо!

  47. Здравствуйте!
    Почему то выползает такая ошибка
    jquery-3.4.1.min.js:2 POST __http://altynaj.ru/bab/smartbasket/php/smartbasket.php 500 (Internal Server Error)
    send @ jquery-3.4.1.min.js:2
    ajax @ jquery-3.4.1.min.js:2
    sendCart @ smartbasket.min.js:1
    (anonymous) @ smartbasket.min.js:1
    dispatch @ jquery-3.4.1.min.js:2
    v.handle @ jquery-3.4.1.min.js:2

    Не подскажете где копать ?

    Спасибо

    1. Юрий, здравствуйте. Проверьте пути к файлам.

  48. Добрый день! Прошу подсказать как при способе отправки SMPT добавить константу "Имя пользователя"?

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

    Но не могу понять как и что я упустил почему оно лепится к имени (Я по его аналогии добавлял) и не могу его сделать обязательным.
    Вот как оно у меня смотрится на сайте https://prnt.sc/ru44p9
    А вот сам код, https://prnt.sc/ru45x6
    подозреваю что в нем что то не дописал, ну и вообще что еще нужно добавить чтоб оно корректно отображалось и работало?
    Поле если заполнено то уже отображается и отправляется на почту, но не делается обязательным, и не могу сделать его отдельным блоком как и другие поля....
    Заранее огромное спасибо...

    1. Василий, здравствуйте. Попас в спам комментарий из-за ссылок. Так в скрипте же есть стандартная настройка для поля с почтой. Почему ей не воспользуетесь?

  50. Добрый день, скрипт не пересчитывает общую стоимость при изменении количества товара в корзине... Куки чистил, страницу перезагружал, не помогает...

    1. Александр, проверьте ошибки в консоли, проверьте все ли, как в демо. Все ли классы передали скрипту. В демо не вижу такой проблемы.

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

 

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