Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix: Mini Cart: Default content for empty state (https://github.com/woocommerce/woocommerce-blocks/pull/5421)

This commit is contained in:
Tung Du 2021-12-22 18:03:58 +07:00 committed by GitHub
parent 9a1cd85779
commit b2eecf3bb0
3 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss
View File

@ -1,13 +1,15 @@
.wp-block-woocommerce-mini-cart-contents {
max-width: 480px;
margin: 0 auto;
/* We need to override the margin top here to simulate the layout of
the mini cart contents on the front end. */
margin: 0 auto !important;
}
.wp-block-woocommerce-filled-mini-cart-contents-block {
.block-editor-block-list__layout {
display: flex;
flex-direction: column;
min-height: calc(100vh - 2 * $gap-largest);
min-height: 100vh;
}
}

14
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/style.scss
View File

@ -66,9 +66,8 @@
.wc-block-mini-cart__items {
flex-grow: 1;
margin-right: -$gap;
overflow-y: auto;
padding-right: $gap;
padding: 0 $gap;
.wc-block-cart-items__row:last-child::after {
content: none;
@ -83,21 +82,18 @@
display: flex;
flex-direction: column;
height: 100vh;
padding: $gap-largest $gap;
padding: 0;
justify-content: center;
}
.wc-block-mini-cart__title {
@include font-size(large);
margin-top: 0;
margin: $gap-largest $gap 0;
}
.wc-block-mini-cart__footer {
border-top: 1px solid $gray-300;
margin-bottom: -$gap-largest;
margin-left: -$gap;
margin-right: -$gap;
padding: $gap-large;
padding: $gap-large $gap;
}
.wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal {

18
plugins/woocommerce-blocks/templates/block-template-parts/mini-cart.html
View File

@ -10,9 +10,21 @@
<!-- wp:woocommerce/empty-mini-cart-contents-block -->
<div class="wp-block-woocommerce-empty-mini-cart-contents-block">
<!-- wp:heading -->
<h2 id="empty-mini-cart-content">Empty mini cart content</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">
<strong>Your cart is currently empty!</strong>
</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button {"align":"center","className":"is-style-outline"} -->
<div class="wp-block-button aligncenter is-style-outline">
<a href="/" class="wp-block-button__link">Start shopping</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:woocommerce/empty-mini-cart-contents-block -->
</div>