Magento 2 - How to auto open cart items on checkout page?

Question

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:

Answer 1

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:

app/design/frontend/**VENDOR**/**THEME**/Magento_Checkout/web/template/summary/cart-items.html

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.

Note

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');
}

Answer 2

You can Use js mixin :)

like :

Vendor/Module/view/requirejs-config.js

with content:

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

and

Vendor_Module/view/frontend/web/js/view/summary/cart-items-mixin.js

with content:

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

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

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

This work for me :)

Answer 3

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

Please copy file in your theme

FROM:

vendor/magento/module-checkout/view/frontend/web/js/view/sum‌mary/cart-items.js

TO:

app/design/frontend/{Vendor}/{theme-name}/Magento_Checkout/web/js/view/summary/cart-items.js

Replace below code in that file.

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

Answer 4

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