6

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

}

  • you want it opened by default ? – Manoj Deswal Oct 6 '17 at 10:32
  • Yes, I believe as it is now it hurts the customer experience – Thomas Meier Oct 6 '17 at 10:39
  • check in summary.phtml there should "collapse true/active" ..... I didn't check that same thing done for coupon code to make that opened by default – Manoj Deswal Oct 6 '17 at 10:41
  • override this file vendor/magento/module-checkout/view/frontend/web/template/summary/ cart-items.html... and pass the class "active" ... – Manoj Deswal Oct 6 '17 at 10:56
  • Sorry, when you say pass the class what do you mean? – Thomas Meier Oct 6 '17 at 12:46
10

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/*
  • 1
    Worked like a charm! Thank you very much! – Thomas Meier Oct 9 '17 at 8:06
  • it sounds great , cheers ! – Manoj Deswal Oct 9 '17 at 8:09
4

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.

enter image description here

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

  • great , you done the other things very well... this goes to for your work , cheres ! – Manoj Deswal Oct 9 '17 at 9:48

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.