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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      У меня - тоже.

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

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

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

    32 см
    26 см
    22 см

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      agreement: {
      isRequired: false,
      isChecked: flase,
      }
      
  12. Дмитрий Давыдов

    Вопрос "можно ли сделать так, чтобы, ну, скажем: «все пиццы были в одном «product__element»?" порешал табами.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      Ян, можешь отправить весь код js?)) А то никак не пойму куда именно вставить в smartbasket.min.js

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

      Ян, ДМИТРИЙ а я как вам отвечу я бы переслал но почту вашу не знаю сделал вам архив с заменой чтоб появилось поле время и адрес куда выслать? Может админ даст вашу почту?

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

      Выслал почту)

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

      Ян, что-то не вижу почту

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

      Ян, выслал только что еще раз.

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

      Ян, у меня что-то пошло не так. Не выводятся доп. поля. Можно полный модуль с Вашими изменениями выслать?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    А исходник можно скачать ?

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

      Viktor в статье же ссылка.

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

    Добрый день. А с последней версий jquery (1.12.4) не работает получается?

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

      Роман, я на этой не тестировал. Работал только с 3.

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

    Здравствуйте. А есть исходник полного Демо, я не очень хорошо разбираюсь в PHP, но скрипт очень нужен уже несколько дней пытаюсь разобраться с ним, не получается, то ошибки, то какие-то проблемы. У вас исходник для внедрения в свой сайт, а целого с демо я не нашел.

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

      Здравствуйте. Целого демо и нет. Есть исходник скрипта. Демо можно посмотреть на странице с демо.

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

    взял полностью код из вашего демо + залил ваши файлы = диаметры пицц выстроены в вертикальную колонку без рамок, оформление и украшательства отсуствуют. остальное работает - корзина и тд

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

      Вадим, все правильно. Стилей и нет, только стили корзины. Все остально пишете сами. Это намеренно сделано, чтобы не влиять никак на дизайн.

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

      Все вроде работает. Как можно вместо множества кнопок сделать ползунок от 0-500 мм, и далее с таким же продолжением как с пиццами. можно цену не указывать, по запросу

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

      Вадим, здравствуйте. Нет такой возможности.

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

      Может еще 3 кнопки выбора к диаметрам пиццы как-то можно добавить в карточке продукта (я не шарю, учусь, ничего не выходит). например 3 кнопки выбора диаметра пиццы уже есть, а к ним еще например одна кнопка добавить больше колбасы, другая - сыра, третья - помидоров или грибов?

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

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

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

      жаль, скрипт в данном виде очень хорош, но мне не подходит - необходимо больше "добавок" в товар

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

    Как я сделал (дорабатывается): agbi.ru

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

    Добрый день. А можете выложить исходник с дополнительными полями в корзине

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

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

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

    всех замучил , но скрипт не работает на отправку

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

      Отлично работает.

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

    Люди! напишите пожалуйста ваши рабочие комбинации настроек config.php - smtp + SENDER
    и CATCHER, или просто smtp, а ENDER
    и CATCHER пустые. Host - localhost или xxx@xxx.ru или еще как-то? ну и остальные настройки вплоть до портов. вторую неделю мудохаюсь - 100500 комбинаций сделано, не отправляется почта и все

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

      Вадим, можете без SMTP для начала. Просто указать реальный почтовый ящик для получателя и отправителя. Все, что связанно с SMTP закомментируйте. В том числу и путь к файлу. Убедитесь, что на сервере включена функция mail, убедитесь, что php > 7, что jquery > 3 версии. Также узнайте у хостера нет ли каких-то ограничений на отправку писем. Пройдитесь по этой статье на предмет возможных ошибок. Проверьте консоль браузера, есть ли там ошибки. Если все в порядке, будем разбираться дальше.

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

      в комментарии загнать не смог SMTP, не становится комментарием (в моем случае серебристыми еле видными символами). удалил все с SMTP - не работает отправка

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

    Добрый день. Странно, но не открывается сама корзина через кнопку малой корзины. Т.е. при добавлении товара, если нажать на кнопку "В корзину", то переходит нормально, а именно через малую - нет... Подскажите в чем может быть проблема?
    И вопрос в самой корзине. Если менять количество товара, то общая сумма за все товары и общее количество не меняется...
    Вот ссылка на страницу, где можно глянуть
    _http://psp.vkr-prog.ru/catalog/odnorazovaya-posuda/stakany-bumazhnye-odnorazovye/stakan_bumazhnyy_odnorazovyy_belyy_100_110_ml_ukraina_100_sht_up_3500_sht_kor

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

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

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

    Дмитрий, а можно подробнее... Сейчас указал product__price, но все равно не работает общее количество и общая цена(т.е. при изменении в корзине количества, общее число корзины не меняется)...

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

      productSize - тоже не передали. Сделайте, пожалуйста по инструкции и лучше используйте классы, как в примере, чтобы избежать ошибок. Вам же ничего не мешает использовать 2 класса и сделать ваш блок с ценой, как в примере так:

      <div class="basket-card-prise-new product__price-number" data-price="37.61">37.61</div>

      Аналогично с остальными полями.

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

    повторюсь, а то Вадимов стало много, в комментарии загнать не смог SMTP, не становится комментарием (в моем случае серебристыми еле видными символами). удалил все с SMTP - не работает отправка. php 7.3, jquery > 3 версии. мне сейчас надо понять как правильно заполнять config.php. и сопоставить пути к файлам.

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

    Dreamweaver пишет про синтаксическую ошибку в строке 1 smartbasket.min.js, а строка 1 это весь код на странице.
    2 ссылки xmlns="http:// ...
    символы // закомментировали коды внизу страницы?

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

      Vadim!!!, в консоли браузера есть ошибки?

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

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

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

    agreement
    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/мойсайт.ru/smartbasket/php/smartbasket.php on line 162

    Fatal error: Uncaught Error: Class 'PHPMailer\PHPMailer\Exception' not found in /var/www/userxxx/data/www/мойсайт.ru/smartbasket/php/phpmailer/phpmailer.php:1410 Stack trace: #0 /var/www/user42045/data/www/мойсайт.ru/smartbasket/php/phpmailer/phpmailer.php(1348): PHPMailer\PHPMailer\PHPMailer->preSend() #1 /var/www/userxxx/data/www/мойсайт.ru/smartbasket/php/smartbasket.php(169): PHPMailer\PHPMailer\PHPMailer->send() #2 {main} thrown in /var/www/userxxx/data/www/мойсайт.ru/smartbasket/php/phpmailer/phpmailer.php on line 1410

    без smpt

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

    Помогите интегрировать эти скрипты для почты. не знаю где и что заменить или создать. ниже 2 файла с php

    У нас нельзя отправлять почту просто функцией PHP mail, потому что спамеры, регулярно взламывающие незащищенные Joomla и WordPress сайты используют домены клиентов для своих рассылок и затем уже почта добросовестных клиентов совершенно не доходит получателям.

    Рекомендуем следующие скрипты для отправки почты:

    Библиотека smtp-func.php

    <?php

    function smtpmail($mail_to, $subject, $message, $headers='') {

    //Настройки почты
    $config['smtp_username'] = 'test@cishost.ru'; //Смените на имя своего почтового ящика из ISPManager.
    $config['smtp_password'] = 'Пароль от почтового ящика из панели ISPManager'; //Измените пароль.
    $config['smtp_from'] = 'Test Mailbox'; //Ваше имя - или имя Вашего сайта. Будет показывать при прочтении в поле "От кого".
    //Обычно эти настройки менять не стоит
    $config['smtp_host'] = 'localhost'; //Сервер для отправки почты (для наших клиентов менять не требуется).
    $config['smtp_port'] = '25'; // Порт работы. Не меняйте, если не уверены.
    $config['smtp_debug'] = false; //Если Вы хотите видеть сообщения ошибок, укажите true вместо false.
    $config['smtp_charset'] = 'UTF-8'; //Кодировка сообщений.

    $SEND = "Date: ".date("D, d M Y H:i:s") . " +0300\r\n";
    $SEND .= 'Subject: =?'.$config['smtp_charset'].'?B?'.base64_encode($subject)."=?=\r\n";
    if ($headers) $SEND .= $headers."\r\n\r\n";
    else
    {
    $SEND .= "Reply-To: ".$config['smtp_username']."\r\n";
    $SEND .= "MIME-Version: 1.0\r\n";
    $SEND .= "Content-Type: text/plain; charset=\"".$config['smtp_charset']."\"\r\n";
    $SEND .= "Content-Transfer-Encoding: 8bit\r\n";
    $SEND .= "From: \"".$config['smtp_from']."\" \r\n";
    $SEND .= "To: $mail_to \r\n";
    $SEND .= "X-Priority: 3\r\n\r\n";
    }
    $SEND .= $message."\r\n";
    if( !$socket = fsockopen($config['smtp_host'], $config['smtp_port'], $errno, $errstr, 30) ) {
    if ($config['smtp_debug']) echo $errno."".$errstr;
    return false;
    }

    if (!server_parse($socket, "220", __LINE__)) return false;

    fputs($socket, "EHLO " . $config['smtp_host'] . "\r\n");
    if (!server_parse($socket, "250", __LINE__)) {
    if ($config['smtp_debug']) echo 'Не могу отправить EHLO!';
    fclose($socket);
    return false;
    }
    fputs($socket, "AUTH LOGIN\r\n");
    if (!server_parse($socket, "334", __LINE__)) {
    if ($config['smtp_debug']) echo 'Не могу найти ответ на запрос авторизации!';
    fclose($socket);
    return false;
    }
    fputs($socket, base64_encode($config['smtp_username']) . "\r\n");
    if (!server_parse($socket, "334", __LINE__)) {
    if ($config['smtp_debug']) echo 'Логин авторизации не был принят сервером!';
    fclose($socket);
    return false;
    }
    fputs($socket, base64_encode($config['smtp_password']) . "\r\n");
    if (!server_parse($socket, "235", __LINE__)) {
    if ($config['smtp_debug']) echo 'Пароль не был принят сервером как верный! Ошибка авторизации!';
    fclose($socket);
    return false;
    }
    fputs($socket, "MAIL FROM: \r\n");
    if (!server_parse($socket, "250", __LINE__)) {
    if ($config['smtp_debug']) echo 'Не могу отправить команду MAIL FROM:';
    fclose($socket);
    return false;
    }
    fputs($socket, "RCPT TO: \r\n");

    if (!server_parse($socket, "250", __LINE__)) {
    if ($config['smtp_debug']) echo 'Не могу отправить команду RCPT TO:';
    fclose($socket);
    return false;
    }
    fputs($socket, "DATA\r\n");

    if (!server_parse($socket, "354", __LINE__)) {
    if ($config['smtp_debug']) echo 'Не могу отправить команду DATA!';
    fclose($socket);
    return false;
    }
    fputs($socket, $SEND."\r\n.\r\n");

    if (!server_parse($socket, "250", __LINE__)) {
    if ($config['smtp_debug']) echo 'Не могу отправить тело письма. Письмо не было отправлено!';
    fclose($socket);
    return false;
    }
    fputs($socket, "QUIT\r\n");
    fclose($socket);
    return TRUE;
    }
    function server_parse($socket, $response, $line = __LINE__) {
    global $config;
    $server_response="";
    while (substr($server_response, 3, 1) != ' ') {
    if (!($server_response = fgets($socket, 256))) {
    if ($config['smtp_debug']) echo "Проблемы с отправкой почты!$response
    $line
    ";
    return false;
    }
    }
    if (!(substr($server_response, 0, 3) == $response)) {
    if ($config['smtp_debug']) echo "Проблемы с отправкой почты!$response
    $line
    ";
    return false;
    }
    return true;
    }

    //Отправить почту сразу нескольким получателям, ящики получателей пишем через запятую.

    function smtpmassmail($mail_to, $subject, $message, $headers='')
    {
    $mailaddresses=explode(",",$mail_to);
    foreach ($mailaddresses as $mailaddress) smtpmail($mailaddress,$subject,$message,$headers);
    }

    ?>
    _______________________________________________________
    и сам файл отправки mailer.php

    <?php
    //Замените настройки на нужные.
    $mail_to = 'mail@cishost.ru'; //Вам потребуется указать здесь Ваш настоящий почтовый ящик, куда должно будет прийти письмо.
    $type = 'plain'; //Можно поменять на html; plain означает: будет присылаться чистый текст.
    $charset = 'UTF-8';

    include('smtp-func.php');
    if ($_REQUEST['message'])
    {
    $name = $_REQUEST['name'];
    $phone = $_REQUEST['phone'];
    $message = $_REQUEST['message'];
    $replyto = 'no_reply@yandex.ru';
    $headers = "To: \"Administrator\" \r\n".
    "From: \"$replyto\" \r\n".
    "Reply-To: $replyto\r\n".
    "Content-Type: text/$type; charset=\"$charset\"\r\n";
    $sended = smtpmail($mail_to, $name, $message, $headers);

    echo '

    ';
    if (!$sended) echo 'Письмо не удалось отправить. Пожалуйста свяжитесь с администратором сайта по адресу: '.$mail_to;
    else echo 'Письмо было успешно отправлено.';
    echo '';
    exit;
    }
    ?>

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

    сайт автора умер от безысходности решения моей проблемы или я его уронил скриптами в комментах?)))))

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

      Vadim!!! Причем тут умер? Скрипт отправляет сообщения при помощи функции mail, ваш хостинг не поддерживает ее. Вам нужно переделать. Закажите на фрилансе эту работу или кто за вас должен это делать? В статье написанно, что скрипт в текущем виде больше не поддерживается, так как исходник утерян и я собираюcь делать новую, улучшенную версию. Вот и все.

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

      При этом в настройках есть возможность отправлять скрипт и через SMTP-протокол и подключать для этого сторонний скрипт не нужно.

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

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

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

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

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

      Тем более это не скрипт не работает, а ваш хостинг сделал такое ограничение.

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

    какая ошибка здесь может быть - {let e = JSON.stringify(t,"",4);
    - клевещет на код dreamweaver

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

      Vadim!!! В коде нет ошибок. А Дримвивер может не понимать es6 стандарта и рассказывать вам, что let лучше не использовать, а использовать "устаревший" var.

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

    ссылка на class.phpmailer.php из какого файла идет? не нашел ссылку во всем сайте

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

      Vadim!!!, там, где почту настраивали. В том же файле и подключение... Где вы искали, так и не понял... https://prnt.sc/vm39s8

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

    поиском в файле phpmailer.php воспользовался - не нашел ссылку на class.phpmailer.php. просмотрел где-то 1500 строк - кровь из глаз, дальше не смог. ссылки в скриптах как-то иначе выглядят, без путей?

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

      1. Зачем вам туда лезть? Это готовая библиотека, в которой все сделано правильно. Там точно никаких ошибок нет. В консоли вам если и показывает что-то, то это просто место, в котором выбрасывается ошибка. Но там точно все сделано правильно.

      2. 31 строка файла phpmailer... https://prnt.sc/vm3uzs

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

    сопоставлял пути и ссылки, вот и нашел его. сейчас пытаюсь осуществить AutoTLS - off. можете подсказать как правильно сделать?сделал public $SMTPAutoTLS = false; - не помогает

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

      Никогда не слышал о таком параметре, как (AutoTLS).

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

    на хостинге такие правила. в phpmailer.php есть

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

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

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

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

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

      Vadimm!!! Хотите, я сейчас установлю к себе скрипт, а вы закажите товар и отправите, а я вам пришлю скрин, что все работает?

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

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

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

      Vadim!!! Я же вчера еще выложил, но вы так и не откликнулись. Сейчас готовы проверить на моем сайте? После проверки вышлю на почту исходник с html.

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

      Vadim!!! Вы тут, готовы протестировать все?

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

      Дмитрий. Пришлось восполнить денежный застой по проекту работой вне дома - я ведь реально потратил кучу времени на разборки с скриптом. я верю что скрипт работает (по комментариям), НО НЕ РАБОТАЕТ У МЕНЯ, и я не профи, чтобы определить, что index.html правильно заряжен ссылками и путями. скачивалка сайтов не вытягивает "секретные" папки с php и тд

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

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

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

      доброго! я добился ,что браузер показал одну непонятную ошибку или выполненную команду - attantion и всё, просто написано attantion
      похоже что в этом куске скрипта что-то не так (smartbasket.php) -
      $mail->setFrom('SENDER');
      $mail->addAddress('CATCHER');
      if(defined('CATCHER2')){
      $mail->addAddress('CATCHER2');
      }
      $mail->CharSet = 'CHARSET';
      $mail->isHTML(true);
      $mail->Subject = 'SUBJECT'; // Заголовок письма
      $mail->Body = "$bodyHeader $body $bodybottom";
      if(!$mail->send()) {
      echo 'attantion';
      } else {
      // echo '' . SUCCESSMSGS . '';
      echo 'successmsgs';
      }
      } else {
      header ("Location: /");
      }

      ?
      В 'SENDER' 'CATCHER' 'CATCHER2' я добавлял по "по просьбе инструмента разработчика"одинарные кавычки, echo 'attantion'; - сейчас эта команда выводит attantion. что скажите про это? сейчас попробую ваши файлы залить

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

    на сегодня застрял на организации Class
    PHPMailer\PHPMailer не удалось открыть поток: нет такого файла или каталога в .....

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

    Добрый день,спасибо за скрипт все успешно установил НО проблема в том когда я хочу убрать required с инпутов в корзине не получается иногда скрипт слетает
    Как решить эту проблему?
    Спасибо

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

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

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

    Дмитрий именно с каких полей убрать required чтоб этот элемент был необязательным при заказе?

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

      Ренат, вот так для имени телефона и email

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

      Вот так можно включить или отключить соглашение:

      agreement: {
       isRequired: false,
       isChecked: true,
       isLink: 'https://smartlanding.biz',
      }
      
  47. Дмитрий Давыдов

    Выложите пожалуйста css i ява скрипт не сжатый, а то очень тяжело редактировать.

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

      Виктор, Вот online _https://beautifier.io/ ресурс. Через него можете все перевести к нормальному виду JS, css, HTML

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

    Пытаюсь вставить Яндекс карту для адресов доставки в форму корзины. Вариант с картой полученной из конструктора карт Яндекса проходит. Но хотелось бы вставлять карты полученные через API-Яндекс. Этот вариант не работает
    1. Вариант - рабочий
    let s2 = t("").attr({
    class: "smart-basket__user-form"
    }),
    r2 = t("").attr({
    class: "smart-basket__user-info"
    }),
    n2 = t("").attr({
    class: "smart-basket__input-wrapper"
    }),
    i2 = t("").attr({
    class: "map1"
    });
    $(function() {
    var service = document.createElement("script");
    $('.map1')[0].appendChild(service);
    /* service.src= "http://localhost/smartbasket-pvl-copy.ru/smartbasket/js/maps-ya.js"; неработает */
    /* Ниже Работает взято из конструктора YA-MAPS */
    service.src= "https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3Ab4dc12c0f3e074053c6b351077d024ad2fe2cce8e33653b805c397a2bc73e620&width=780&height=400&lang=ru_RU&scroll=true";
    });
    n.append(i2);

    Вариант 2 не работает
    Скрипт -maps-ya.js c API-Яндекс карты:

    ymaps.ready(function (){
    var myMap = new ymaps.Map("map1", { zoom: 3, center: [52.993280, 39.367876], controls: []});
    myMap.geoObjects.add(new ymaps.Placemark([45.043978, 39.109874], {
    iconContent: 'Краснодар'
    }, {
    'preset': 'islands#darkBlueStretchyIcon'
    })).add(new ymaps.Placemark([57.679013, 39.757857], {
    iconContent: 'Ярославль'
    }, {
    'preset': 'islands#darkBlueStretchyIcon'
    }));
    myMap.geoObjects.events.add('click', function (event) {
    location.href = event.get('target').properties.get('link');
    });
    });
    В первом и втором случае подключены

    Есть ли у кого опыт подключения Яндекс-карт с использованием Яндекс-API ?
    Поделитесь опытом.

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

    В первом и втором случае подключены:

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

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

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

      Ренат, а как в статье написано не получилось?

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

 

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