Окно при добавлении в корзину

Вывод окна подтверждения после добавления товара в корзину

Если вам нужно простое окно, вы можете использовать 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="/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');
    }
});

Еще один пример всплывающего окна уведомления (growl) с использованием https://github.com/apvarun/toastify-js

$(document).on('cart-add-complete.commerce', function (e, params) {
    var instance = params.data.instance;
    switch (instance) {
        case 'comparison':
            var growlText = "Товар добавлен к сравнению";
            var growlLink = "/compare";
            break;
        case 'wishlist':
            var growlText = "Товар добавлен в избранное";
            var growlLink = "/favorites";
            break;
        case 'products':
        default:
            var growlText = "Товар добавлен в корзину";
            var growlLink = "/cart";
            break;
    }
    Toastify({
        text: growlText,
        close: true,
        destination: growlLink
    }).showToast();
});