[СДЕЛАЙ САМ] minishop2 Купить в 1 клик. Быстрое оформление заказа.
Для тех, кто не хочет заморачиваться, напоминаю, что есть замечательный компонент msOneClick, для остальных поясню основную идею: быстро оформить заказ на одну товарную позицию в модальном окне на странице каталога/категории или в карточке товара, без перехода в корзину и на страницу оформления заказа и без потери функциональности, т.е. с возможностью выбрать способ доставки, способ оплаты и количество товара. Также отмечу, что совместимость с калькуляторами доставки не тестировал, только с дополнением msMiniCartDynamic. Итак, начнём.
1. Создаём файл assets/components/minishop2/js/web/custom.js.
2. Меняем системную настройку ms2_frontend_js на [[+jsUrl]]web/custom.js.
3. В assets/components/minishop2/js/web/custom.js копируем содержимое этого файла.
!!! ВАЖНО!!! У вас должен быть подключен Bootstrap 5, как минимум скрипты. Если у вас другое модальное окно, то нужно переписать вот эту часть кода
4. Копируем сниппет msOrder, называем msOrderCustom в и удаляем вот этот код
5. Модальное окно должно выглядеть примерно так
Немного пояснений.
В custom.js места изменений отмечены комментариями custom code start и custom code end.
Чтобы иметь возможность поменять количество, я вставил кусок стандартного чанка tpl.msCart, а те изменения, которые внесены в сниппет, позволяют запускать его при пустой корзине, но в данном случае она сразу же наполняется, поэтому ошибки не будет.
Также, при успешном оформлении заказа, если выбрана оплата наличными или другой способ, не подразумевающий переход на страницу оплаты, я сделал переадресацию как при обычном оформлении заказа в моем случае на страницу /checkout?msorder=11.
Если у вас у страницы оформления заказа другой псевдоним, то поменяйте его вот в этом куске кода
Затевал я это всё больше из любопытства, мне было интересно возможно ли реализовать данный функционал поменяв только исходный js. Вроде бы получилось. Небольшое редактирование сниппета не в счёт.
В общем, как-то так. Если кому-то пригодится — хорошо, а нет — будут пользоваться сам, если в комментариях мне это желание не отобьют.
ДРУГОЙ ВАРИАНТ РЕАЛИЗАЦИИ МОЖНО ПОСМОТРЕТЬ ТУТ
1. Создаём файл assets/components/minishop2/js/web/custom.js.
2. Меняем системную настройку ms2_frontend_js на [[+jsUrl]]web/custom.js.
3. В assets/components/minishop2/js/web/custom.js копируем содержимое этого файла.
!!! ВАЖНО!!! У вас должен быть подключен Bootstrap 5, как минимум скрипты. Если у вас другое модальное окно, то нужно переписать вот эту часть кода
targetModalEl = document.querySelector(targetSelector),
modal = new bootstrap.Modal(targetModalEl);
targetModalEl.querySelector('#msCart form input[name="count"]').value = response.data.total_count;
targetModalEl.querySelector('#msCart form input[name="key"]').value = response.data.key;
targetModalEl.querySelector('.modal-title').innerText = miniShop2.Cart.submitter.dataset.title;
modal.show();
4. Копируем сниппет msOrder, называем msOrderCustom в и удаляем вот этот код
if (!empty($_GET['msorder'])) {
return '';
}
if (empty($status['total_count'])) {
return '';
}
5. Модальное окно должно выглядеть примерно так
<div class="modal fade" id="oneClickModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4">Название товара</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="msCart">
<form method="post" class="ms2_form" role="form">
<input type="hidden" name="key" value=""/>
<div class="form-group">
<div class="input-group input-group-sm">
<input type="number" name="count" value="" class="form-control"/>
<div class="input-group-append">
<span class="input-group-text">{'ms2_frontend_count_unit' | lexicon}</span>
</div>
</div>
<button class="btn btn-sm" type="submit" name="ms2_action" value="cart/change">↻</button>
</div>
</form>
<span class="ms2_total_cost">{$total.cost}</span>
</div>
{'!msOrderCustom' | snippet}
</div>
</div>
</div>
</div>
Немного пояснений.
В custom.js места изменений отмечены комментариями custom code start и custom code end.
Чтобы иметь возможность поменять количество, я вставил кусок стандартного чанка tpl.msCart, а те изменения, которые внесены в сниппет, позволяют запускать его при пустой корзине, но в данном случае она сразу же наполняется, поэтому ошибки не будет.
Также, при успешном оформлении заказа, если выбрана оплата наличными или другой способ, не подразумевающий переход на страницу оплаты, я сделал переадресацию как при обычном оформлении заказа в моем случае на страницу /checkout?msorder=11.
Если у вас у страницы оформления заказа другой псевдоним, то поменяйте его вот в этом куске кода
if(document.location.pathname.indexOf('checkout') == -1){
document.location.href = document.location.origin + '/checkout'
+ (document.location.search ? document.location.search + '&' : '?')
+ 'msorder=' + response.data['msorder'];
}
Затевал я это всё больше из любопытства, мне было интересно возможно ли реализовать данный функционал поменяв только исходный js. Вроде бы получилось. Небольшое редактирование сниппета не в счёт.
В общем, как-то так. Если кому-то пригодится — хорошо, а нет — будут пользоваться сам, если в комментариях мне это желание не отобьют.
ДРУГОЙ ВАРИАНТ РЕАЛИЗАЦИИ МОЖНО ПОСМОТРЕТЬ ТУТ
Поблагодарить автора
Отправить деньги
Комментарии: 11
Как по мне, то очень сложно.
Может лучше создать кастомный хук formit, в котором можно сохранить заказ?
Может лучше создать кастомный хук formit, в котором можно сохранить заказ?
А что там сложного? Суммарно я дописал/изменил 50-60 строк кода, ну максимум 100, при этом основная логика создания заказа вообще никак не поменялась, что в теории позволит без проблем прикрутить оплату как это обычно делается в minishop2, и, вероятно, калькуляторы доставки, но как по мне это уже ни разу не заказ в 1 клик. А так да, можно и через FormIt. Вообще вариантов реализации можно придумать много, мне было интересно сделать меняя только js.
Артур, я начинающий, а как вызвать то модальное окно, что должно быть в ссылке «Заказать в один клик»?
В моём случае это обычное модальное окно Bootstrap, что у вас не знаю.
Модальное окно понятно, я имею ввиду саму ссылку:
Как она должна выглядеть: напр.
Как она должна выглядеть: напр.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#msOrderCustom">
Заказать в один клик
</button>
Но это просто вызывает модальное окно и не выводит значений
Т.е. у вас всё точно по инструкции… А в консоли браузера ошибки есть?
Выводит модальное окно по ссылке:
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#oneClickModalForm">
Заказать в один клик
</button>
, но в нем нет самого товара, нет стоимости, т.е. товар не подгружается. При попытке от отправить заказ, пишет: «Невозможно оформить пустой заказ»
Я же про ошибки в консоли спрашивал, а не про то получается оформить заказ или нет.
В консоли нет ошибок, я не понимаю КАК мне передать в это окно заказ.
Я вывел в шаблоне
Как мне передать заказ в это модальное окно не понимаю
Я вывел в шаблоне
[[msOrderCustom?
&tpl=`tpl.msOrder.oneClick`
]]
В tpl.msOrder.oneClick шаблон модального окна.Как мне передать заказ в это модальное окно не понимаю
Код из пункта 3 передаёт данные. Но я тебе рекомендую подождать до завтра. Завтра будет другая инструкция, попроще
Артур, может есть вариант как при реализации сделать отправку заказа именно 1 товара? Суть: когда в корзине лежит уже 10 товаров и посетитель на другом товаре оформляет купить в один клик, то в админку прилетеает не один товар, а 10+1. Заранее спасибо!
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.