msAltCart

Альтернативный скрипт корзины для магазина на базе MiniShop2 4.0.0 и выше.
Автор дополнения
Артур Шевченко
Пакетов
4
Закачек
556
Обычно отвечает в течение нескольких дней
Автор дополнения
Пакетов
4
Закачек
556
Обычно отвечает в течение нескольких дней
Версия 1.0.5-pl
Дата выпуска 02.03.2024
Загрузки 14
Просмотры 698
Внимание, этот компонент требует версию PHP 7.4 или выше! Если ваш сайт использует PHP ниже требуемого, установка этого дополнения может его сломать.
Внимание, этот компонент требует версию MODX не ниже 2.6 !
Может полностью заменить стандартную корзину, но не оформление заказа. При вызове на одной странице стандартной корзины и корзины компонента
между ними не будет синхронизации.

Зависимости
  • SendIt v1.1.0 и выше
  • MiniShop2 4.0.0 и выше
  • pdoTools 2.13.2 и выше


Возможности
  • Вывод любого количества корзин на одной страницы
  • Динамическое обновление всех корзин
  • Каждая корзина может иметь собственный шаблон
  • Изменение опций в корзине
  • JS API для программного управления корзиной
  • Получение статуса и состава корзины на фронте
  • Изменение логики работы посредством JS событий


Быстрый старт
  1. Установить компонент
  2. Подготовить чанки
  3. Вызвать некешированным сниппет getCarts


Подготовка чанков

Форме добавления товара в корзину нужно добавить атрибуты data-si-preset=«cart_add» data-si-form=«product-{$id}» data-si-nosave.
Кнопке в этой форме нужно установить type в значение button и добавить атрибут data-si-event=«click».
Родную разметку miniShop2 для формы и кнопки при этом следует удалить.

В отличие от оригинального чанка корзины, тут чанк разбит на два: обёртку и товар. Корневой элемент чанка товара должен содержать атрибут data-msac-product="{$key}".
Внутри коневого элемента можно разместить форму или несколько форм с изменяемыми полями, например количество и опции. Каждая такая форма должна иметь атрибуты
data-si-form=«change-options-{$key}» data-si-preset=«cart_change» data-si-event=«change» data-si-nosave. Атрибут data-si-form иметь произвольное,
но уникальное в рамках одной страницы значение.
Также внутри корневого элемента следует разместить форму удаления товара из корзины со следующими атрибутами data-si-form=«remove-{$key}» data-si-preset=«cart_remove».
Внутри этой формы должна быть кнопка с атрибутами type=«button» data-si-event=«click».
Для вставки изменяемых значений, например, стоимости товара, количества товара, картинки товара, общей стоимости корзины, общего веса, общего количества,
нужно чтобы каждый такой элементы был отдельным html элементом с атрибутом data-msac-prop. В качестве значения этого атрибута следует указывать ключ поля
cost, total_cost и т.д.
Внутри чанка-обёртки доступны следующие плейсхолдеры:
  • $rows — список товаров, должен быть расположен внутри блока с атрибутом data-msac-rows
  • $total — массив общих значений, должен быть расположен внутри блока с атрибутом data-msac-totals
Разместите в чанке-обёртке блок с атрибутом data-msac-empty для отображения пустой корзины.
В стилях должен быть реализован класс d-none для скрытия элементов на страницы. Каждый из трёх блоков (data-msac-rows, data-msac-totals, data-msac-empty)
должен отображаться в зависимости от пустоты плейсхолдера $rows. Логика понятна: если товары есть ($rows непустой) показываем data-msac-rows, data-msac-totals
и скрываем data-msac-empty. И наоборот, когда нет товаров в корзине ($rows пустой) скрываем data-msac-rows, data-msac-totals и показываем data-msac-empty.
В комплекте есть примеры всех чанков, кому непонятно словесное описание — смотрите пример.

Вызов сниппета

В шаблонах, где необходимо выводить корзины нужно вызвать сниппет getCarts.
{'!getCarts' | snippet: [
'tpls' => '{
 "maincart": { "wrapper":"@FILE msac/cart.tpl","row":"@FILE msac/cartrow.tpl" },
  "modal": { "wrapper":"@FILE msac/cartmodal.tpl","row":"@FILE msac/cartmodalrow.tpl" }
   }'
]}
Он принимает один параметр tpls — список корзин, которые расположены в данном шаблоне с чанками для каждой.
Данные можно передавать в формате JSON или в иде массива.
В этом же шаблоне ПОСЛЕ вызова необходимо добавить блоки для вывода корзин. Для вызова выше они будут такими
<div class="offcanvas-body" data-msac-cart="maincart" data-mspd-cart-wrap>
   {'maincart' | placeholder}
</div>

<div class="modal-body" data-msac-cart="modal" data-mspd-cart-wrap>
   {'modal' | placeholder}
</div>

Базовая настройка на этом закончена.

Быстрый переход к оформлению заказа

Если вы хотите, чтобы при добавлении в корзину всплывало окно с предложением оформить заказ, и при этом сайт использует Bootstrap можно использовать такой код
document.addEventListener('DOMContentLoaded', e => {
        const modalCartEl = document.getElementById('modalCart')
        if (modalCartEl) {
            const modalCart = new bootstrap.Modal(modalCartEl, {})
            modalCartEl.addEventListener('hide.bs.modal', () => {
                const rows = modalCartEl.querySelector(MsAltCart.config.rowsSelector);
                rows && (rows.innerHTML = '');
            })
            document.addEventListener('msac:row:add:after', e => {
                if (e.detail.cartName === 'modal') {
                    modalCart.show();
                }
            })
            document.addEventListener('msac:row:remove:before', e => {
                if (e.detail.cartName === 'modal') {
                    modalCart.hide();
                }
            })
        }
    })


JS API для управления корзиной

Добавить товар
MsAltCart.add(30, 2, {
  color: 'Оранжевый',
})

Удалить товар
MsAltCart.remove('msb1906def283e69f84e5700559f51582c')

Изменить товар
MsAltCart.change('msa6943f19b712772e2103beb283d615b4', 4, {
  color: 'Оранжевый',
})

Очистить корзину
MsAltCart.clean()

Получить статус и состав корзины
const promise = MsAltCart.status();
promise.then((result) => console.log(result));

1.0.5-pl

  • Поправил баг с событием инициализации, при котором оно срабатывало раньше, чем становился доступным объект MsAltCart.
  • Добавил в возвращаемые параметры при добавлении параметр row, содержащий данные последнего добавленного товара.
  • Добавил в возвращаемые значения параметр rid для добавления и изменения товаров, и параметр key для удаления.

1.0.4-pl

  • Поправил баг при котором ручной ввод нулевого количества не удалял товар из корзины.

1.0.3-pl

  • Добавил проверку на наличие файлов компонента msOptionsPrice2.

1.0.2-pl

  • Добавил поддержку ванильных скриптов минишопа.
  • Добавил перевод ключей заголовков в нижний регистр.

1.0.1-pl

  • Добавил синхронизацию при использовании стандартной корзины.
  • Исправил ошибки при отсутствии чанка отдельного товара.

1.0.0-pl

  • Первая сборка.

Последние обсуждения в сообществе MODX.pro