Cart Summary expanded
-
13-12-2020 - |
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;
}
}
Solution
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.html
at 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/*
OTHER TIPS
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 :)