In app/design/frontend/Vendor/default/Magento_Checkout/web/template/summary/cart-items.html the collapsible widget is initiated via:
<div class="block items-in-cart"
data-bind="mageInit: {'collapsible':{'openedState': 'active', 'active': isItemsBlockExpanded()}}">...
</div>
As you know there are 2 steps in the checkout. I need the active state to be true
on the shipping step and to be false
on the payment step.
I read somewhere that stepNavigator.isProcessed('shipping')
returns false
on the shipping step and true
on the payment step, so I created a mixin for the cart-items.js
:
define(['Magento_Checkout/js/model/step-navigator'], function (stepNavigator) {
'use strict';
var mixin = {
isItemsBlockExpanded: function () {
return !stepNavigator.isProcessed('shipping');
}
};
return function (target) {
return target.extend(mixin);
};
});
I therefore expect it to return true
(--> !false
) on shipping and false
on the payment step. However, this doesnt work. It also gives me a knockout.js:3620 Uncaught Error: You cannot apply bindings multiple times to the same element.
error on the payment step.
I also tried to be clever using vanilla javascript in cart-items.html
but that didnt work either.
So how can I dynamically set the active state for the collapsible widget (depending on the step)?