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

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. Ренат

    <?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.mail.ru';
    const LOGIN = 'web_master5@mail.ru';
    const PASS = '0555782809!';
    const PORT = '465';

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

    const SENDER = 'web_master5@mail.ru';
    const CATCHER = 'renat.safiyev@mail.ru';
    const SUBJECT = 'Заявка с сайта';
    const CHARSET = 'UTF-8';

    Такой подход правильный?

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

      Ренат, похоже на правду)

  2. Рома

    Дмитрий есть ли другой способ отключения require
    agreement: {
    isRequired: true,
    isChecked: true,
    isLink: 'https://smartlanding.biz'
    }
    Этот способ не работает

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

      Роман, вы его включенный прислали, чтобы отключить нужно сделать так:

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

      Способ работает и он единственный.

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

      Только он отключает только чекбокс с пользовательским соглашением, остальные поля отключаются в соответствующих параметрах, а именно:

      // обязательность полей, следите, чтобы хотя бы телефон или email был обязательным
      telIsRequired: true,
      emailIsRequired: false,
      nameIsRequired: true,
      
  3. Рома

    telIsRequired: true,
    emailIsRequired: false,
    nameIsRequired: false,

    При заказе все равно не пропадает красная линия снизу инпута

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

      Рома, у какого поля не пропадает красная линия?

  4. Рома

    У имени и телефона

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

      У телефона и должен быть, так как вы оставили true. У имени по-моему специально делал, чтобы обязательно было. Вспомнил. При этом, если телефон или почта не заполнена, корзина требует все равно заполнить один из контактов для связи.

  5. Vadim!!!

    новый хостинг !!!
    agreement
    Fatal error: Uncaught Error: Class 'PHPMailer\PHPMailer\Exception' not found in /home/users/u/ultracomfort/domains/ultracomfort.myjino.ru/smartbasket/php/phpmailer/phpmailer.php:1720 Stack trace: #0 /home/users/u/ultracomfort/domains/ultracomfort.myjino.ru/smartbasket/php/phpmailer/phpmailer.php(1518): PHPMailer\PHPMailer\PHPMailer->mailSend('Date: Sat, 28 N...', 'postSend() #2 /home/users/u/ultracomfort/domains/ultracomfort.myjino.ru/smartbasket/php/smartbasket.php(169): PHPMailer\PHPMailer\PHPMailer->send() #3 {main} thrown in /home/users/u/ultracomfort/domains/ultracomfort.myjino.ru/smartbasket/php/phpmailer/phpmailer.php on line 1720

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

      Vadim!!! Скачайте библиотеку phpmailer с гитхаб и подключите файл, который просят. А именно:

      use PHPMailer\PHPMailer\Exception;
      require 'path/to/PHPMailer/src/Exception.php';
      
  6. Vadim!!!

    Дмитрий, по поводу - use PHPMailer\PHPMailer\Exception;
    require 'path/to/PHPMailer/src/Exception.php';
    на прошлом хостинге в smartbasket.php я это делал и как и писал в итоге дошел до того когда инструмент разработчика вывел - attantion. сейчас конечно еще раз попробую, но ведь весь скачнный исходник должен быть готов и работать

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

      Vadim!!!, нет. Удалите все что делали. Скачайте скрипт, добавьте только:

      use PHPMailer\PHPMailer\Exception;
      require 'path/to/PHPMailer/src/Exception.php';
      

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

  7. Vadim!!!

    теперь пишет - agreementattantion

    1. Vadim!!!

      ссылку сделал такого вида - require '/home/users/..........................php/phpmailer/src/Exception.php'; по вашей найти не может

    2. Vadim!!!

      По этим сообщениям мне важен ваш ответ. Ссылку сделал такого вида - require '/home/users/..........................php/phpmailer/src/Exception.php'; .
      инструмент разработчика пишет - теперь пишет - agreementattantion и больше ничего

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

      Vadim!!! так, и что в файле, куда падают письма вашего локального сервера?

  8. Vadim!!!

    ковырялся, ковырялся, загнал Smpt в комменты и добился - successmsgs, и письмо пришло. в данном случае в плане защиты и надежности так оставить или добиться чтобы скрипт работал по smpt ?

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

      Vadim!!! Можно оставить) Поздравляю с победой))

    2. Vadim!!!

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

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

      Vadim!!! Это и есть наиболее универсальные варианты, поддерживающиеся 95% хостеров. ( два способа mail() и SMTP). Куда же еще более универсальней?

  9. Vadim!!!

    Дмитрий, я что-то добавлял - это уже не универсальность)) и с smpt не хочет пахать.
    на старом хостинге сделал также - Warning: Use of undefined constant CATCHER2 - assumed 'CATCHER2' (this will throw an Error in a future version of PHP) in /var/www/userxxx/data/www/xxx.ru/smartbasket/php/smartbasket.php on line 167
    successmsgs
    почти отправилось в конце вышло - successmsgs

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

      Vadim!!! Соболезную вам с вашим хостингом, видимо его пользователи должны страдать))) CATCHER2 - не нужно заполнять и можно удалить.

  10. Vadim!!!

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

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

      Vadim!!! Все доступные настройки в описании статьи. По воводу разметки и позиционирования, да все это возможно. Почитайте про flexbox. Практически никаких ограничений на разметку со стороны корзины - нет. И на визульную составляющую скрипт на 95% не влияет.

  11. Vadim!!!

    добавил на главную страницу слайдер-карусель Фоторама ссылкой на скрипт . и все, никак не запускается скрипт корзины. товара нет на этой странице(главная), скрипт на этой странице нужен для показа количества товара в мини-иконке корзины и показ самой мини-иконки корзины для последующего перехода при покупке для оформления. все что в инете нашел - испробовал, ничего не получается, не особо шарю - это точно. help!

  12. Vadim!!!

    решил проблему - сам накосячил))

  13. Vadim!!!

    что за прикол? создал каталог и с помощью
    include (по 4
    .product__element в каждом вызове) заполнил его.
    24 пункта вызова. все красиво и норм отображается , пока не начинаешь скролить вниз - "product__list" постепенно сужается вниз , соответственно и элементы оставаясь прижатыми к левой стороне. что за????

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

      Vadim!!! Где-то ошиблись в верстке.

  14. Рома

    Дмитрий, как можно сделать так чтоб при заказе слово "Заказ принят ожидайте звонка" не исчезало ?

    1. Аркадий

      Рома, для начала разожмите скрипт smartbasket.min.js любым онлайн сервисом, найдите нужную фразу в скрипте и уберите связанную с ней функцию setTimeout.

  15. Anatoly

    Дмитрий, напиши, пожалуйста, как подключить корзину к LP-CRM. Спасибо за статью!

  16. Аркадий

    Дмитрий, а на многостраничном сайте (каталоге) будет корректно работать корзина или это только для одностраничников с модальным окном заказа?

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

      Аркадий, скрипт делался только для одностраничника.

  17. Аркадий

    Если поправить правой кнопкой мыши в коде data-sb-product-price="", то можно приобрести товар по другой (меньшей) цене. Интересно, можно ли продавца обязать продать айфон за рубль?)). Какие последствия это может иметь в реальных условиях? Или просто нужно дополнительно прописывать какой-то текст в пользовательском соглашении, исключающий возможность таких покупок?

    1. Дмитрий

      Аркадий, пишем что-то типа "Информация, указанная на сайте, не является публичной офертой (п.2 ст. 437 ГК РФ)".

  18. Виктор

    Добрый день а как сделать проверку на валидность номера телефона??

    Форма пропускает и 2 цифры.
    https://ibb.co/4P2r8DF

    1. Аркадий

      Виктор, для телефона можно сделать сторонним скриптом jquery.maskedinput.min.js, а в целом для формы удобно использовать jquery.validate.min.js. В интернете много примеров использования.

  19. Дмитрий

    1)Можно ли добить дополнительные поля к оформлению заказа (“комментарий к заказу”, “на который час”)
    2)Можно сделать что бы заявка не на mail приходила а в телеграмм?

  20. Юрий

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

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

      Для отображения количесвта нужно в верстку добавить:

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

      И в скрипт добавить:

      productQuantityWrapper: 'product__quantity',
    2. Дмитрий Давыдов

      Для отображения корзины в скрипт пишем:

      smartBasketMinArea: 'header__basket-min',

      А в верстку:

      <div class="header__basket-min"></div>
  21. Юрий

    Как добавить в корзину сумму доставки?
    Например до 2000р -200р свыше бесплатно

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

      Юрий, обескураживает ваш вопрос по поводу доставки. Подскажите, а как вы уже пробовали это сделать? Что не получилось? С какими ошибками столкнулись? Как пытались решить их?

  22. Александр

    Скачал исходники, выполнил первый пункт подключения:

    $(function () {
    $('.smart-basket__wrapper').smbasket({
    /* Настройки */
    });
    });

    пути правильные, но в консоли браузера выводит ошибку:
    Uncaught TypeError: $(...).smbasket is not a function
    Использую jQuery v2.1.4.

    1. Виктор

      Александр, вам удалось решить? Имею такую же ошибку :(

  23. Роман

    Корзина, работает только на одной странице? или при переходе на другую тоже будет?

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

      Роман, корзина не создавалась для многостраничных сайтов.

  24. Александр

    Есть возможность подключить платёжную систему?
    Или куда копать если самому думать?

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

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

  25. Дмитрий

    Как добавить дополнительные поля в форму отправки?

  26. Аркадий

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

  27. Григорий

    Добрый день! А можно скачать Вашу демо-версию? Или есть она в сети, что-бы можно было поклацать?

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

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

    2. Никита Власов
  28. Лилия

    Подскажите, пожалуйста, как добавить в новое поле – dropdown list, к примеру, с выбором способа доставки?

    Я пыталась добавить в дочерний элемент с помощью appendChild, но возвращается ошибка Uncaught TypeError: n.append(...).append(...).appendChild is not a function.
    Я так понимаю, потому что, я пытаюсь добавить строку:

    var dеlivery = t("").attr({
                        class: "smart-basket__input-wrapper"
                    });
                    lab = t("").attr({
                            class: "delivery",
                            for: "delivery"
                        });
                        sel = t("").attr({
                            
                            name: "delivery",
                            class: "delivery",
                            id: "delivery",               
                        })
                        let opt = t("").attr({
                            value: "value1"
                            })            
    n.append(lab).append(sel).appendChild(opt);
    

    Может кто-то сталкивался и нашел решение?

  29. Светлана

    Добрый день. Заявки с корзины отправляются, но попадают в спам. Чтобы это избежать я подключаю SMTP, но тогда возникает ошибка POST https://msk-montazh.ru/smartbasket/php/smartbasket.php 500 (Internal Server Error). Подскажите как это исправить пожалуйста?

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

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

  30. Ярослав

    Крутая штука. Давно искал такую. Дмитрий, а как сделать, чтобы отправлялись заказы не с коренной страницы а с site.com/shop.php ? где править ссылки?

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

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

  31. Виктор

    Как сделать чтобы при выборе размера менялась не только цена но и фото?

    1. Денис

      Виктор, если ты собираешься сделать новую версию, тогда у твоего комьюнити есть сотня идей для нового проекта =)

  32. lazizbek

    пожалуйста помоги заранее спасибо дмитрий

  33. lazizbek

    Привет Дмитрий, я Лазизбек. Я использовал корзину на сайте, но она не будет работать, пока я не обновлю ее после входа в систему. Что я могу сделать? Пожалуйста, пришлите его в мой инстаграм: https://www.instagram.com/laz1zbek_asqarov/

    пожалуйста помоги заранее спасибо дмитрий

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

      Привет. Я не понимаю о чем ты говоришь. Какую систему? кого обновить?

  34. lazizbek

    функция не работает после обновления

  35. lazizbek

    Помоги мне

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

      Открой консоль браузера, увидишь ошибки. Исправь их - и будет все нормально работать.

  36. lazizbek

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

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

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

  37. lazizbek

    но при использовании "локального хранилища"

  38. lazizbek

    Ссылка на автора скрипта в описании к видео ролику. Я его не писал, я вообще дизайнер))

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

      lazizbek, "но при использовании "локального хранилища"", "Ссылка на автора скрипта в описании к видео ролику. Я его не писал, я вообще дизайнер))" - это вы к чему?

  39. lazizbek

    привет дмитрий хочу сделать числа в виде 1 000 666

  40. Алексей

    <?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.mail.ru';
    const LOGIN = 'smailaleksei@mail.ru';
    const PASS = '---------------';
    const PORT = '465';

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

    const SENDER = 'smailaleksei@mail.ru';
    const CATCHER = 'sodoxe3593@aikusy.com';
    const SUBJECT = 'Заявка с сайта';
    const CHARSET = 'UTF-8';

    почему то не работает . помогите разобраться

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

      Нужно открывать консоль браузера и изучать ошибки.

  41. WS

    А как связать корзину и гугль таблицу?

  42. Никита Власов

    Как получить данные из JS, в PHP? для бота который выведет все в чат?

    $name,
    'Телефон: ' => $phone,
    'Email' => $email
    );

    foreach($arr as $key => $value) {
    $txt .= "".$key." ".$value."%0A";
    };

    $sendToTelegram = fopen("https://api.telegram.org/bot{$token}/sendMessage?chat_id={$chat_id}&parse_mode=html&text={$txt}","r");

    if ($sendToTelegram) {
    header('Location: thank-you.html');
    } else {
    echo "Error";
    }
    ?>

  43. Алексей

    Failed to load resource: the server responded with a status of 404 (Not Found) /smartbasket/php/smartbasket.php:1
    Почему то не находит файл. Вроде все по инструкции, путь не менял
    Помогите разобраться

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

      Какая версия PHP? Какая версия jQuery?

  44. zaza

    Есть пара вопросов
    1) с PHP 8.0 на почту ни чего не приходит (PHP 7.4 - норм работает) - это из-за того что скрипт староват?
    2) ?где менять путь для - https://site.com/smartbasket/php/smartbasket.php 404
    когда данная папка находиться не в корне то не хочет почта приходить ((
    Пытаюсь несколько страниц сделать с различными путями https://site.com/landing1/smartbasket/php/smartbasket.php
    https://site.com/landing2/smartbasket/php/smartbasket.php
    https://site.com/landing3/smartbasket/php/smartbasket.php
    а скрипт все равно при отправке пытается найти https://site.com/smartbasket/php/smartbasket.php

    так и не нашел где это поменять

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

      По поводу PHP8 - да, нужно править скрипт под стандарты и требования.
      "когда данная папка находиться не в корне то не хочет почта приходить" - так и должно быть, скрипт рассчитан для лендинга и подразумевается, что папка в корне. Путь менять в js-файле smartbasket.min.js

  45. Сергей

    Приветствую! Подскажите, пожалуйста, как дополнительно добавить выбор цвета товара. Размер есть, ещё бы и цвет.

  46. Максим

    Добрый день. Подскажите проблему. При добавлении 1 товара в корзину счётчик количества пишет NaN. При перещелкивании количества - все начинает работать исправно

    1. Максим

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

  47. Алекс

    А как отключить обязательное поле ИМЯ?

    telIsRequired: true,
    nameIsRequired: false,
    emailIsRequired: false,

    не выходит

  48. Даниил

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

    1. Максим

      Даниил, тоже интересует данный вопрос, если разберетесь - отпишитесь пожалуйста.

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

      Картинкам нужно писать полный путь, начиная от https://

  49. Михаил

    Добрый день
    Подскажите как можно поменять стили у формы с заявкой?
    пытался в Php файле менять но не чего не происходит

  50. Alex

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

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