Magento 2.1 Cart Summary Expanded – How to Customize

cartcheckoutmagento-2.1order-summary

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?

enter image description here

 //
//  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;
}

}

Best Answer

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/*
Related Topic