При модернизации модуля 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) {...} .
- чтобы отследить нужное событие, во-первых, надо его создать (или дополнить существующее событие)
- одновременно надо создать новый триггер (ввести новое название триггера - если триггер уже существует, то его надо модифицировать: дополнить PHP кодом, если это возможно) - что будет изменено на странице сайта при нажатии на наш объект (какой параметр или группа переменных).
- запланировать взаимодействии с пользователем - 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