Cart Summary expanded

Question

On our checkout page we have the product list and the shipping options within a collapsible menu. I can not seem to get it expanded. I found the relevant passage in the _cart.less.

Is anyone able to help me with this issue?

 //
//  Shopping cart
//  ---------------------------------------------

.checkout-cart-index {
    .page-main {
        padding-left: 0;
        padding-right: 0;
    }
    .page-title-wrapper {
        padding-left: @layout__width-xs-indent;
        padding-right: @layout__width-xs-indent;
    }
}

//  Cart container
.cart-container {
    .form-cart {
        &:extend(.abs-shopping-cart-items all);
    }
}

//  Summary block
.cart-summary {
    &:extend(.abs-add-box-sizing all);
    .lib-css(background, @sidebar__background-color);
    margin-bottom: @indent__m;
    padding: 1px 0 @indent__m;
    background: #fbfbfb;
    border: 1px solid #ddd;
    border-radius: 8px;
    > .title {
        .lib-font-size(24);
        display: none;
        font-weight: @font-weight__light;
        margin: 12px 0;
    }

    .block {
        form:not(:last-of-type) {
            .fieldset {
                margin: 0 0 @indent__m;
            }
        }

        .price {
            font-weight: @font-weight__bold;
        }

        .field {
            margin: 0 0 16px;
            &.note {
                display: none;
            }
        }

        .actions-toolbar {
            > .primary {
                text-align: left;
                .action.primary {
                    &:extend(.abs-revert-to-action-secondary all);
                    width: auto;
                }
            }
        }

        .fieldset.estimate {
            > .legend,
            > .legend + br {
                &:extend(.abs-no-display all);
            }
        }
        &:extend(.abs-cart-block all);
        .title {
            strong {
                .lib-font-size(14);
                font-weight: @font-weight__semibold;
            }
        }
        .item-options {
            margin: 0 0 16px;
            .field {
                .radio {
                    float: left;
                    margin-right: 8px;
                }
                .radio {
                    + .label {
                        display: block;
                        margin: 0;
                        overflow: hidden;
                        font-weight: 400;
                    }
                }
            }
        }
    }

    .page-main & {
        .block {
            margin-bottom: 0;
        }
    }

    .checkout-methods-items {
        &:extend(.abs-reset-list all);
        margin: @indent__base 0 0;
        padding: 0 @mobile-cart-padding;
        text-align: center;
        .action.primary.checkout {
            &:extend(.abs-button-l all);
            width: 100%;
        }
        .item {
            margin-bottom: @indent__m;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .message {
        padding-left: @indent__base;
        > *:first-child:before {
            display: none;
        }
    }
    &:extend(.abs-adjustment-incl-excl-tax all);
}

//  Totals block
.cart-totals {
    &:extend(.abs-sidebar-totals all);
    tbody,
    tfoot {
        .mark {
            text-align: left;
        }
    }
}

//  Products table
.cart {
    &.table-wrapper {
        .product-item-name > a {
            font-size: 14px;
            &, &:hover {
                color: @_link-color;
            }
        }
        .product-image-container {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 3px;
        }
        .cart {
            thead {
                tr th.col {
                    border-bottom: @border-width__base solid @border-color__base;
                    padding-bottom: 12px;
                    padding-top: 24px;
                    font-size: 14px;
                    font-weight: 600;
                }
            }
            tbody {
                td {
                    border: 0;
                }
            }
            > .item {
                border-bottom: @border-width__base solid @border-color__base;
                position: relative;
            }
        }
        .col {
            vertical-align: middle;
            &.price,
            &.subtotal,
            &.msrp {
                font-size: 14px;
                text-align: center;
                &:extend(.abs-incl-excl-tax all);
            }
            &.subtotal .price {
                color: @theme-color;
            }
            &.qty {
                text-align: center;
                .label {
                    &:extend(.abs-visually-hidden all);
                }
                .input-text {
                    text-align: center;
                    width: 45px;
                }
                .field.qty {
                    min-width: 67px;
                }
            }
            > .price {
                .lib-css(color, @primary__color__lighter);
                .lib-font-size(18);
                font-weight: @font-weight__bold;
            }
        }

        .item-actions {
            td {
                padding-bottom: 0;
                padding-left: @mobile-cart-padding;
                padding-right: @mobile-cart-padding;
                white-space: normal;
            }
        }
        .item {
            .col.item {
                display: block;
                min-height: 75px;
                padding: 15px @mobile-cart-padding @indent__s 90px;
                position: relative;
            }
        }

        .actions-toolbar {
            &:extend(.abs-add-clearfix all);
            min-height: 20px;
            padding-bottom: 30px;
            position: relative;
            > .action-edit,
            > .action-delete {
                position: absolute;
                right: 16px;
                top: 0;
                .lib-icon-font(
                @icon-edit,
                @_icon-font-size: 18px,
                @_icon-font-line-height: 20px,
                @_icon-font-text-hide: true,
                @_icon-font-color: @minicart-icons-color,
                @_icon-font-color-hover: @primary__color,
                @_icon-font-color-active: @minicart-icons-color
                );
            }
            > .action-delete {
                &:extend(.abs-action-button-as-link all);
                right: 0;
                .lib-icon-font-symbol(
                @_icon-font-content: @icon-trash
                );
            }
        }
        .action {
            margin-right: 15px;
            &:last-child {
                margin-right: 0;
            }
            &.help.map {
                &:extend(.abs-action-button-as-link all);
                font-weight: @font-weight__regular;
            }
        }

        .product {
            &-item-photo {
                display: block;
                left: @mobile-cart-padding;
                max-width: 65px;
                padding: 0;
                position: absolute;
                top: 15px;
                width: 100%;
                border: 0;
                border-radius: 0;
            }
            &-item-name {
                .lib-font-size(18);
                display: block;
                margin: 0;
                margin-top: 10px;
            }
        }
        .gift-registry-name-label {
            &:after {
                content: ':';
            }
        }

        //  Product options
        .item-options {
            margin-bottom: 0;
            &:extend(.abs-product-options-list all);
            &:extend(.abs-add-clearfix all);
        }

        .product-item-name + .item-options {
            margin-top: @indent__base;
        }

        .cart-tax-total {
            &:extend(.abs-tax-total all);
            &-expanded {
                &:extend(.abs-tax-total-expanded all);
            }
        }
        .product-image-wrapper {
            &:extend(.abs-reset-image-wrapper all);
        }
        .action.configure {
            display: inline-block;
            margin: @indent__s 0 0;
        }
        .item .message {
            margin-top: @indent__base;
        }
    }
}

//  Discount
.cart-discount {
    border-bottom: @border-width__base solid @border-color__base;
    clear: left;
    &:extend(.abs-discount-block all);
}

//  Empty cart
.cart-empty {
    padding-left: @layout__width-xs-indent;
    padding-right: @layout__width-xs-indent;
}

.cart-tax-info + .cart-tax-total {
    display: block;
}

}

Answer 1

To make cart summary opened initially on page load do the following :

Go to your core files and copy cart-items.html

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

Place cart-items.htmlat below location in your custom theme, create folder if doesn't exist and copy only required files

app/design/frontend/vendor-name/theme-name/Magento_Checkout/web/template/summary/cart-items.html

In this you need to update this line of code at line no 7/8.

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

Here, 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 cache

pub/static
var/view_preprocessed

Hopefully this should help you.

You can run following commands to remove your cache

rm -rf var/cache/*
rm -rf var/di/*
rm -rf var/generation/*
rm -rf var/page_cache/*
rm -rf var/view_preprocessed/*

Answer 2

I figured out the way to have the shipping block in the cart summary extended as well. It is an extension of Manoj's answer so all the credit still goes to him.

In order to change shipping.phtml needs to be updated.

Shipping.phtml can be found in

/vendor/magento/module-checkout/view/frontend/templates/cart

shipping.phtml needs to be modified on line 12

from:

<div id="block-shipping" class="block shipping" data-mage-init='{"collapsible":{"openedState": "active", "saveState": true}}'>

to:

<div id="block-shipping" class="block shipping" data-mage-init='{"collapsible":{"openedState": "active", "active": true}}'>

and then needs to be placed in:

app/design/frontend/vendor-name/theme-name//Magento_Checkout/templates/cart

then follow the same methods as Manoj to clear the cache.

I hope this can help someone in the future :)