Вікно при додаванні в кошик

Виведення вікна підтвердження після додавання товару до кошика

Якщо вам потрібне просте вікно, ви можете використовувати jquery-подію cart-add-complete.commerce:

$(document).on('cart-add-complete.commerce', function(e, params) {
    alert('Товар в кошику!');
});

Але найчастіше цього недостатньо, тому що із параметрів події можна дістати лише ідентифікатор доданого товару. В такому випадку може допомогти серверна подія OnCommerceAjaxResponse, яка дозволить модифікувати відповідь сервера після додавання товару і додати у відповідь свої дані.

Допустимо, вам потрібно, щоб у вікні показувалася назва товару та вміст кошика. Для цього створіть плагін:

switch ($modx->event->name) {
    case 'OnCommerceAjaxResponse': {
        if (empty($_GET['q']) || empty($_POST['action'])) {
            break;
        }

        // потрібна тільки подія додавання до кошика
        if ($_GET['q'] != 'commerce/action' || $_POST['action'] != 'cart/add') {
            break;
        }

        // тільки успішне додавання до кошика товарів
        if ($response['status'] != 'success' || $response['instance'] != 'products') {
            break;
        }

        // отримуємо кошик
        $cart = ci()->carts->getCart($response['instance']);

        // отримуємо рядок кошика за його ідентифікатором
        $row  = $cart->get($response['row']);

        if ($row) {
            // формуємо заголовок вікна - назва товару
            $product = $modx->runSnippet('DocLister', [
                'idType'    => 'documents',
                'documents' => $row['id'],
                'tpl'       => '@CODE:Товар «[+pagetitle+]» додано до кошика!',
            ]);

            // формуємо кошик
            $cart = $modx->runSnippet('Cart', [
                'theme'    => 'mini',
                'ownerTPL' => '@CODE:
                    <div data-commerce-cart="[+hash+]">
                        <table class="table">
                            <thead>
                                <tr>
                                    <td>[%cart.item_title%]</td>
                                    <td>[%cart.count%]</td>
                                    <td class="text-xs-right">[%cart.item_price%]</td>
                                    <td class="text-xs-right">[%cart.item_summary%]</td>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <td colspan="3">[%cart.total%]:</td>
                                    <td class="text-xs-right">[[PriceFormat? &price=`[+total+]` &convert=`0`]]</td>
                                </tr>
                            </tfoot>
                            <tbody>
                                [+dl.wrap+]
                            </tbody>
                        </table>
                    </div>
                ',
            ]);

            // додаємо у відповідь сервера розмітку модального вікна
             //! ідентифікатор сторінки замовлення має бути заповнений у налаштуваннях плагіна Commerce!
            $params['response']['popup'] = ci()->tpl->parseChunk('@CODE:
                <div class="modal fade" id="popupcart" tabindex="-1" role="dialog">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <button type="button" class="close icon-close" data-dismiss="modal"></button>
                            <div class="modal-title">
                                [+product+]
                            </div>
                            <div class="modal-body">
                                <p>Склад кошика:</p>
                                [+cart+]
                            </div>
                            <div class="modal-footer">
                                <a href="[+order_url+]" class="btn btn-sm btn-orange">Оформити замовлення</a>
                                <a href="/ua/04_extras/commerce/99_primery/50_okno_pri_dobavlenii_v_korzinu.html#" class="btn btn-sm btn-secondary" data-dismiss="modal">продовжити покупки</a>
                            </div>
                        </div>
                    </div>
                </div>
            ', [
                'product'   => $product,
                'cart'      => $cart,
                'order_url' => $modx->makeUrl($modx->commerce->getSetting('order_page_id')),
            ]);
        }
        break;
    }
}

Щоб показати це вікно, додайте на сторінку js-код. Він перевірятиме, чи є у відповіді розмітка модального вікна, і якщо є – показувати його.

$(document).on('cart-add-complete.commerce', function(e, params) {
    if (params.response.popup) {
        $('#popupcart, .modal-backdrop').remove();
        var $modal = $(params.response.popup);
        $modal.on('hidden.bs.modal', function() {
            $modal.remove();
        });
        $modal.appendTo(document.body).modal('show');
    }
});