This is my Magento_Checkout/web/template/summary/cart-items.html
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<div class="block items-in-cart" data-bind="mageInit: {'collapsible':{'collapsible': true, 'openedState': 'active', 'active': isItemsBlockExpanded() }}">
<div class="title" data-role="title">
<strong role="heading" aria-level="1">
<translate args="maxCartItemsToDisplay" if="maxCartItemsToDisplay < getCartLineItemsCount()"></translate>
<translate args="'of'" if="maxCartItemsToDisplay < getCartLineItemsCount()"></translate>
<translate args="'Cart'" if="getCartSummaryItemsCount() === 1"></translate>
<translate args="'Cart'" if="getCartSummaryItemsCount() > 1"></translate>
(<span data-bind="text: getCartSummaryItemsCount().toLocaleString(window.LOCALE)"></span>
<span data-bind="i18n: 'items'"></span>)
</strong>
</div>
<div class="content minicart-items" data-role="content">
<div class="minicart-items-wrapper">
<ol class="minicart-items">
<each args="items()">
<li class="product-item">
<div class="product">
<each args="$parent.elems()" render=""></each>
</div>
</li>
</each>
</ol>
</div>
</div>
<div class="actions-toolbar" if="maxCartItemsToDisplay < getCartLineItemsCount()">
<div class="secondary">
<a class="action viewcart" data-bind="attr: {href: cartUrl}">
<span data-bind="i18n: 'View and Edit Cart'"></span>
</a>
</div>
</div>
</div>
Here, the checkout accordion is handled.
I want this accordion to be initially open at the first step (shipping step), and closed at the second step (payment step)
obviously, in both steps, I want there to be the possibility to open/close the accordion.
I created my own mixin, Magento_Checkout/web/js/view/summary/cart-items-mixin.js
define(['Magento_Checkout/js/model/step-navigator'], function (stepNavigator) {
'use strict';
var mixin = {
isShippingState: function () {
return !stepNavigator.isProcessed('shipping');
},
isItemsBlockExpanded: function () {
return !stepNavigator.isProcessed('shipping');
}
};
return function (target) {
return target.extend(mixin);
};
});
in this way, it does not seem to achieve the desired effect.
I tried using the subscribe()
function of stepNavigator
but I couldn't solve it.
it is as if the accordion maintains the same state in both steps.
Because if I open it in the first step, it will also be open in the second, and vice versa.
So, to recap, the result I want to get is:
in the first step the accordion must initially be open (and interactable)
in the second step tha accordion must be initially closed (and interactable)
PS: obviously, I've registered the mixin in a requirejs-config.js
file as shown below:
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
var config = {
'config': {
'mixins': {
'Magento_Checkout/js/view/summary/cart-items': {
'Magento_Checkout/js/view/summary/cart-items-mixin': true
}
}
}
};
So, the mixin is correctly registered!
Do you guys have got any ideas how to solve this?