2

on checkout page, can anyone help me, how do i by default expand product in order summary.

enter image description here

Thanks

0

5 Answers 5

2

You can Use js mixin :-

Vendor/Module/view/frontend/requirejs-config.js

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

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

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

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

    return function (target) {
        return target.extend(mixin);
    };
});
1
  • 1
    Should this not be Vendor/Module/view/frontend/requirejs-config.js? Commented Oct 18, 2022 at 16:35
0

You can do it by setting openedState to active in your cart-items.html template.

So, override cart-items.html template from

vendor/magento/module-checkout/view/frontend/web/template/summary/cart-items.html

To your custom module, with the same path level:

app/code/Vendor/Module/view/frontend/web/template/summary/cart-items.html

With this code:

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="block items-in-cart" data-bind="mageInit: {'collapsible':{'openedState': 'active', 'active': true}}">
    <div class="title" data-role="title">
        <strong role="heading">
            <translate args="maxCartItemsToDisplay" if="maxCartItemsToDisplay < getCartLineItemsCount()"/>
            <translate args="'of'" if="maxCartItemsToDisplay < getCartLineItemsCount()"/>
            <span data-bind="text: getCartLineItemsCount()"></span>
            <translate args="'Item in Cart'" if="getCartLineItemsCount() === 1"/>
            <translate args="'Items in Cart'" if="getCartLineItemsCount() > 1"/>
        </strong>
    </div>
    <div class="content minicart-items" data-role="content" aria-hidden="false" style="display: block !important;">
        <div class="minicart-items-wrapper overflowed">
            <ol class="minicart-items">
                <each args="items()">
                    <li class="product-item">
                        <div class="product">
                            <each args="$parent.elems()" render=""/>
                        </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>

Then create requirejs-config.js file in path

app/code/Vendor/Module/view/frontend/requirejs-config.js

var config = {    
   "map": {
       "*": {
           "Magento_Checkout/template/summary/cart-items.html": "Vendor_Module/template/summary/cart-items.html"
       }
   }
};  

After doing above, redeploy static contents

0

You can do it via css:

add the below css in your Magento_Checkout module less file:

.opc-block-summary {
   .block.items-in-cart {
     .minicart-items {
       display: block !important;
     }
     >.title {
       &:after {
         content: '\e621';
       }
     }
     &.active {
       .minicart-items {
         display: none !important;
       }
       >.title {
         &:after {
           content: '\e622';
         }
       }
     }
   }
 }
1
  • 1
    Great thanks... @mohammad faizan its working fine for me.
    – Yashwant
    Commented May 7, 2019 at 10:27
0

In your custom css:

    body.checkout-index-index .minicart-items{ 
              display:block !important; 
    }
0

You just need to override this file to your theme folder or write in requirejs-config.js -> magento/vendor/magento/module-checkout/view/frontend/web/template/estimation.html

<div class="opc-estimated-wrapper" data-bind="blockLoader: isLoading">
<div class="estimated-block">
    <span class="estimated-label" data-bind="i18n: 'Estimated Total'"></span>
    <span class="estimated-price" data-bind="text: getValue()"></span>
</div>
<div class="minicart-wrapper">
    <button type="button" class="action showcart" data-bind="afterRender: showSidebar" data-toggle="opc-summary">
        <span class="counter qty">
            <span class="counter-number" data-bind="text: getQuantity()"></span>
        </span>
    </button>
</div>
The logic lies in changing the button's data-bind from click to afterRender so that after the page renders the function is invoked instead of click. Simple.

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.