From 9fa9257430201cfa6719e61b51270762cd00e432 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Wed, 6 Mar 2019 13:50:32 -0500 Subject: [PATCH] Blocks: Add rating to grid previews (https://github.com/woocommerce/woocommerce-blocks/pull/472) * Add rating stars to the product preview * Add rating to the visibility controls --- .../woocommerce-blocks/assets/css/style.scss | 6 +++ .../js/blocks/handpicked-products/block.js | 1 + .../js/blocks/handpicked-products/index.js | 2 + .../js/blocks/product-best-sellers/block.js | 1 + .../js/blocks/product-best-sellers/index.js | 1 + .../js/blocks/product-category/block.js | 1 + .../js/blocks/product-category/index.js | 1 + .../assets/js/blocks/product-new/block.js | 1 + .../assets/js/blocks/product-new/index.js | 1 + .../assets/js/blocks/product-on-sale/block.js | 1 + .../assets/js/blocks/product-on-sale/index.js | 1 + .../js/blocks/product-top-rated/block.js | 1 + .../js/blocks/product-top-rated/index.js | 1 + .../js/blocks/products-by-attribute/block.js | 1 + .../js/blocks/products-by-attribute/index.js | 2 + .../components/grid-content-control/index.js | 12 ++++- .../js/components/product-preview/index.js | 13 +++++ .../js/components/product-preview/style.scss | 48 ++++++++++++++++++- .../assets/js/utils/shared-attributes.js | 1 + 19 files changed, 94 insertions(+), 2 deletions(-) diff --git a/plugins/woocommerce-blocks/assets/css/style.scss b/plugins/woocommerce-blocks/assets/css/style.scss index 0b6cea1ff42..711b382930f 100644 --- a/plugins/woocommerce-blocks/assets/css/style.scss +++ b/plugins/woocommerce-blocks/assets/css/style.scss @@ -17,6 +17,12 @@ } } + &.is-hidden-rating { + .star-rating { + display: none; + } + } + &.is-hidden-button { .button[data-product_sku] { display: none !important; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/block.js b/plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/block.js index 6a8f7438f3d..fe456ee230b 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/block.js @@ -179,6 +179,7 @@ class ProductsBlock extends Component { 'is-not-found': loaded && ! hasSelectedProducts, 'is-hidden-title': ! contentVisibility.title, 'is-hidden-price': ! contentVisibility.price, + 'is-hidden-rating': ! contentVisibility.rating, 'is-hidden-button': ! contentVisibility.button, } ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/index.js b/plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/index.js index 5e15f1a3511..d41d4103104 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/index.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/index.js @@ -58,6 +58,7 @@ registerBlockType( 'woocommerce/handpicked-products', { default: { title: true, price: true, + rating: true, button: true, }, }, @@ -101,6 +102,7 @@ registerBlockType( 'woocommerce/handpicked-products', { { 'is-hidden-title': ! contentVisibility.title, 'is-hidden-price': ! contentVisibility.price, + 'is-hidden-rating': ! contentVisibility.rating, 'is-hidden-button': ! contentVisibility.button, } ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-best-sellers/block.js b/plugins/woocommerce-blocks/assets/js/blocks/product-best-sellers/block.js index 8ab26f68655..f54057ec721 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-best-sellers/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-best-sellers/block.js @@ -131,6 +131,7 @@ class ProductBestSellersBlock extends Component { 'is-not-found': loaded && ! products.length, 'is-hidden-title': ! contentVisibility.title, 'is-hidden-price': ! contentVisibility.price, + 'is-hidden-rating': ! contentVisibility.rating, 'is-hidden-button': ! contentVisibility.button, } ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-best-sellers/index.js b/plugins/woocommerce-blocks/assets/js/blocks/product-best-sellers/index.js index ad908405699..b424bed80dd 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-best-sellers/index.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-best-sellers/index.js @@ -65,6 +65,7 @@ registerBlockType( 'woocommerce/product-best-sellers', { { 'is-hidden-title': ! contentVisibility.title, 'is-hidden-price': ! contentVisibility.price, + 'is-hidden-rating': ! contentVisibility.rating, 'is-hidden-button': ! contentVisibility.button, } ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-category/block.js b/plugins/woocommerce-blocks/assets/js/blocks/product-category/block.js index 2798d6a807b..43aa305b2b6 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-category/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-category/block.js @@ -196,6 +196,7 @@ class ProductByCategoryBlock extends Component { 'is-not-found': loaded && ! products.length, 'is-hidden-title': ! contentVisibility.title, 'is-hidden-price': ! contentVisibility.price, + 'is-hidden-rating': ! contentVisibility.rating, 'is-hidden-button': ! contentVisibility.button, } ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-category/index.js b/plugins/woocommerce-blocks/assets/js/blocks/product-category/index.js index 5a05901ed03..1d3f5a2d8c1 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-category/index.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-category/index.js @@ -84,6 +84,7 @@ registerBlockType( 'woocommerce/product-category', { { 'is-hidden-title': ! contentVisibility.title, 'is-hidden-price': ! contentVisibility.price, + 'is-hidden-rating': ! contentVisibility.rating, 'is-hidden-button': ! contentVisibility.button, } ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-new/block.js b/plugins/woocommerce-blocks/assets/js/blocks/product-new/block.js index 2399244ff37..01fde50e299 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-new/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-new/block.js @@ -133,6 +133,7 @@ class ProductNewestBlock extends Component { 'is-not-found': loaded && ! products.length, 'is-hidden-title': ! contentVisibility.title, 'is-hidden-price': ! contentVisibility.price, + 'is-hidden-rating': ! contentVisibility.rating, 'is-hidden-button': ! contentVisibility.button, } ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-new/index.js b/plugins/woocommerce-blocks/assets/js/blocks/product-new/index.js index ecf8e6947c8..dab6750f60c 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-new/index.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-new/index.js @@ -65,6 +65,7 @@ registerBlockType( 'woocommerce/product-new', { { 'is-hidden-title': ! contentVisibility.title, 'is-hidden-price': ! contentVisibility.price, + 'is-hidden-rating': ! contentVisibility.rating, 'is-hidden-button': ! contentVisibility.button, } ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/block.js b/plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/block.js index fd42389530d..a7b1c442b93 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/block.js @@ -145,6 +145,7 @@ class ProductOnSaleBlock extends Component { 'is-not-found': loaded && ! products.length, 'is-hidden-title': ! contentVisibility.title, 'is-hidden-price': ! contentVisibility.price, + 'is-hidden-rating': ! contentVisibility.rating, 'is-hidden-button': ! contentVisibility.button, } ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/index.js b/plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/index.js index f1541d2493c..8b4da9998f7 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/index.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/index.js @@ -73,6 +73,7 @@ registerBlockType( 'woocommerce/product-on-sale', { { 'is-hidden-title': ! contentVisibility.title, 'is-hidden-price': ! contentVisibility.price, + 'is-hidden-rating': ! contentVisibility.rating, 'is-hidden-button': ! contentVisibility.button, } ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-top-rated/block.js b/plugins/woocommerce-blocks/assets/js/blocks/product-top-rated/block.js index e8c99713a63..7ddc5fef24d 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-top-rated/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-top-rated/block.js @@ -133,6 +133,7 @@ class ProductTopRatedBlock extends Component { 'is-not-found': loaded && ! products.length, 'is-hidden-title': ! contentVisibility.title, 'is-hidden-price': ! contentVisibility.price, + 'is-hidden-rating': ! contentVisibility.rating, 'is-hidden-button': ! contentVisibility.button, } ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-top-rated/index.js b/plugins/woocommerce-blocks/assets/js/blocks/product-top-rated/index.js index 95e8131bbc7..0f26df84844 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-top-rated/index.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-top-rated/index.js @@ -65,6 +65,7 @@ registerBlockType( 'woocommerce/product-top-rated', { { 'is-hidden-title': ! contentVisibility.title, 'is-hidden-price': ! contentVisibility.price, + 'is-hidden-rating': ! contentVisibility.rating, 'is-hidden-button': ! contentVisibility.button, } ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/block.js b/plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/block.js index 2d5640e7a9b..63f3c326b68 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/block.js @@ -210,6 +210,7 @@ class ProductsByAttributeBlock extends Component { 'is-not-found': loaded && ! products.length, 'is-hidden-title': ! contentVisibility.title, 'is-hidden-price': ! contentVisibility.price, + 'is-hidden-rating': ! contentVisibility.rating, 'is-hidden-button': ! contentVisibility.button, } ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/index.js b/plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/index.js index 6e4fccaf36a..0d05d9e4ea8 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/index.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/index.js @@ -67,6 +67,7 @@ registerBlockType( 'woocommerce/products-by-attribute', { default: { title: true, price: true, + rating: true, button: true, }, }, @@ -110,6 +111,7 @@ registerBlockType( 'woocommerce/products-by-attribute', { { 'is-hidden-title': ! contentVisibility.title, 'is-hidden-price': ! contentVisibility.price, + 'is-hidden-rating': ! contentVisibility.rating, 'is-hidden-button': ! contentVisibility.button, } ); diff --git a/plugins/woocommerce-blocks/assets/js/components/grid-content-control/index.js b/plugins/woocommerce-blocks/assets/js/components/grid-content-control/index.js index fc8ca47d133..40830b245c1 100644 --- a/plugins/woocommerce-blocks/assets/js/components/grid-content-control/index.js +++ b/plugins/woocommerce-blocks/assets/js/components/grid-content-control/index.js @@ -10,7 +10,7 @@ import { ToggleControl } from '@wordpress/components'; * A combination of range controls for product grid layout settings. */ const GridContentControl = ( { onChange, settings } ) => { - const { button, price, title } = settings; + const { button, price, rating, title } = settings; return ( { checked={ price } onChange={ () => onChange( { ...settings, price: ! price } ) } /> + onChange( { ...settings, rating: ! rating } ) } + /> { image = ; } + const rating = Number( product.average_rating ); + let displayRating = false; + if ( rating > 0 ) { + displayRating = ( rating / 5 ) * 100; + } + return (
{ image } @@ -33,6 +39,13 @@ const ProductPreview = ( { product } ) => { className="wc-product-preview__price" dangerouslySetInnerHTML={ { __html: product.price_html } } /> + + { displayRating && ( +
+ +
+ ) } + { __( 'Add to cart', 'woo-gutenberg-products-block' ) } diff --git a/plugins/woocommerce-blocks/assets/js/components/product-preview/style.scss b/plugins/woocommerce-blocks/assets/js/components/product-preview/style.scss index 3ad49536ba1..94d163becdf 100644 --- a/plugins/woocommerce-blocks/assets/js/components/product-preview/style.scss +++ b/plugins/woocommerce-blocks/assets/js/components/product-preview/style.scss @@ -3,10 +3,50 @@ margin-bottom: $gap; .wc-product-preview__title, - .wc-product-preview__price { + .wc-product-preview__price, + .wc-product-preview__rating { margin-top: $gap-smallest; } + .star-rating { + overflow: hidden; + position: relative; + margin-left: auto; + margin-right: auto; + width: 5.3em; + height: 1.618em; + line-height: 1.618; + font-size: 1em; + font-family: star; + font-weight: 400; + + &::before { + content: '\53\53\53\53\53'; + top: 0; + left: 0; + right: 0; + position: absolute; + opacity: 0.25; + } + + span { + overflow: hidden; + top: 0; + left: 0; + right: 0; + position: absolute; + padding-top: 1.5em; + } + + span::before { + content: '\53\53\53\53\53'; + top: 0; + left: 0; + right: 0; + position: absolute; + } + } + .wp-block-button { margin-bottom: 0; } @@ -44,6 +84,12 @@ } } + .is-hidden-rating & { + .wc-product-preview__rating { + display: none; + } + } + .is-hidden-button & { .wp-block-button { display: none; diff --git a/plugins/woocommerce-blocks/assets/js/utils/shared-attributes.js b/plugins/woocommerce-blocks/assets/js/utils/shared-attributes.js index 38abfe4c79c..79160a61eb8 100644 --- a/plugins/woocommerce-blocks/assets/js/utils/shared-attributes.js +++ b/plugins/woocommerce-blocks/assets/js/utils/shared-attributes.js @@ -48,6 +48,7 @@ export default { default: { title: true, price: true, + rating: true, button: true, }, },