I'm using a mostly stock Magento 2 checkout_index_index layout (checkout page), I was wondering if anyone knew how to default the order summary collapsible to be open on page load. It isn't clear where the options for all the items in that template are defined and what values are acceptable.

Currently, renders closed, and you have to click it to open the summary and see your items:

open order summary


The full list of options for the collapsible widget can be seen on the dev docs here.

Finding the code

Navigate to vendor/magento/module-checkout/view/frontend/web/template/summary/cart-items.html and look at line 8 (on 2.1.1 at least), it should look like so:

<div class="block items-in-cart" data-bind="mageInit: {'collapsible':{'openedState': 'active'}}">

Copy the file into your theme

As we don't want to edit the core we need to copy this file into your theme, so duplicate it and move it to:


Set the collapsible widget to be active when initialised

Now you can pass the active option ('active': true) to it. So the full line should be like so:

<div class="block items-in-cart" data-bind="mageInit: {'collapsible':{'openedState': 'active', 'active': true}}">

Now clear your caches, pub/static, and var/view_preprocessed. You should hopefully have an open cart summary when the widget is initialized.


This line <!-- ko if: isItemsBlockExpanded() --> makes me think there is another way to set this, but I don't fully understand how it works:

isItemsBlockExpanded: function () {
            return quote.isVirtual() || stepNavigator.isProcessed('shipping');
  • Thanks Ben! You're correct about the JS aspect, setting that to return true also works. I think part of your answer might have been cut off
    – Pat Marx
    Oct 19 '16 at 21:12
  • Can't edit comments apparently. Can you add the part after: "Now you can pass the active option ('active': true) to it. So the full line should be like so:"
    – Pat Marx
    Oct 19 '16 at 21:12
  • @PatMarx Apologies, I read that back about 3 times and managed to miss that. Can you see it now?
    – Ben Crook
    Oct 19 '16 at 21:32
  • Yeah, thanks for the update -- I'll accept the answer once I've confirmed it working but this looks right to me
    – Pat Marx
    Oct 19 '16 at 21:41
  • 1
    For the note part, the logic of the isItemBlockExpanded is located here : vendor/magento/module-checkout/view/frontend/web/js/view/summary/cart-items.js:26 and the logic is : return quote.isVirtual() || stepNavigator.isProcessed('shipping'); Apr 6 '17 at 14:02

You can Use js mixin :)

like :


with content:

    var config = { 
            'config': {
                 'mixins': {
                    'Magento_Checkout/js/view/summary/cart-items': {
                      'Vendor_Module/js/view/summary/cart-items-mixin': true



with content:

define([], function () {
    'use strict';

    var mixin = {
        isItemsBlockExpanded: function () {
            return true;

    return function (target) {
        return target.extend(mixin);

This work for me :)


For the above issue we can overwrite the js only and it will resolve the issue.

Please copy file in your theme





Replace below code in that file.

 isItemsBlockExpanded: function () { 
   /*return quote.isVirtual() || stepNavigator.isProcessed('shipping'); */       
    return true;

An other way is to add js file with requirejs, see : How To add JS file in frontend for all pages Then in your js file create action in order to open block, see: https://devdocs.magento.com/guides/v2.2/javascript-dev-guide/widgets/widget_collapsible.html Will

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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