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

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

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

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

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

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

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

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

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

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

<div class="smart-basket__wrapper"></div>
<script src="/smartbasket/smartbasket.min.js"></script>
<script>
    $(function () {
       $('.smart-basket__wrapper').smbasket({
         /* Настройки */
       });
    });
</script>

Не забываем подключить и таблицу стилей:

 <link rel="stylesheet" href="/smartbasket/css/smartbasket.min.css">

Настройки корзины

С подключением закончили, теперь давайте займемся настройкой.

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

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

Настройка карточки

Для этого, в месте, где инициализировали скрипт указываем класс обертки карточки в параметре 'productElement':

$(function () {
  $('.smart-basket__wrapper').smbasket({
    productElement: 'product__element',
  });
});

product__element — и есть класс моего блока с карточкой.

На следующем шаге нужно указать скрипту класс кнопки, которая будет отправлять товар в корзину, для этого воспользуемся параметром «buttonAddToBasket»:
Настройки кнопки

$(function () {
  $('.smart-basket__wrapper').smbasket({
    productElement: 'product__element',
    buttonAddToBasket: 'product__add-to-cart-button',
  });
});

product__add-to-cart-button — класс моей кнопки.

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

  • data-sb-id-or-vendor-code — артикул или id товара;
  • data-sb-product-name — название товара;
  • data-sb-product-price — цена, разделенная точкой, если есть копейки;
  • data-sb-product-quantity — количество, по умолчанию укажите 1;
  • data-sb-product-img — полный путь к картинке;

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

  • data-sb-product-size — размер. Задается, если вы используете опцию вывода размера в карточке товара. Подробнее о том, как это сделать в инструкции ниже.

Пример кнопки

<button 
  class="product__add-to-cart-button" 
  data-sb-id-or-vendor-code="0032pz" 
  data-sb-product-name="Iphone 10" 
  data-sb-product-price="80000" 
  data-sb-product-quantity="1" 
  data-sb-product-img="http://sprosigorod.online/img/iphone-10.png">
   <i class="fas fa-cart-plus"></i> В корзину
</button>

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

Следующим параметром, который мы настроим будет маска ввода номер телефона «countryCode». По умолчанию сейчас маска для Украины с первыми цифрами '+38', но вы можете поставить, '+7' или любые другие цифры.

Настройка маски телефона

Пока можно менять только их, но, если вы хотите иметь полный контроль над всеми цифрами, напишите мне и я сделаю.

$(function () {
  $('.smart-basket__wrapper').smbasket({
    productElement: 'product__element',
    buttonAddToBasket: 'product__add-to-cart-button',
    countryCode: '+7',
  });
});

Теперь укажем валюту, которую хотим использовать в корзине. Для этого есть параметр smartBasketCurrency, в который можно положить один из значков валют:
 Настройка валюты

  • $
$(function () {
  $('.smart-basket__wrapper').smbasket({
    productElement: 'product__element',
    buttonAddToBasket: 'product__add-to-cart-button',
    countryCode: '+7',
    smartBasketCurrency: '₽',
  });
});

Выбор количества

Если ваша карточка товара предусматривает выбор количества товара, добавляемого в корзину, то укажите класс элемента где будет располагаться блок выбора количества в параметре 'productQuantityWrapper'. Например, я хочу, чтобы выбор количества располагался в теге div с классом 'product__quantity'.

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

Настройка количества

$(function () {
  $('.smart-basket__wrapper').smbasket({
    productElement: 'product__element',
    buttonAddToBasket: 'product__add-to-cart-button',
    countryCode: '+7',
    smartBasketCurrency: '₽',
    productQuantityWrapper: 'product__quantity',
  });
});

После добавления параметра 'productQuantityWrapper' cо значением 'product__quantity', кнопки выбора количества автоматически появятся на сайте в указанном блоке.

Выбор размера в карточке

Недавно появилась возможность добавлять размер, который в свою очередь, может влиять и на цену. Например, в интернет-магазине продают 3 размера пиццы — 32 см, 26 см или 16 см. От радиуса зависит и цена. Вы хотите, чтобы в карточке пользователь мог выбрать нужный размер.

Выбор размера

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

<div class="product__size">
					
 <div class="product__size-element" data-sb-curent-price="320" data-sb-curent-size="32" data-sb-curent-id-or-vendor-code="0032pz">32 см</div>
 <div class="product__size-element" data-sb-curent-price="260" data-sb-curent-size="26" data-sb-curent-id-or-vendor-code="0026pz">26 см</div>
 <div class="product__size-element" data-sb-curent-price="220" data-sb-curent-size="22" data-sb-curent-id-or-vendor-code="0022pz">22 см</div>
					
</div>

Для работы скрипта здесь важны атрибуты «data-sb-curent-price» и «data-sb-curent-size» и «data-sb-curent-id-or-vendor-code» так как в них содержаться параметры для подстановки цены, размера и артикула. То есть при размере 32 см, цена пиццы 320 рублей, при размере 22 см — цена пиццы 220 рублей и т.д. Если цена при любом размере остается одинаковой, просто укажите везде одну и туже стоимость. Аналогичная ситуация и с артикулом. Или укажите везде одинаковый, или вообще не используйте атрибут «data-sb-curent-id-or-vendor-code», если не планируете давать возможность добавлять один и тот же товар с разными характеристиками.

