Our code has to update the whole header block via AJAX.
The header block contains the minicart and the responsive menu toggle button. We have a dropdown icon for the minicart.
After the update happens we face some challenges:
- Minicart calculations are empty
- Responsive menu toggle button does not work
- Dropdown icon does not work
This is how the minicart is defined:
<div class="block block-minicart empty"
data-role="dropdownDialog"
data-mage-init='{"dropdownDialog":{
"appendTo":"[data-block=minicart]",
"triggerTarget":".showcart",
"timeout": "2000",
"closeOnMouseLeave": false,
"closeOnEscape": true,
"triggerClass":"active",
"parentClass":"active",
"buttons":[]}}'
>
<div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
<!-- ko template: getTemplate() --><!-- /ko -->
</div>
</div>
And the toggle button:
<span data-action="toggle-nav" class="action nav-toggle">
<span>
Toggle Nav
</span>
</span>
After the update, we achieved to refresh the minicart contents with:
document.addEventListener("headerupdated", function() {
let block = $('header.page-header');
ko.cleanNode(block[0]);
block.applyBindings();
});
But we didn't make it work the toggle button and the dropdown icon.
We think those are two different problems: the toggle button is prepared from jQuery (toggleBtn: $('[data-action="toggle-nav"]'),) from :
lib/mage/menu.js
define([
'jquery',
'matchMedia',
'jquery/ui',
'jquery/jquery.mobile.custom',
'mage/translate'
], function ($, mediaCheck) {
'use strict';
$.widget('mage.menu', $.ui.menu, {
...
_create: function () { ... },
_init: function () {
...
this._assignControls()._listen();
...
},
_assignControls: function () {
this.controls = {
toggleBtn: $('[data-action="toggle-nav"]'),
swipeArea: $('.nav-sections')
};
return this;
},
...
And the dropdown icon:
app/design/frontend/Vendor/theme/Magento_Checkout/templates/cart/minicart.phtml
define([
'uiComponent',
'Magento_Customer/js/customer-data',
'jquery',
'ko',
'underscore',
'sidebar',
'mage/translate',
'mage/dropdown'
], function (Component, customerData, $, ko, _) {
'use strict';
...
// [No more references to mage/dropdown]
and (realize the triggerTarget in options and _create, that will be equal to ".showcart")
lib/web/mage/dropdown.js
define([
'jquery',
'jquery/ui',
'mage/translate'
], function ($) {
'use strict';
$.widget('mage.dropdownDialog', $.ui.dialog, {
options: {
triggerEvent: 'click',
triggerClass: null,
triggerTarget: null,
...
...
_create: function () {
if (_self.options.triggerTarget) {
$(_self.options.triggerTarget).on(_self.options.triggerEvent, function (event) {
event.preventDefault();
event.stopPropagation();
...
});
}
},
Is there any simple way or best-practice for rebind, reinit, initialize the js process than bind and initialize events and observers?
We even tried undefining and requiring again some requirejs definitions, but with no success.
