RadicalMart 3: JavaScript
Как пользоваться JS RadicalMart
JavaScript RadicalMart разделен на ядро действий и стандартное отображение. Ядро отправляет AJAX-запросы, обновляет данные и генерирует события. Стандартное отображение слушает эти события и показывает тосты, offcanvas корзины, сообщения Joomla, блокировки кнопок, индикаторы и прогресс оформления заказа. Поэтому чаще всего кастомизация делается не заменой всего скрипта, а отключением нужного стандартного действия и подпиской на событие.
Ядро действий
cart, checkout, login, settings
Отвечает за AJAX, валидацию, обновление данных и генерацию CustomEvent. Эти скрипты нужны, если вы хотите сохранить штатную работу корзины, оформления заказа, входа или настроек пользователя.
Стандартное отображение
com_radicalmart.site
Создает window.RadicalMartDisplay и показывает визуальные реакции: тост добавления, offcanvas корзины, ошибки, блокировку кнопок, скидки и прогресс checkout.
Триггеры
com_radicalmart.site.trigger
Добавляет функцию window.RadicalMartTrigger() и событие RadicalMartTrigger. Стандартный display вызывает его для add_to_cart и remove_from_cart.
Скрипты и настройки
| Asset | Что делает | Когда нужен |
|---|---|---|
com_radicalmart.site.cart | корзина | Создает window.RadicalMartCart(), обрабатывает add/remove/quantity/display_module, обновляет элементы radicalmart-cart-display и генерирует события корзины. |
com_radicalmart.site.checkout | оформление заказа | Создает window.RadicalMartCheckout(), обновляет данные checkout, проверяет заказ перед созданием, показывает login layout и отправляет заказ. |
com_radicalmart.site.login | вход и регистрация | Создает window.RadicalMartLogin(), загружает форму входа, отправляет login/registration и управляет кодом входа. |
com_radicalmart.site.settings | кабинет пользователя | Создает window.RadicalMartSettings(), сохраняет блоки настроек и обрабатывает аватар. |
com_radicalmart.site | стандартный display | Слушает события cart/checkout/login и выполняет визуальные действия. Подключается, если параметр компонента radicalmart_js включен. |
com_radicalmart.site.trigger | маркетинговые события | Подключается, если параметр trigger_js включен. Без него события ядра cart/checkout остаются, но глобальный RadicalMartTrigger не создается. |
com_radicalmart.site.variability | вариативность товара | Используется в блоке выбора вариаций товара. Функция window.onRadicalMartSelectVariability(field) выбирает подходящий товар и переводит пользователя на его ссылку. |
Отключить стандартный display
radicalmart_js = 0
Отключает com_radicalmart.site: стандартный тост, offcanvas, Joomla-сообщения, блокировки кнопок и часть автоскрытий. AJAX-корзина и checkout-ядро могут продолжать работать, если соответствующие asset подключены шаблоном страницы.
Отключить глобальные триггеры
trigger_js = 0
Отключает com_radicalmart.site.trigger. Это не отменяет события onRadicalMartCartAfterAddProduct и другие CustomEvent ядра, но убирает общий канал RadicalMartTrigger.
Стандартное отображение
Объект window.RadicalMartDisplay создается стандартным display-скриптом после DOMContentLoaded. Событие onRadicalMartDisplayAfterSetConfig получает этот объект в event.detail. Если нужно заменить только одно поведение, оставьте radicalmart_js включенным и выключите конкретный флаг.
cart
window.RadicalMartDisplay.cart
Отвечает за визуальное поведение корзины: блокировку кнопок добавления и открытия модуля, бейдж корзины, блоки скидок, offcanvas корзины, уведомление о добавлении, ошибки Joomla и перезагрузку страницы корзины после удаления последнего товара.
Флаги:
addButtonsLock displayModuleButtonsLock discountHide productsDiscountHide badgeHide moduleHide moduleShow pageErrors pageReload notification_addShow errorsShow
addButtonsLock displayModuleButtonsLock discountHide productsDiscountHide badgeHide moduleHide moduleShow pageErrors pageReload notification_addShow errorsShow
checkout
window.RadicalMartDisplay.checkout
Отвечает за форму оформления заказа: блокировку кнопки оформления, блок скидки, сообщения проверки заказа, loading доставки и оплаты, модальное окно входа, ошибки Joomla и прогресс создания заказа. Ключ globalLoadingShow есть в конфигурации display, но общий loading формы показывает checkout-ядро.
Флаги:
submitButtonsLock discountHide checkErrorsShow checkErrorsProductsShow globalLoadingShow shippingLoadingShow paymentLoadingShow loginShow errorsShow createOrderProgress
submitButtonsLock discountHide checkErrorsShow checkErrorsProductsShow globalLoadingShow shippingLoadingShow paymentLoadingShow loginShow errorsShow createOrderProgress
login
window.RadicalMartDisplay.login
Отвечает за форму входа: блокировку кнопок открытия формы, показ модального окна и ошибки Joomla. Ключ называется именно fromShow.
Флаги:
buttonsLock fromShow errorsShow
buttonsLock fromShow errorsShow
Пример: выключить часть стандартного поведения
onRadicalMartDisplayAfterSetConfig
document.addEventListener('onRadicalMartDisplayAfterSetConfig', (event) => {
event.detail.cart.notification_addShow = false;
event.detail.cart.moduleShow = false;
event.detail.checkout.errorsShow = false;
});
event.detail.cart.notification_addShow = false;
event.detail.cart.moduleShow = false;
event.detail.checkout.errorsShow = false;
});
События JavaScript
События RadicalMart отправляются через document.dispatchEvent(new CustomEvent(name, { detail })). Подписывайтесь через document.addEventListener(name, callback). В успешных ответах event.detail обычно содержит данные ответа контроллера, а при ошибке приходит объект с error и исходными данными в entry.
| Событие | Когда срабатывает | Что делать в обработчике |
|---|---|---|
onRadicalMartCartBeforeAddProduct | до добавления товара | Можно проверить product_id, quantity, plugins, заблокировать свой UI или записать событие аналитики до запроса. |
onRadicalMartCartAfterAddProduct | после добавления товара | Основное место для замены стандартного уведомления. Проверяйте event.detail.error; при успехе доступны данные ответа и исходная операция. |
onRadicalMartCartAfterUpdateDisplayData | после обновления данных корзины | Подходит для синхронизации своих счетчиков, мини-корзины и блоков итогов после любого изменения корзины. |
onRadicalMartCartAfterRemoveProduct | после удаления товара | Используйте для своей реакции на удаление, закрытия кастомной мини-корзины или отправки аналитики. |
onRadicalMartCartRenderLayout | после вставки HTML layout | Срабатывает для layout notification_add и module. В detail есть name и созданный element. |
onRadicalMartCheckoutAfterUpdateDisplayData | после пересчета checkout | Подходит для обновления своего sidebar, промо-блоков, текста доставки и состояния кнопки оформления. |
onRadicalMartCheckoutAfterCheckData | после проверки заказа | Используйте для своей визуализации ошибок изменения корзины, доставки, оплаты или товаров. |
onRadicalMartCheckoutCreateOrderProgress | этапы создания заказа | Позволяет заменить стандартный список прогресса. В detail приходит type, message, иногда redirect. |
onRadicalMartCheckoutAfterCreateOrder | после ответа createOrder | Срабатывает перед редиректом, при показе login layout или повторном создании заказа после регистрации. |
onRadicalMartLoginRenderLayout | после вставки формы входа | Можно заменить показ модального окна, доинициализировать поля или подключить кастомную аналитику. |
RadicalMartTrigger | глобальный триггер | Срабатывает только при подключенном com_radicalmart.site.trigger. Стандартный display отправляет actions add_to_cart и remove_from_cart. |
Атрибуты в разметке
Корзина
radicalmart-cart
Интерактив корзины и товара: product с data-id, quantity, quantity_plus, quantity_minus, add, remove, display_module, plugins, служебные блоки discount-block и product-discount-block. Для вывода строк и чисел из объекта корзины используйте radicalmart-cart-display или data-radicalmart-cart-display: total.products, total.final_string, products.0.order.sum_final_string.
Checkout
radicalmart-checkout
Основная форма checkout использует form, loading, submit-button, discount-block, check-error, check-error-products, create-order-progress, loginForm и loginFormError. Для вывода данных пересчитанного заказа используйте radicalmart-checkout-display или data-radicalmart-checkout-display: total.final_string, shipping.order.price.final_string, payment.order.price.fee_string, products.0.order.quantity.
Вход
radicalmart-login
Кнопка открытия и формы входа: display_form, form_login, form_registration, form_error, code_button, code_start, code_success, code_error, code_field, code_repeat и code_repeat_message.
Настройки пользователя
radicalmart-settings
Формы личных настроек используют container, error, success, avatar и avatar_delete. Для вывода данных пользователя используется radicalmart-settings-display или data-radicalmart-settings-display, например name. Если значение лежит глубже, укажите путь через точку.
Вывод значений через display-атрибуты
cart, checkout, settings
Display-атрибуты нужны для простой подстановки данных без собственного JavaScript. Скрипт берёт путь из атрибута, читает его от объекта текущего контекста и записывает найденное строковое или числовое значение в textContent элемента.
<span radicalmart-cart-display='total.final_string'></span>
<span data-radicalmart-cart-display='total.products'></span>
<span radicalmart-cart-display='products.0.order.sum_final_string'></span>
<span radicalmart-checkout-display='total.final_string'></span>
<span radicalmart-checkout-display='shipping.order.price.final_string'></span>
<span radicalmart-checkout-display='payment.order.price.fee_string'></span>
<span data-radicalmart-checkout-display='products.0.order.quantity'></span>
<span radicalmart-settings-display='name'></span>
<span data-radicalmart-cart-display='total.products'></span>
<span radicalmart-cart-display='products.0.order.sum_final_string'></span>
<span radicalmart-checkout-display='total.final_string'></span>
<span radicalmart-checkout-display='shipping.order.price.final_string'></span>
<span radicalmart-checkout-display='payment.order.price.fee_string'></span>
<span data-radicalmart-checkout-display='products.0.order.quantity'></span>
<span radicalmart-settings-display='name'></span>
Путь разделяется точками. В корзине он читается от объекта корзины, в checkout — от объекта заказа, в settings — от объекта пользователя после сохранения. Если путь указывает на объект, массив, пустое или нулевое значение, элемент будет очищен; выводите конечное строковое или числовое поле.
В строках товаров индекс должен совпадать с индексом продукта в ответе: products.N.order.final_string. В готовых шаблонах RadicalMart этот индекс берётся из цикла строки товара. В статичной разметке удобнее выводить общие итоги: total.final_string, total.products, total.discount_string.
Минимальная разметка товара
cart + display
<div radicalmart-cart='product' data-id='123'>
<input radicalmart-cart='quantity' type='text' name='quantity' value='1' min='1' step='1'>
<button type='button' radicalmart-cart='quantity_minus'>-</button>
<button type='button' radicalmart-cart='quantity_plus'>+</button>
<button type='button' radicalmart-cart='add'>В корзину</button>
</div>
<span radicalmart-cart-display='total.products'></span>
<input radicalmart-cart='quantity' type='text' name='quantity' value='1' min='1' step='1'>
<button type='button' radicalmart-cart='quantity_minus'>-</button>
<button type='button' radicalmart-cart='quantity_plus'>+</button>
<button type='button' radicalmart-cart='add'>В корзину</button>
</div>
<span radicalmart-cart-display='total.products'></span>
Примеры кастомизации
Заменить уведомление о добавлении
notification_addShow = false
const setupRadicalMartDisplay = (config) => {
config.cart.notification_addShow = false;
};
document.addEventListener('onRadicalMartDisplayAfterSetConfig', (event) => {
setupRadicalMartDisplay(event.detail);
});
if (window.RadicalMartDisplay) {
setupRadicalMartDisplay(window.RadicalMartDisplay);
}
document.addEventListener('onRadicalMartCartAfterAddProduct', (event) => {
if (!event.detail.error) {
Joomla.renderMessages({ message: ['Товар добавлен в корзину'] });
}
});
config.cart.notification_addShow = false;
};
document.addEventListener('onRadicalMartDisplayAfterSetConfig', (event) => {
setupRadicalMartDisplay(event.detail);
});
if (window.RadicalMartDisplay) {
setupRadicalMartDisplay(window.RadicalMartDisplay);
}
document.addEventListener('onRadicalMartCartAfterAddProduct', (event) => {
if (!event.detail.error) {
Joomla.renderMessages({ message: ['Товар добавлен в корзину'] });
}
});
Вызвать корзину вручную
window.RadicalMartCart()
window.RadicalMartCart().addProduct(123, 1, {}, false);
window.RadicalMartCart().updateDisplayData();
window.RadicalMartCart().displayModule();
// После вставки своей карточки товара:
window.RadicalMartCart().loadActions(newContainer);
window.RadicalMartCart().updateDisplayData();
window.RadicalMartCart().displayModule();
// После вставки своей карточки товара:
window.RadicalMartCart().loadActions(newContainer);
Слушать маркетинговый триггер
RadicalMartTrigger
document.addEventListener('RadicalMartTrigger', (event) => {
if (event.detail.action === 'add_to_cart') {
console.log(event.detail.product_id, event.detail.quantity);
}
});
if (event.detail.action === 'add_to_cart') {
console.log(event.detail.product_id, event.detail.quantity);
}
});
Расширить проверку checkout
onRadicalMartGetCheckoutCheckDataPaths
public function onRadicalMartGetCheckoutCheckDataPaths(array &$checkDataPaths): void
{
$checkDataPaths[] = 'shipping';
$checkDataPaths[] = 'payment';
}
{
$checkDataPaths[] = 'shipping';
$checkDataPaths[] = 'payment';
}
Это PHP-событие влияет на массив путей, которые JS сравнивает перед созданием заказа. По умолчанию проверяются товары.
Отключить весь standard display
radicalmart_js = 0
Используйте этот вариант, если тема полностью сама управляет тостами, offcanvas, ошибками и состояниями кнопок. При этом оставьте ядро корзины и checkout подключенным, если нужны AJAX-действия RadicalMart.
Практические правила
-
Если нужно заменить только уведомление, не отключайте весь radicalmart_js. Достаточно выключить window.RadicalMartDisplay.cart.notification_addShow и слушать onRadicalMartCartAfterAddProduct.
-
Если кастомный скрипт загружается после DOMContentLoaded, добавляйте fallback: сначала подпишитесь на onRadicalMartDisplayAfterSetConfig, затем отдельно проверьте уже существующий window.RadicalMartDisplay.
-
Для своей мини-корзины слушайте события ядра корзины, а данные берите из event.detail или из window.RadicalMartCart().item после обновления.
-
После динамической вставки карточек товара вызовите window.RadicalMartCart().loadActions(container), иначе кнопки внутри нового HTML не получат обработчики.
-
Не полагайтесь только на RadicalMartTrigger для бизнес-логики: он зависит от trigger_js. Для логики интерфейса используйте события onRadicalMartCart*, onRadicalMartCheckout* и onRadicalMartLogin*.
-
Проверяйте кастомизацию на локальной или отдельной копии сайта: добавление, изменение количества, удаление последнего товара, открытие модуля корзины, оформление заказа, ошибка checkout и сценарий входа.
ТЗ для генерации ИИ
Этот блок можно дать ИИ, чтобы он создал JS-кастомизацию без доступа к ядру RadicalMart. Уточните ему конкретный сценарий: заменить toast, свою мини-корзину, свою аналитику, свой прогресс checkout или полное отключение стандартного display.
Готовый промпт
пример для замены уведомления
Создай JavaScript-кастомизацию для RadicalMart 3 на Joomla 5.
Задача: заменить стандартное уведомление после добавления товара в корзину и оставить AJAX-корзину RadicalMart рабочей.
Справка для сверки:
- документация по JS RadicalMart: https://radicalmart.ru/baza-znanij/razrabotchikam/radicalmart-js
- события RadicalMart: https://radicalmart.ru/baza-znanij/razrabotchikam/radicalmart-plugins-events
- Joomla Web Assets: https://manual.joomla.org/docs/general-concepts/web-asset-manager/
Требования:
- не переписывать файлы RadicalMart;
- не отключать com_radicalmart.site.cart, если нужны AJAX-добавление и пересчет корзины;
- отключить только window.RadicalMartDisplay.cart.notification_addShow через onRadicalMartDisplayAfterSetConfig;
- подписаться на onRadicalMartCartAfterAddProduct и проверять event.detail.error;
- если скрипт может загрузиться после DOMContentLoaded, применить настройку сразу при наличии window.RadicalMartDisplay;
- не использовать window.RadicalMartDisplay до его инициализации без проверки;
- для вывода сумм и других строковых или числовых значений использовать radicalmart-cart-display, radicalmart-checkout-display, data-radicalmart-cart-display или data-radicalmart-checkout-display; путь задавать через точки, например total.final_string;
- вернуть готовый JS и объяснить, куда его подключить через Joomla/YOOtheme.
Задача: заменить стандартное уведомление после добавления товара в корзину и оставить AJAX-корзину RadicalMart рабочей.
Справка для сверки:
- документация по JS RadicalMart: https://radicalmart.ru/baza-znanij/razrabotchikam/radicalmart-js
- события RadicalMart: https://radicalmart.ru/baza-znanij/razrabotchikam/radicalmart-plugins-events
- Joomla Web Assets: https://manual.joomla.org/docs/general-concepts/web-asset-manager/
Требования:
- не переписывать файлы RadicalMart;
- не отключать com_radicalmart.site.cart, если нужны AJAX-добавление и пересчет корзины;
- отключить только window.RadicalMartDisplay.cart.notification_addShow через onRadicalMartDisplayAfterSetConfig;
- подписаться на onRadicalMartCartAfterAddProduct и проверять event.detail.error;
- если скрипт может загрузиться после DOMContentLoaded, применить настройку сразу при наличии window.RadicalMartDisplay;
- не использовать window.RadicalMartDisplay до его инициализации без проверки;
- для вывода сумм и других строковых или числовых значений использовать radicalmart-cart-display, radicalmart-checkout-display, data-radicalmart-cart-display или data-radicalmart-checkout-display; путь задавать через точки, например total.final_string;
- вернуть готовый JS и объяснить, куда его подключить через Joomla/YOOtheme.