При модернизации модуля Mini Cart HK PRO под Joomla4 рекомендуется использовать весь арсенал  API Hikashop. Но именно здесь у меня возникли проблемы по использованию встроенных в Hikashop форм, классов, контроллеров, функций и скриптов в режиме ajax

Как я упоминал, все встроенные скрипты по ajax можно найти в media/js/hikashop.js.  Для использования AJAX  разработчики Hikashop рекомендуют использовать запись: window.Oby.registerAjax () - поэтому используем готовый код с одного из шаблонов PHP Hikashop:

 Попробуем создать событие (т.е. при обновлении нашей корзины товаров должно что-то происходить). Первое, что приходит на ум:

$eventRefrech ='"checkout.minicart.updated"';

Спешу огорчить - в таком изложении в режиме ajax работают только стандартные модули корзины (автоматически обновляются без перезагрузки страницы). Это работают уже установленные в Hikashop по умолчанию   2 прослушивателя событий:

$events = '["cart.updated","checkout.cart.updated"]';

На этом этапе наш новый модуль MINI CART HK PRO работает частично ( при изменении количества товаров в самой корзине  шапка модуля не изменяет свои значения [общая сумма корзины остается прежней], но уже появляется значок - спинер "загрузки", но сама форма документа не меняется и только при обновлении самой страницы все приходит в норму)

 Разберемся с кодом. Так как в Joomla нет механизма событий, а в Hikashop он уже внедрен,  используем уже готовую конструкцию

window.Oby.registerAjax(<?php echo $events; ?>, function(params) {...}

При обновлении корзины с Вашими товарами (стандартное событие $events = "cart.updated")  начнет работать код javascript, помещенный в {........}. Наша задача , чтобы все заработало как надо, не ошибиться с копированием кода PHP в свой проект.

если со стр. 212-215 более-менее все понятно, то со стр. 217 надо внести ясность

Стандартная функция hikashop_completeLink имеет следующую конфигурацию ($link, $popup=false, $redirect=false, &$js=false, $frontend=false) {...}

В нашем случае, эти переменные функции имеют вид:

$link = 'product&task=cart&module_id='.$module_id . '&module_type='.$_cart->cart_type';
$popup = true;
&$js = false;
$frondend = true;

Обратите внимание на $popup, который должен обеспечивать режим ajax. ($popup ==='ajax' === true)

При $popup = false наш новый модуль не реагирует на нажатия кнопок внутри модуля и не перезагружается в режиме ajax . Не забываем про это.

Не смотря, на работоспособность модуля (режим ajax уже работает) на этом этапе для получения обновленной формы модуля MINI CART PRO рекомендуется перезагрузить текущую страницу  - для этого добавим строчку:

location.reload()

Теперь перед нами снова наш, полностью обновленный,  модуль MINI CART PRO с новыми значениями

Остается доработать только стиль CSS (если кому-то не нравится действующий вид модуля)

Кстати, при использовании одноименных форм (id & name), мы можем получить доролнительную синхронизацию работы всех модулей  и форм, что тоже интересно. 

P.S.

Читая англоязычный форум о Hikashop (только там предлагают толковые решения), нашел дополнительно:

Запись fireAjax('cart.updated')  обновит все параметры корзины и сами корзины на странице --> fireAjax: function(name,params) {...} .

Запись hikashop.submitCartModule(this, 'hikashop_cart_<?php echo $module_id; ?>', 'cart') отправит данные текущего модуля корзины, 
а затем обновит все корзины на странице
Заметил, сам модуль MINI CART PRO ведет себя по-разному, в Joomla3 при отсутствии товаров в корзине при добавлении товара нет ajax обновления корзины, a в Joomla4 - это происходит само собой (т.е. как задумано).
Вообще, все должно работать так:
  1. чтобы отследить нужное событие, во-первых, надо его создать (или дополнить существующее событие)
  2. одновременно надо создать новый триггер (ввести новое название триггера - если триггер уже существует, то его надо модифицировать: дополнить PHP кодом, если это возможно) - что будет изменено на странице сайта при нажатии на наш объект (какой параметр или группа переменных).
  3.  запланировать взаимодействии с пользователем - notify: false (не уведомлять пользователя об произведенных изменениях)

В нашем случае (для Joomla3) кнопка представляет тег <button>  В КОРЗИНУ ➤ 

  • в Hikashop для передачи данных в корзину используется стандартное событие javascript - oncklick (щелчок  левой кнопки мышки на выбранном элементе) - "addToCart -- В КОРЗИНУ"  -->при этом onclick =  if(window.hikashop.addToCart) { return window.hikashop.addToCart(this); } --> функция addToCart: function(el, type, container, data) {...} представляет одну из многочисленных функции hikashop.js

кнопка addToCart должна содержать информацию, необходимую для работоспособности (обновления) нашего модуля MINI CART PRO, т.е. this (объект addToCart)  должен содержать следующую информацию: 

url = el.getAttribute('href'),
if(!url) url = el.getAttribute('data-href');
url += (url.indexOf('?') >= 0 ? '&' : '?') + 'tmpl=raw';
//В новых версиях Joomla '&tmpl=raw' в запросе обеспечивает режим ajax-обновления модуля
cart_type = ((type !== 'wishlist') ? 'cart' : 'wishlist'), containerName = el.getAttribute('data-addTo-div'), extraContainer = el.getAttribute('data-addTo-extra'), dest_id = el.getAttribute('data-addTo-cartid'); product_id = (cart_type == 'cart') ? el.getAttribute('data-addToCart') : el.getAttribute('data-addToWishlist');

 

<кнопка button #addToCart -- В КОРЗИНУ ># >
type="button" id="hikashop_product_quantity_field_1_add_to_cart_button" class="hikabtn hikacart" style="display: none;" data-addtocart="134" data-addto-div="hikashop_product_form" data-addto-class="add_in_progress" data-href="/index.php/internet-magazin/product/updatecart/add-1/cid-134">В корзину

</кнопка>
  • для передачи информации в модуль корзины (в т.ч. в модуль MINI CART PRO)  внутри тега button  выполняется REQUEST запрос --> o.xRequest(url, {mode:'POST', data: data}, function(xhr) {...} с триггером внутри (используем действующий)  (запрос осуществляется при нажатии на кнопку)  -->   var triggers = window.Oby.fireAjax(cart_type+'.updated', {id: cart_id, el: el, product_id: product_id, type: cart_type, resp: resp}); --> функция fireAjax: function(name,params) {...} представляет одну из многочисленных функции hikashop.js

Бесплатная доставка до транспортной компании ! ! ! - ВЫГОДНО

Спешите выписать счет на оплату! Товар в наличии !

Цены на товары в нашем интернет-магазине актуальные и постоянно пересматриваются.
Предусмотрены оплаты - по банковским картам Visa - Мир, наличный и безналичный расчеты с выпиской счет-фактуры с НДС