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 человек, то буду продолжать развивать проект, добавляя новые функции и возможности. Если окажется, что потребности в корзине нет, то закончу минимально-рабочую версию и займусь чем-то новым.
Скрипт, который описан в статье выше больше не поддерживается.
475 комментариев
Отличная вещь. Спасибо за скрипт! А получится туда добавить как-то скидку в % от суммы заказа и скидку от самовывоза? Поставил галочку Самовывоз, -10% пересчиталось.
Андрей, здравствуйте. Пока такой настройки не планируется. Это же простой скрипт. Для полноценной корзины лучше CMS использовать какую-нибудь.
Да и, скорее всего, пока обновлений не будет. То, что есть уже тяжело поддерживать. Скорее всего, сначала придеься переосмыслить сам подход к срипту, а потом заниматься обновлениями, но пока не решил.
Решил проблему что скрипт не пересчитывал общую стоимость при изменении количества товара. Оказалось айди товара должен начинаться с 0. Автор, добавьте это в тему, уверен я не один такой
Александр, нет такой проблемы, что-то не так делаете. Где-то или какие-то лишние передает данные, которых нет на старнице, или забыли что-то передать скрипту. Из-за этого сбой происходит какой-то.Даже в демо есть товыры, в которых id не с 0 начинается. Это могут быть буквы или цифры. Любые.
Подскажите пожалуйста где нужно подправить чтоб окно уведомления о принятом заказе не закрывалось так быстро, чтобы увеличить время его закрытия до 15 секунд?
Спасибо.
Василий, настройки такой нет, а навскидку не скажу, но можно один из settimeoutов посмотреть. Посмотрите, там их всего штук 5.
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)
}
})
},
Но я не нашел в нем куда можно вписать значения.
Василий, "4e3" и "3e3" это, скорее всего, после обфускатора так цифры зашифровались. Попробуйте их менять.
Привет, отличное решение. Для маски номера не хватает: при вводе первой цифры 8, проставляет +7 и ставит курсор за скобку
Илья, привет, настройка маски предусмотрена в скрипте.
А можно полный скрипт с index файлом как у вас на демо. Не совсем ясен момент организации каталога товаров.
Сарра, на странице с демо, можно же все посмотреть, вызвав инструменты разработчика в браузере нажав f12 или открыть кода при помощи комбинации клавиш crtl+u
Данные не приходят на почту, хотя вроде всё подключил
У меня - тоже.
Подскажите, вот если поменять вид и сделать не кнопками размер как в примере, в вот типа выпадающим списком
Пицца «Ветчина и грибы»
320 Р
32 см
26 см
22 см
то скрипт уже не работает( в чём проблема, подскажите! заранее спасибо!
Артем, потому, что в логике реакция на клик, а не change, поэтому не работает.
Крутая корзина! Но есть куча вопросов и не только у меня по поводу прихода письма на почту, было б круто увидеть полную видео-инструкцию с описанием процесса установки настройки! Спасибо)
Александр, проверяйте пути, проверяйте все ли сделано по инструкции. Читайте эту статью, если не отправляются данные. Откройте консоль разработчика и устраните все ошибки.
Здравствуйте, Дмитрий!
Подскажите, пожалуйста - можно ли сделать так, чтобы, ну, скажем: "все пиццы были в одном "product__element"?
То есть, наряду с "размером", был еще "вид пиццы" со сменой картинки.
?
То, что Вы сделали и так - круто, просто мне немного не хватает под то, что хочу сделать - очень похоже на "вариативные товары" Вукоммерца.
Александр, если переписывать всю логику скрипт заново, то можно сделать все.
smbasket not function все подключено
Все подключил как в примере, и на выходе ошибка
Cannot read property 'isRequired' of undefined
Как исправить ? проект чистый кроме этой библиотеки нет ничего, создал исключительно чтоб проверить.. Но не работает
Oleg, добавьте в настройки:
Вопрос "можно ли сделать так, чтобы, ну, скажем: «все пиццы были в одном «product__element»?" порешал табами.
Александр, здорово)
подскажите как добавить тут два поля одно просто для пожеланий а второе выбрать время доставки и день
Ян, в смысле как? при помощи JS создать поля, добавить в форму, потом при помощи PHP принять и обработать эти поля и добавить значения в функцию для отправки письма.
Ян, смогли разобраться?
Тоже интересно, нужно добавить поля
Да разобрался если хотите поле слева то
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 .'
и все работает)
Ян, можешь отправить весь код js?)) А то никак не пойму куда именно вставить в smartbasket.min.js
Ян, ДМИТРИЙ а я как вам отвечу я бы переслал но почту вашу не знаю сделал вам архив с заменой чтоб появилось поле время и адрес куда выслать? Может админ даст вашу почту?
Выслал почту)
Ян, что-то не вижу почту
Ян, выслал только что еще раз.
Ян, у меня что-то пошло не так. Не выводятся доп. поля. Можно полный модуль с Вашими изменениями выслать?
Здравствуйте!
Подскажите такой момент: можно ли сделать вывод товаров в корзину, которая статичная и находится под блоком с товарами, а не в отдельном попапе? У меня в проекте планируется простой вывод только названия товара, кол-во, цена и итоговая цена всех товаров.
Cybborgus, здравствуйте. Можем попробовать разработать такой модуль. Напишите мне в ВК или Телеграм.
Здравствуйте!
Как сделать так чтобы при нажатии на кнопку "В корзину", число товара в нем увеличивалась, а не выходило попап окно "товар уже добавлен"
Алмаз, здравствуйте, нет такой возможности. Увеличивать количество, после добавления в корзину, можно только в самой корзине.
Дмитрий, Спасибо за замечательный скрипт.
Подскажите, пожалуйста, как реализовать функцию, которой ему очень не хватает: платная доставка и самовывоз.
Было бы здорово в настройка указать стоимость доставки по городу (к примеру, 300 рублей) - единую цену. И добавить возможность "Самовывоза". Если покупатель выбирает Самовывоз, то общая стоимость не изменяется, а если выбирает "Доставка", то в корзине появляется соответствующий пункт и добавляется стоимость +300 рублей.
Спасибо Вам еще раз за скрипт.
Никак не отправляется на почту, и с php а также с smtp пробывал никак
_https://www.komtet.ru/lib/plangs/php/proverka-raboty-funkcii-mail-dlya-php, с этого сайта код взял на хостинг загрузил и сообщения приходят а с вашим скриптом никак. Заранее спасибо
Jeryn, а какие ошибки в консоли? Версия php > 7? jQuery > 3?
productSize: 'product__size',
Разве не productSize: 'product__size-element', должно быть?
Pirate, совершенно верно. Спасибо. Поправил.
А исходник можно скачать ?
Viktor в статье же ссылка.
Добрый день. А с последней версий jquery (1.12.4) не работает получается?
Роман, я на этой не тестировал. Работал только с 3.
Здравствуйте. А есть исходник полного Демо, я не очень хорошо разбираюсь в PHP, но скрипт очень нужен уже несколько дней пытаюсь разобраться с ним, не получается, то ошибки, то какие-то проблемы. У вас исходник для внедрения в свой сайт, а целого с демо я не нашел.
Здравствуйте. Целого демо и нет. Есть исходник скрипта. Демо можно посмотреть на странице с демо.
взял полностью код из вашего демо + залил ваши файлы = диаметры пицц выстроены в вертикальную колонку без рамок, оформление и украшательства отсуствуют. остальное работает - корзина и тд
Вадим, все правильно. Стилей и нет, только стили корзины. Все остально пишете сами. Это намеренно сделано, чтобы не влиять никак на дизайн.
Все вроде работает. Как можно вместо множества кнопок сделать ползунок от 0-500 мм, и далее с таким же продолжением как с пиццами. можно цену не указывать, по запросу
Вадим, здравствуйте. Нет такой возможности.
Может еще 3 кнопки выбора к диаметрам пиццы как-то можно добавить в карточке продукта (я не шарю, учусь, ничего не выходит). например 3 кнопки выбора диаметра пиццы уже есть, а к ним еще например одна кнопка добавить больше колбасы, другая - сыра, третья - помидоров или грибов?
Вадим, скрипт предоставляется как есть, исходники утеряны. В том виде (минифицированном), в каком он сейчас, что-то дорабатывать - себе дороже. Рано или поздно буду делать новую версию.
жаль, скрипт в данном виде очень хорош, но мне не подходит - необходимо больше "добавок" в товар
Как я сделал (дорабатывается): agbi.ru
Добрый день. А можете выложить исходник с дополнительными полями в корзине
Друзья, если будет время, постараюсь до конца года сделать новый, улучшенный скрипт корзины для лендинга и учесть ваши пожелания, по поводу того, каким он должен быть. Пишите, какого функционала не хватает, но с учетом того, что это не универсальное решение, под все задачи а именно скрипт для лендинга или простого сайта.
всех замучил , но скрипт не работает на отправку
Отлично работает.
Люди! напишите пожалуйста ваши рабочие комбинации настроек config.php - smtp + SENDER
и CATCHER, или просто smtp, а ENDER
и CATCHER пустые. Host - localhost или xxx@xxx.ru или еще как-то? ну и остальные настройки вплоть до портов. вторую неделю мудохаюсь - 100500 комбинаций сделано, не отправляется почта и все
Вадим, можете без SMTP для начала. Просто указать реальный почтовый ящик для получателя и отправителя. Все, что связанно с SMTP закомментируйте. В том числу и путь к файлу. Убедитесь, что на сервере включена функция mail, убедитесь, что php > 7, что jquery > 3 версии. Также узнайте у хостера нет ли каких-то ограничений на отправку писем. Пройдитесь по этой статье на предмет возможных ошибок. Проверьте консоль браузера, есть ли там ошибки. Если все в порядке, будем разбираться дальше.
в комментарии загнать не смог SMTP, не становится комментарием (в моем случае серебристыми еле видными символами). удалил все с SMTP - не работает отправка
Добрый день. Странно, но не открывается сама корзина через кнопку малой корзины. Т.е. при добавлении товара, если нажать на кнопку "В корзину", то переходит нормально, а именно через малую - нет... Подскажите в чем может быть проблема?
И вопрос в самой корзине. Если менять количество товара, то общая сумма за все товары и общее количество не меняется...
Вот ссылка на страницу, где можно глянуть
_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
Вадим, с малой корзиной, как я вижу, разобрались. Но вижу, что не передали в скрипт product__price в скрипт и не дали это класс блоку с ценой.
Дмитрий, а можно подробнее... Сейчас указал product__price, но все равно не работает общее количество и общая цена(т.е. при изменении в корзине количества, общее число корзины не меняется)...
productSize - тоже не передали. Сделайте, пожалуйста по инструкции и лучше используйте классы, как в примере, чтобы избежать ошибок. Вам же ничего не мешает использовать 2 класса и сделать ваш блок с ценой, как в примере так:
Аналогично с остальными полями.
повторюсь, а то Вадимов стало много, в комментарии загнать не смог SMTP, не становится комментарием (в моем случае серебристыми еле видными символами). удалил все с SMTP - не работает отправка. php 7.3, jquery > 3 версии. мне сейчас надо понять как правильно заполнять config.php. и сопоставить пути к файлам.
Dreamweaver пишет про синтаксическую ошибку в строке 1 smartbasket.min.js, а строка 1 это весь код на странице.
2 ссылки xmlns="http:// ...
символы // закомментировали коды внизу страницы?
Vadim!!!, в консоли браузера есть ошибки?
есть ошибки общие, я использую голую версию сейчас. ошибки чисто на отсутствие по имеющимся путям картинок и стилей. для процесса отправки не знаю как поймать ошибки в данном скрипте
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
Помогите интегрировать эти скрипты для почты. не знаю где и что заменить или создать. ниже 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;
}
?>
сайт автора умер от безысходности решения моей проблемы или я его уронил скриптами в комментах?)))))
Vadim!!! Причем тут умер? Скрипт отправляет сообщения при помощи функции mail, ваш хостинг не поддерживает ее. Вам нужно переделать. Закажите на фрилансе эту работу или кто за вас должен это делать? В статье написанно, что скрипт в текущем виде больше не поддерживается, так как исходник утерян и я собираюcь делать новую, улучшенную версию. Вот и все.
При этом в настройках есть возможность отправлять скрипт и через SMTP-протокол и подключать для этого сторонний скрипт не нужно.
не шарю в программировании, но думал всем миром решаем проблемы с этим скриптом, я времени потерял много на него, надо было этот ответ дать раньше
Ну так если вы не шарите и пытаетесь что-то сделать, люди откликаются и готовы помочь, а когда нужно сделать за вас - это на фриланс или заказывать у кого-то.
Тем более это не скрипт не работает, а ваш хостинг сделал такое ограничение.
какая ошибка здесь может быть - {let e = JSON.stringify(t,"",4);
- клевещет на код dreamweaver
Vadim!!! В коде нет ошибок. А Дримвивер может не понимать es6 стандарта и рассказывать вам, что let лучше не использовать, а использовать "устаревший" var.
ссылка на class.phpmailer.php из какого файла идет? не нашел ссылку во всем сайте
Vadim!!!, там, где почту настраивали. В том же файле и подключение... Где вы искали, так и не понял... https://prnt.sc/vm39s8
поиском в файле phpmailer.php воспользовался - не нашел ссылку на class.phpmailer.php. просмотрел где-то 1500 строк - кровь из глаз, дальше не смог. ссылки в скриптах как-то иначе выглядят, без путей?
1. Зачем вам туда лезть? Это готовая библиотека, в которой все сделано правильно. Там точно никаких ошибок нет. В консоли вам если и показывает что-то, то это просто место, в котором выбрасывается ошибка. Но там точно все сделано правильно.
2. 31 строка файла phpmailer... https://prnt.sc/vm3uzs
сопоставлял пути и ссылки, вот и нашел его. сейчас пытаюсь осуществить AutoTLS - off. можете подсказать как правильно сделать?сделал public $SMTPAutoTLS = false; - не помогает
Никогда не слышал о таком параметре, как (AutoTLS).
на хостинге такие правила. в phpmailer.php есть
Инструкция в шапке сайта - с полной информацией для работы скрипта? Не работает отправка заказа c помощью этого скрипта. В логах даже нет намека на то, что что-то происходит при нажатии кнопки "Сделать заказ".
Правильно, вам же хостер сказал, что у вас какие-то там ограничения и так работать не будет... У вас и не может быть отправки, если функция, отвечающая за отправку данных, отключена на хостинге...
Vadimm!!! Хотите, я сейчас установлю к себе скрипт, а вы закажите товар и отправите, а я вам пришлю скрин, что все работает?
Дмитрий, если уж готовы установить, то проще конечно просто выложить полную версию скрипта с файлом index.html и полными путями к файлам и библиотекам с расширением .php. чтоб мне себя не терзать сомнениями и возможно легче будет переделать, зная как должно быть изначально. буду благодарен
Vadim!!! Я же вчера еще выложил, но вы так и не откликнулись. Сейчас готовы проверить на моем сайте? После проверки вышлю на почту исходник с html.
Vadim!!! Вы тут, готовы протестировать все?
Дмитрий. Пришлось восполнить денежный застой по проекту работой вне дома - я ведь реально потратил кучу времени на разборки с скриптом. я верю что скрипт работает (по комментариям), НО НЕ РАБОТАЕТ У МЕНЯ, и я не профи, чтобы определить, что index.html правильно заряжен ссылками и путями. скачивалка сайтов не вытягивает "секретные" папки с php и тд
Vadim!!! Секретных папок и нет. Все, что в архиве, больше ничего и не нужно. В лбом случае, выслал на почту. Но у вас не из-за путей не работает, а из-за того, что на хостинге отключена функция, которую использует скрипт для отправки писем.
доброго! я добился ,что браузер показал одну непонятную ошибку или выполненную команду - 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. что скажите про это? сейчас попробую ваши файлы залить
на сегодня застрял на организации Class
PHPMailer\PHPMailer не удалось открыть поток: нет такого файла или каталога в .....
Добрый день,спасибо за скрипт все успешно установил НО проблема в том когда я хочу убрать required с инпутов в корзине не получается иногда скрипт слетает
Как решить эту проблему?
Спасибо
Ренат, он не слетает, просто после кардинальных правок, нужно очистить localstorage в браузере. Туда записываются часть настроек и состояние корзины и когда вы меняет настройки, нужно очистить и localstorage или корзину, предварительно. Когда все будет готово, у пользователей никаких проблем не будет.
Дмитрий именно с каких полей убрать required чтоб этот элемент был необязательным при заказе?
Ренат, вот так для имени телефона и email
Вот так можно включить или отключить соглашение:
Выложите пожалуйста css i ява скрипт не сжатый, а то очень тяжело редактировать.
Виктор, Вот online _https://beautifier.io/ ресурс. Через него можете все перевести к нормальному виду JS, css, HTML
Не проходит валидация с сторонними скриптами.
Уже пробывал вот такую комбинацию всеравно не проверяет поле после нажатия кнопки.
Пытаюсь вставить Яндекс карту для адресов доставки в форму корзины. Вариант с картой полученной из конструктора карт Яндекса проходит. Но хотелось бы вставлять карты полученные через 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 ?
Поделитесь опытом.
В первом и втором случае подключены:
Дмитрий скажите пожалуйста как мне отправить данные с корзину на почту куда прописать код?
Ренат, а как в статье написано не получилось?
Ренат, корзина работает только после обновления
Открой консоль браузера, увидишь ошибки. Исправь их - и будет все нормально работать.