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()}}">... 

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)?

1 Answer 1


The solution: You basically click the Continue button with Jquery and then hide the respective step/steps with CSS


#checkout, #payment-method {
  • ? I dont understand (it doesnt make any sense). It should be doable with Knockout though.
    – mullayo
    Jan 5, 2022 at 7:54
  • Yes, you can hide the desired data with knockout js Jan 7, 2022 at 1:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.