3

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

12

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');
}
|improve this answer|||||
  • 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'); – Franck Garnier Apr 6 '17 at 14:02
10

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

|improve this answer|||||
0

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;
 }
|improve this answer|||||
0

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

|improve this answer|||||

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.