[СДЕЛАЙ САМ] 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
602
+5
Поблагодарить автора Отправить деньги

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

Aleksandr Huz
07 ноября 2021, 09:32
+3
Как по мне, то очень сложно.
Может лучше создать кастомный хук formit, в котором можно сохранить заказ?
    Артур
    07 ноября 2021, 09:43
    0
    А что там сложного? Суммарно я дописал/изменил 50-60 строк кода, ну максимум 100, при этом основная логика создания заказа вообще никак не поменялась, что в теории позволит без проблем прикрутить оплату как это обычно делается в minishop2, и, вероятно, калькуляторы доставки, но как по мне это уже ни разу не заказ в 1 клик. А так да, можно и через FormIt. Вообще вариантов реализации можно придумать много, мне было интересно сделать меняя только js.
    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
    2