From 52feba4f85cf6d8f6c137d78f61f2f2ebfbff53e Mon Sep 17 00:00:00 2001 From: Mike Jolley Date: Thu, 5 Mar 2020 14:15:28 +0000 Subject: [PATCH] Add skeleton markup to the cart block (https://github.com/woocommerce/woocommerce-blocks/pull/1866) * Add skeleton markup * Add shipping title to skeleton and match styling/spacing * Combine skeleton and loading styles --- .../store-notices-container/index.js | 3 + .../cart/full-cart/cart-line-items-table.js | 16 +++- .../cart-checkout/cart/full-cart/style.scss | 40 +++++++-- .../src/BlockTypes/Cart.php | 87 ++++++++++++++++++- 4 files changed, 135 insertions(+), 11 deletions(-) diff --git a/plugins/woocommerce-blocks/assets/js/base/components/store-notices-container/index.js b/plugins/woocommerce-blocks/assets/js/base/components/store-notices-container/index.js index 0e2a6182dad..52718aff60a 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/store-notices-container/index.js +++ b/plugins/woocommerce-blocks/assets/js/base/components/store-notices-container/index.js @@ -28,6 +28,9 @@ const StoreNoticesContainer = ( { className, notices } ) => { const { removeNotice } = useStoreNoticesContext(); const wrapperClass = classnames( className, 'wc-block-components-notices' ); + if ( ! notices.length ) { + return null; + } return (
{ notices.map( ( props ) => ( diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-items-table.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-items-table.js index d0cfb681492..eb02483f51a 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-items-table.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-items-table.js @@ -30,16 +30,24 @@ const CartLineItemsTable = ( { lineItems = [], isLoading = false } ) => { - { __( 'Product', 'woo-gutenberg-products-block' ) } + + { __( 'Product', 'woo-gutenberg-products-block' ) } + - { __( 'Details', 'woo-gutenberg-products-block' ) } + + { __( 'Details', 'woo-gutenberg-products-block' ) } + - { __( 'Quantity', 'woo-gutenberg-products-block' ) } + + { __( 'Quantity', 'woo-gutenberg-products-block' ) } + - { __( 'Total', 'woo-gutenberg-products-block' ) } + + { __( 'Total', 'woo-gutenberg-products-block' ) } + diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss index d5564f2d705..f78a30fdd1c 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss @@ -136,6 +136,7 @@ table.wc-block-cart-items { .wc-block-cart-items__row { .wc-block-cart-item__image img { width: 100%; + margin: 0; } .wc-block-cart-item__product { .wc-block-cart-item__product-name { @@ -223,22 +224,34 @@ table.wc-block-cart-items { // Loading placeholder state. .wc-block-cart--is-loading { + th span, + h2 span { + @include placeholder(); + @include force-content(); + min-width: 84px; + display: inline-block; + } + h2 span { + min-width: 33%; + } .wc-block-cart-items { .wc-block-cart-items__row { .wc-block-cart-item__product-name, .wc-block-cart-item__price, .wc-block-cart-item__product-metadata, - .wc-block-cart-item__image a, + .wc-block-cart-item__image > *, .wc-block-quantity-selector { @include placeholder(); } .wc-block-cart-item__product-name { - min-width: 50%; - display: inline-block; + @include placeholder(); @include force-content(); + min-width: 84px; + display: inline-block; } .wc-block-cart-item__product-metadata { - @include force-content(); + margin-top: 0.25em; + min-width: 8em; } .wc-block-cart-item__remove-link, .wc-block-cart-item__remove-icon { @@ -247,15 +260,30 @@ table.wc-block-cart-items { .wc-block-cart-item__image a { display: block; } - .wc-block-cart-item__price { - @include force-content(); + .wc-block-cart-item__total { + > span, + > div { + display: none; + } + .wc-block-cart-item__price { + @include force-content(); + display: block; + } } } } .wc-block-cart__sidebar .components-card { @include placeholder(); + @include force-content(); + min-height: 460px; } } +.wc-block-cart--skeleton { + display: none; +} +.is-loading + .wc-block-cart--skeleton { + display: flex; +} // Mobile styles. @include breakpoint( "<782px" ) { diff --git a/plugins/woocommerce-blocks/src/BlockTypes/Cart.php b/plugins/woocommerce-blocks/src/BlockTypes/Cart.php index 2c2fb68e6c2..596f123bb59 100644 --- a/plugins/woocommerce-blocks/src/BlockTypes/Cart.php +++ b/plugins/woocommerce-blocks/src/BlockTypes/Cart.php @@ -68,6 +68,91 @@ class Cart extends AbstractBlock { $this->block_name . '-frontend', $this->block_name . '-block-frontend' ); - return $content; + return $content . $this->get_skeleton(); + } + + /** + * Render skeleton markup for the cart block. + */ + protected function get_skeleton() { + return ' + + '; } }