Чтобы цена в карточке менялась, нужно обернуть число с ценой в отдельный блок, например, span, со своим классом. У меня это выглядит так:

<div class="product__price"><span class="product__price-number">320</span> ₽</div>

Теперь класс обертки «product__size» для блока с размерами и класс обертки цены «product__price-number» нужно передать в настройки скрипта:

$(function () {
  $('.smart-basket__wrapper').smbasket({
    productElement: 'product__element',
    buttonAddToBasket: 'product__add-to-cart-button',
    countryCode: '+7',
    smartBasketCurrency: '₽',

    productPrice: 'product__price-number',
    productSize: 'product__size',
  });
});

Теперь при клике на элемент с размером из «data-sb-curent-price» подставится цена в «product__price-number». Если не совсем понятно, напишите мне, попробую разъяснить.

Последняя настройка, которая сейчас доступна это вывод мини-корзины. То есть кнопки, которая отображает статус корзины (показывает текущее количество товара в корзине) и вызывает, при нажатии на нее, модальное окно с основной корзиной.

Мини-корзина

Я специально не задавал никаких стилей и ей, чтобы у вас был полный контроль если не над всей корзиной, то над максимальным количеством ее элементов. Принцип вывода, похож на настройку предыдущего поля. Нужно указать класс элемента, в котором отобразится кнопка в параметре 'smartBasketMinArea'.

$(function () {
  $('.smart-basket__wrapper').smbasket({
    productElement: 'product__element',
    buttonAddToBasket: 'product__add-to-cart-button',
    countryCode: '+7',
    smartBasketCurrency: '₽',
    productQuantityWrapper: 'product__quantity',
    smartBasketMinArea: 'header__basket-min'
  });
});

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

$(function () {
  $('.smart-basket__wrapper').smbasket({
    productElement: 'product__element',
    buttonAddToBasket: 'product__add-to-cart-button',
    countryCode: '+7',
    smartBasketCurrency: '₽',
    productQuantityWrapper: 'product__quantity',
    smartBasketMinArea: 'header__basket-min',

    smartBasketMinText: 'Корзина: ',
    smartBasketMinIconPath: '/smartbasket/img/shopping-basket-wight.svg',
  });
});

Для настройки отступов и внешнего вида, иконка и текст обернуты в теги с классами «smart-basket__min-icon» и «smart-basket__min-text».

Настройка почты для отправки

Для настройки отправки почты, нужно открыть файл config.php, который находится в папке /smartbasket/php/

Настройка отправки

Здесь нас интересуют 2 строки:

  • const SENDER = 'sender@yandex.ru';
  • const CATCHER = 'catcher@list.ru';

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

SMTP

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

// *** SMTP *** //
require_once($_SERVER['DOCUMENT_ROOT'] . '/smartbasket/php/phpmailer/smtp.php');
const HOST = '';
const LOGIN = '';
const PASS = '';
const PORT = '';
// *** /SMTP *** //

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

Обязательность полей для заполнения пользователем

В новом обновлении, как вы и просили, добавил еще одно поле для связи (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,
  });
});

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

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

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

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

193 комментария

  • dimadv7

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

    Ответить
  • Ксения

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

    Ответить
  • dimadv7

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

    Ответить
  • Денис

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

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

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

    Ответить
  • dimadv7

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

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

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

    Ответить
  • Денис

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

    Ответить
  • dimadv7

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

    Ответить
  • Денис

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

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

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

    Ответить
  • Владимир

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

    Ответить
  • Владимир

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

    Ответить
  • Денис

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

    Ответить
  • Владимир

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

    Ответить
  • Владимир

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

    Ответить
  • Денис

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

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

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

    Ответить
  • dimadv7

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

    Ответить
  • dimadv7

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

    Ответить
  • Денис

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

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

    Ответить
  • dimadv7

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

    Ответить
  • Денис

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

    Ответить
  • dimadv7

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

    Ответить
  • dimadv7

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

    Ответить
  • Денис

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

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

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

    Ответить
  • Денис

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

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

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

    Ответить
  • Денис

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

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

    Ответить
  • dimadv7

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

    Ответить
  • dimadv7

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

    Ответить
  • Денис

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

    Ответить
  • Денис

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

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

    Ответить
  • dimadv7

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

    Ответить
  • Денис

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

    Ответить
  • Владимир

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

    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))
    }
    },

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

    Ответить
  • Владимир

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

    Ответить
  • Владимир

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

    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
    }

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

    Ответить
  • Макс

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

    Ответить
  • Владимир

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

    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

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

    Ответить
  • Андрей

    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 или это так сложно когда пишешь код?

    Ответить
  • dimadv7

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

    Ответить
  • dimadv7

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

    Ответить
  • Владимир

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

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

    Ответить
  • Владимир

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

    Ответить
  • Сергей

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

    Ответить
  • Валерий

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

    Ответить
  • dimadv7

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

    Ответить

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

 

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