[СДЕЛАЙ САМ] 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, как минимум скрипты. Если у вас другое модальное окно, то нужно переписать вот эту часть кода
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. Вроде бы получилось. Небольшое редактирование сниппета не в счёт.
В общем, как-то так. Если кому-то пригодится — хорошо, а нет — будут пользоваться сам, если в комментариях мне это желание не отобьют.

ДРУГОЙ ВАРИАНТ РЕАЛИЗАЦИИ МОЖНО ПОСМОТРЕТЬ ТУТ
Артур Шевченко
07 ноября 2021, 00:35
modx.pro
1
2 202
+5
Поблагодарить автора Отправить деньги

Комментарии: 11

Aleksandr Huz
07 ноября 2021, 09:32
+3
Как по мне, то очень сложно.
Может лучше создать кастомный хук formit, в котором можно сохранить заказ?
    Артур Шевченко
    07 ноября 2021, 09:43
    0
    А что там сложного? Суммарно я дописал/изменил 50-60 строк кода, ну максимум 100, при этом основная логика создания заказа вообще никак не поменялась, что в теории позволит без проблем прикрутить оплату как это обычно делается в minishop2, и, вероятно, калькуляторы доставки, но как по мне это уже ни разу не заказ в 1 клик. А так да, можно и через FormIt. Вообще вариантов реализации можно придумать много, мне было интересно сделать меняя только js.
      Максим
      08 февраля 2023, 21:33
      0
      Артур, я начинающий, а как вызвать то модальное окно, что должно быть в ссылке «Заказать в один клик»?
        Артур Шевченко
        08 февраля 2023, 21:42
        0
        В моём случае это обычное модальное окно Bootstrap, что у вас не знаю.
          Максим
          08 февраля 2023, 21:48
          0
          Модальное окно понятно, я имею ввиду саму ссылку:
          Как она должна выглядеть: напр.
          <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#msOrderCustom">
            Заказать в один клик
          </button>
          Но это просто вызывает модальное окно и не выводит значений
            Артур Шевченко
            08 февраля 2023, 22:09
            0
            Т.е. у вас всё точно по инструкции… А в консоли браузера ошибки есть?
    Максим
    08 февраля 2023, 22:36
    0
    Выводит модальное окно по ссылке:

    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#oneClickModalForm">
      Заказать в один клик
    </button>
    , но в нем нет самого товара, нет стоимости, т.е. товар не подгружается. При попытке от отправить заказ, пишет: «Невозможно оформить пустой заказ»

      Артур Шевченко
      08 февраля 2023, 23:25
      0
      Я же про ошибки в консоли спрашивал, а не про то получается оформить заказ или нет.
        Максим
        08 февраля 2023, 23:43
        0
        В консоли нет ошибок, я не понимаю КАК мне передать в это окно заказ.
        Я вывел в шаблоне
        [[msOrderCustom?
        	&tpl=`tpl.msOrder.oneClick`
        ]]
        В tpl.msOrder.oneClick шаблон модального окна.
        Как мне передать заказ в это модальное окно не понимаю
          Артур Шевченко
          08 февраля 2023, 23:45
          0
          Код из пункта 3 передаёт данные. Но я тебе рекомендую подождать до завтра. Завтра будет другая инструкция, попроще
      Максим
      04 августа 2023, 08:36
      0
      Артур, может есть вариант как при реализации сделать отправку заказа именно 1 товара? Суть: когда в корзине лежит уже 10 товаров и посетитель на другом товаре оформляет купить в один клик, то в админку прилетеает не один товар, а 10+1. Заранее спасибо!
        Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
        11