[СДЕЛАЙ САМ] AjaxFormItLogin и MiniShop2 - заказ в 1 клик - быстро, просто и бесплатно.

Приветствую, решил зафиксировать для себя и поделится с сообществом, прежде всего с новичками, актуальным способом быстро и без боли добавить в интернет-магазин на базе MiniShop2 функцию «Заказать в 1 клик.»

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

Инструкция

1. Скачиваем и устанавливаем из репозитория modstore компоненты AjaxFormItLogin и MiniShop2, если ещё этого не сделали.

2. Везде где нужно иметь возможность быстрого заказа, добавляем кнопку

<button class="btn btn-warning" data-product-id="{$id}" type="button" data-bs-toggle="modal" data-bs-target="#oneClickModal"> Купить в один клик  </button>

У кнопки обязательно должен быть атрибут data-product-id со значение ID добавляемого товара.

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

<div class="modal fade" id="oneClickModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Купить в один клик</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {'!AjaxFormItLogin' | snippet: [
                    'form' => '@FILE chunks/forms/oneclickorder.tpl',
                    'hooks' => 'oneClickHook',
                    'validate' => 'receiver:required,email:email:required,id:required',                    
                    'validationErrorMessage' => 'Исправьте ошибки!'                   
                ]}
            </div>
        </div>
    </div>
</div>

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

4. Создаем чанк с формой chunks/forms/oneclickorder.tpl

<form>
    <input type="hidden" name="delivery" value="1">
    <input type="hidden" name="payment" value="1">
    <input type="hidden" name="options[]" value="">
    <input type="hidden" name="id" value="">
    <div class="mb-3">
        <label class="form-label">Имя получателя</label>
        <input type="text" class="form-control" name="receiver">
    </div>
    <div class="mb-3">
        <label class="form-label">Email</label>
        <input type="email" class="form-control" name="email">
    </div>
    <div class="mb-3">
        <label class="form-label">Количество</label>
        <input type="number" class="form-control" name="count" value="1" min="1">
    </div>
    <button type="submit" class="btn btn-primary">Заказать</button>
</form>

В форме обязательно должны быть поля с именами delivery, payment и id. Поскольку мы делаем форму быстрого заказа выбор способов оплаты и доставки я не предоставляю, однако, если такая необходимость есть в вашем проекте, вы можете предоставить пользователю выбор. ПРи этом имейте в виду, если для различных способов доставки доступны различные способы оплаты, логику их взаимодействия писать придётся самостоятельно, так как скрипты MiniShop2, отвечающие за это, тут не подключаются.

5. Создаём хук, или, другими словами, сниппет, oneClickHook со следующим кодом:

<?php
$values = $hook->getValues();
$ms2 = $modx->getService('minishop2');
$ms2->initialize('web');
$ms2->cart->clean();
$count = (float)$values['count'] ?: 1;
$ms2->cart->add((int)$values['id'], $count, $values['options']); // добавляем товар в корзину
$ms2->order->config['json_response'] = true; // просим вернуть нам json
// добавляем поля в заказ
$ms2->order->add('receiver', $values['receiver']); 
$ms2->order->add('email', $values['email']);
$ms2->order->add('delivery', $values['delivery']);
$ms2->order->add('payment', $values['payment']);
$ms2->order->submit(); // отправляем заказ

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

6. Напишем JS, который обработает ответ сервера: закроет модалку, покажет уведомление, сделает переадресацию на оплату, если нужно. Так же этот скрипт заполнит поле с ID товара в нашей форме при открытии модального окна.

document.addEventListener('DOMContentLoaded', () => {
    const oneCLickModal = document.getElementById('oneClickModal')
    oneCLickModal.addEventListener('show.bs.modal', function (e) {
        oncLickModal.querySelector('[name="id"]').value =  e.relatedTarget.dataset.productId;
    });

    document.addEventListener('afl_complete', (e) => {
        if(e.detail.response.success){
            const modal = bootstrap.Modal.getInstance(oneCLickModal);
            modal.hide();
            if(e.detail.response.data.redirect){
                e.detail.response.message = 'Заказ успешно создан. Осталось только оплатить.';
                setTimeout(() =>{
                    window.location.href = e.detail.response.data.redirect
                }, 3000);
            }else{
                e.detail.response.message = 'Заказ успешно создан';
            }
        }
    });
});

7. Укажем в системной настройке ms2_email_manager куда отправлять уведомления о новом заказе и всё готово.

Я потратил 30 минут на реализацию этого функционала, вы же теперь успеете не только всё сделать, но и чайку попить)))

Array ( [corePath] => /home/p/paldrivepm/public_html/core/components/ajaxformitlogin/ [assetsUrl] => /assets/components/ajaxformitlogin/ [actionUrl] => /assets/components/ajaxformitlogin/action.php [formSelector] => afl_form_1051631402 [json_response] => 1 [fileUplodedProgressMsg] => Загружено: [fileUplodedSuccessMsg] => Данные полностью загружены на сервер! [fileUplodedErrorMsg] => Произошла ошибка при загрузке данных на сервер! [ajaxErrorMsg] => Форма не была отправлена! Свяжитесь с администратором. [notifySettingsPath] => assets/components/ajaxformitlogin/js/message_settings.json [frontend_js] => [[+assetsUrl]]js/default.js [notifyClassPath] => ./aflizitoast.class.js [notifyClassName] => AflIziToast [form] => @FILE chunks/forms/oneclickorder.tpl [snippet] => FormIt [hooks] => oneClickHook [emailTo] => [emailFrom] => [emailSubject] => [emailTpl] => aflExampleEmail [successMessage] => Форма успешно отправлена! Менеджер свяжется с Вами в течение 5 минут. [clearFieldsOnSuccess] => 1 [transmittedParams] => ["success" => "", "error" => "aliases"] [aliases] => email==Email [validate] => receiver:required,email:email:required,id:required [showUploadProgress] => 1 [spamProtection] => 1 [validationErrorMessage] => Исправьте ошибки! [secret] => hjNKTgZS [secret.vTextContains] => Кажется Вы робот. Если это не так, обновите страницу. [pageId] => 4 [metrics] => [counterId] => )

[[!msProducts?
                  &parents=`2`
                  &depth=`2`
                  &limit=`6`
                  &tpl=`tpl.msProducts.row.mainpage`
                  &optionFilters=`{"sklad:>":0}`
                  &sortby=`publishedon`
                  &sortdir=`DESC`
                ]]

{'!AjaxFormItLogin' | snippet: [
                    'form' => 'tpl.oneclickorder',
                    'hooks' => 'oneClickHook',
                    'validate' => 'receiver:required,email:email:required,phone:tel:required,id:required',                    
                    'validationErrorMessage' => 'Заполните обязательные поля!'                   
  ]}

[2023-02-12 15:56:37] (ERROR @ /home/p/paldrivepm/public_html/core/components/pdotools/model/pdotools/pdotools.class.php : 999) Unexpected token ':' in dab80369dc94a301e23cc1a737f03eac line 196, near '{"sklad:>":' <- there

const modal = bootstrap.Modal.getInstance(oncLickModal);

$tmp = $ms2->cart->get();
$ms2->cart->clean();

$ms2->cart->set($tmp);