0

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?

0

Browse other questions tagged or ask your own question.