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

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
This commit is contained in:
Mike Jolley 2020-03-05 14:15:28 +00:00 committed by GitHub
parent dd54ce1136
commit 52feba4f85
4 changed files with 135 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
plugins/woocommerce-blocks/assets/js/base/components/store-notices-container/index.js
View File

@ -28,6 +28,9 @@ const StoreNoticesContainer = ( { className, notices } ) => {
const { removeNotice } = useStoreNoticesContext(); const { removeNotice } = useStoreNoticesContext();
const wrapperClass = classnames( className, 'wc-block-components-notices' ); const wrapperClass = classnames( className, 'wc-block-components-notices' );
if ( ! notices.length ) {
return null;
}
return ( return (
<div className={ wrapperClass }> <div className={ wrapperClass }>
{ notices.map( ( props ) => ( { notices.map( ( props ) => (

8
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-items-table.js
View File

@ -30,16 +30,24 @@ const CartLineItemsTable = ( { lineItems = [], isLoading = false } ) => {
<thead> <thead>
<tr className="wc-block-cart-items__header"> <tr className="wc-block-cart-items__header">
<th className="wc-block-cart-items__header-image"> <th className="wc-block-cart-items__header-image">
<span>
{ __( 'Product', 'woo-gutenberg-products-block' ) } { __( 'Product', 'woo-gutenberg-products-block' ) }
</span>
</th> </th>
<th className="wc-block-cart-items__header-product"> <th className="wc-block-cart-items__header-product">
<span>
{ __( 'Details', 'woo-gutenberg-products-block' ) } { __( 'Details', 'woo-gutenberg-products-block' ) }
</span>
</th> </th>
<th className="wc-block-cart-items__header-quantity"> <th className="wc-block-cart-items__header-quantity">
<span>
{ __( 'Quantity', 'woo-gutenberg-products-block' ) } { __( 'Quantity', 'woo-gutenberg-products-block' ) }
</span>
</th> </th>
<th className="wc-block-cart-items__header-total"> <th className="wc-block-cart-items__header-total">
<span>
{ __( 'Total', 'woo-gutenberg-products-block' ) } { __( 'Total', 'woo-gutenberg-products-block' ) }
</span>
</th> </th>
</tr> </tr>
</thead> </thead>

36
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
View File

@ -136,6 +136,7 @@ table.wc-block-cart-items {
.wc-block-cart-items__row { .wc-block-cart-items__row {
.wc-block-cart-item__image img { .wc-block-cart-item__image img {
width: 100%; width: 100%;
margin: 0;
} }
.wc-block-cart-item__product { .wc-block-cart-item__product {
.wc-block-cart-item__product-name { .wc-block-cart-item__product-name {
@ -223,22 +224,34 @@ table.wc-block-cart-items {
// Loading placeholder state. // Loading placeholder state.
.wc-block-cart--is-loading { .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 {
.wc-block-cart-items__row { .wc-block-cart-items__row {
.wc-block-cart-item__product-name, .wc-block-cart-item__product-name,
.wc-block-cart-item__price, .wc-block-cart-item__price,
.wc-block-cart-item__product-metadata, .wc-block-cart-item__product-metadata,
.wc-block-cart-item__image a, .wc-block-cart-item__image > *,
.wc-block-quantity-selector { .wc-block-quantity-selector {
@include placeholder(); @include placeholder();
} }
.wc-block-cart-item__product-name { .wc-block-cart-item__product-name {
min-width: 50%; @include placeholder();
display: inline-block;
@include force-content(); @include force-content();
min-width: 84px;
display: inline-block;
} }
.wc-block-cart-item__product-metadata { .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-link,
.wc-block-cart-item__remove-icon { .wc-block-cart-item__remove-icon {
@ -247,15 +260,30 @@ table.wc-block-cart-items {
.wc-block-cart-item__image a { .wc-block-cart-item__image a {
display: block; display: block;
} }
.wc-block-cart-item__total {
> span,
> div {
display: none;
}
.wc-block-cart-item__price { .wc-block-cart-item__price {
@include force-content(); @include force-content();
display: block;
}
} }
} }
} }
.wc-block-cart__sidebar .components-card { .wc-block-cart__sidebar .components-card {
@include placeholder(); @include placeholder();
@include force-content();
min-height: 460px;
} }
} }
.wc-block-cart--skeleton {
display: none;
}
.is-loading + .wc-block-cart--skeleton {
display: flex;
}
// Mobile styles. // Mobile styles.
@include breakpoint( "<782px" ) { @include breakpoint( "<782px" ) {

87
plugins/woocommerce-blocks/src/BlockTypes/Cart.php
View File

@ -68,6 +68,91 @@ class Cart extends AbstractBlock {
$this->block_name . '-frontend', $this->block_name . '-frontend',
$this->block_name . '-block-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 '
<div class="wc-block-cart wc-block-cart--is-loading wc-block-cart--skeleton" aria-hidden="true">
<div class="wc-block-cart__main">
<h2><span></span></h2>
<table class="wc-block-cart-items">
<thead>
<tr class="wc-block-cart-items__header">
<th class="wc-block-cart-items__header-image"><span /></th>
<th class="wc-block-cart-items__header-product"><span /></th>
<th class="wc-block-cart-items__header-quantity"><span /></th>
<th class="wc-block-cart-items__header-total"><span /></th>
</tr>
</thead>
<tbody>
<tr class="wc-block-cart-items__row">
<td class="wc-block-cart-item__image">
<div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=" width="1" height="1" /></div>
</td>
<td class="wc-block-cart-item__product">
<div class="wc-block-cart-item__product-name"></div>
<div class="wc-block-cart-item__product-metadata"></div>
</td>
<td class="wc-block-cart-item__quantity">
<div class="wc-block-quantity-selector">
<input class="wc-block-quantity-selector__input" type="number" step="1" min="0" value="1" />
<button class="wc-block-quantity-selector__button wc-block-quantity-selector__button--minus">－</button>
<button class="wc-block-quantity-selector__button wc-block-quantity-selector__button--plus">＋</button>
</div>
</td>
<td class="wc-block-cart-item__total">
<div class="wc-block-cart-item__price"></div>
</td>
</tr>
<tr class="wc-block-cart-items__row">
<td class="wc-block-cart-item__image">
<div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=" width="1" height="1" /></div>
</td>
<td class="wc-block-cart-item__product">
<div class="wc-block-cart-item__product-name">&nbsp;</div>
<div class="wc-block-cart-item__product-metadata">&nbsp;</div>
</td>
<td class="wc-block-cart-item__quantity">
<div class="wc-block-quantity-selector">
<input class="wc-block-quantity-selector__input" type="number" step="1" min="0" value="1" />
<button class="wc-block-quantity-selector__button wc-block-quantity-selector__button--minus">－</button>
<button class="wc-block-quantity-selector__button wc-block-quantity-selector__button--plus">＋</button>
</div>
</td>
<td class="wc-block-cart-item__total">
<div class="wc-block-cart-item__price"></div>
</td>
</tr>
<tr class="wc-block-cart-items__row">
<td class="wc-block-cart-item__image">
<div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=" width="1" height="1" /></div>
</td>
<td class="wc-block-cart-item__product">
<div class="wc-block-cart-item__product-name"></div>
<div class="wc-block-cart-item__product-metadata"></div>
</td>
<td class="wc-block-cart-item__quantity">
<div class="wc-block-quantity-selector">
<input class="wc-block-quantity-selector__input" type="number" step="1" min="0" value="1" />
<button class="wc-block-quantity-selector__button wc-block-quantity-selector__button--minus">－</button>
<button class="wc-block-quantity-selector__button wc-block-quantity-selector__button--plus">＋</button>
</div>
</td>
<td class="wc-block-cart-item__total">
<div class="wc-block-cart-item__price"></div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="wc-block-cart__sidebar">
<div class="components-card"></div>
</div>
</div>
';
} }
} }