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

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
This commit is contained in:
Kelly Dwan 2019-03-06 13:50:32 -05:00 committed by GitHub
parent 432925a090
commit 9fa9257430
19 changed files with 94 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
plugins/woocommerce-blocks/assets/css/style.scss
View File

@ -17,6 +17,12 @@
}
}
&.is-hidden-rating {
.star-rating {
display: none;
}
}
&.is-hidden-button {
.button[data-product_sku] {
display: none !important;

1
plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/block.js
View File

@ -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,
} );

2
plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/index.js
View File

@ -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,
}
);

1
plugins/woocommerce-blocks/assets/js/blocks/product-best-sellers/block.js
View File

@ -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,
} );

1
plugins/woocommerce-blocks/assets/js/blocks/product-best-sellers/index.js
View File

@ -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,
}
);

1
plugins/woocommerce-blocks/assets/js/blocks/product-category/block.js
View File

@ -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,
} );

1
plugins/woocommerce-blocks/assets/js/blocks/product-category/index.js
View File

@ -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,
}
);

1
plugins/woocommerce-blocks/assets/js/blocks/product-new/block.js
View File

@ -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,
} );

1
plugins/woocommerce-blocks/assets/js/blocks/product-new/index.js
View File

@ -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,
}
);

1
plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/block.js
View File

@ -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,
} );

1
plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/index.js
View File

@ -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,
}
);

1
plugins/woocommerce-blocks/assets/js/blocks/product-top-rated/block.js
View File

@ -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,
} );

1
plugins/woocommerce-blocks/assets/js/blocks/product-top-rated/index.js
View File

@ -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,
}
);

1
plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/block.js
View File

@ -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,
} );

2
plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/index.js
View File

@ -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,
}
);

12
plugins/woocommerce-blocks/assets/js/components/grid-content-control/index.js
View File

@ -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 (
<Fragment>
<ToggleControl
@ -33,6 +33,16 @@ const GridContentControl = ( { onChange, settings } ) => {
checked={ price }
onChange={ () => onChange( { ...settings, price: ! price } ) }
/>
<ToggleControl
label={ __( 'Product rating', 'woo-gutenberg-products-block' ) }
help={
rating ?
__( 'Product rating is visible.', 'woo-gutenberg-products-block' ) :
__( 'Product rating is hidden.', 'woo-gutenberg-products-block' )
}
checked={ rating }
onChange={ () => onChange( { ...settings, rating: ! rating } ) }
/>
<ToggleControl
label={ __( 'Add to Cart button', 'woo-gutenberg-products-block' ) }
help={

13
plugins/woocommerce-blocks/assets/js/components/product-preview/index.js
View File

@ -22,6 +22,12 @@ const ProductPreview = ( { product } ) => {
image = <img src={ placeholderImgSrc } alt="" />;
}
const rating = Number( product.average_rating );
let displayRating = false;
if ( rating > 0 ) {
displayRating = ( rating / 5 ) * 100;
}
return (
<div className="wc-product-preview">
{ image }
@ -33,6 +39,13 @@ const ProductPreview = ( { product } ) => {
className="wc-product-preview__price"
dangerouslySetInnerHTML={ { __html: product.price_html } }
/>
{ displayRating && (
<div className="wc-product-preview__rating star-rating" role="img">
<span style={ { width: `${ displayRating }%` } } />
</div>
) }
<span className="wp-block-button">
<span className="wc-product-preview__add-to-cart wp-block-button__link">
{ __( 'Add to cart', 'woo-gutenberg-products-block' ) }

48
plugins/woocommerce-blocks/assets/js/components/product-preview/style.scss
View File

@ -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;

1
plugins/woocommerce-blocks/assets/js/utils/shared-attributes.js
View File

@ -48,6 +48,7 @@ export default {
default: {
title: true,
price: true,
rating: true,
button: true,
},
},