Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Reviews by Product: Hide ratings if they are disabled in settings #740

Merged
merged 3 commits into from
Jul 24, 2019
Merged

Reviews by Product: Hide ratings if they are disabled in settings #740

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
56940d6
Hide ratings in Reviews by Product if disabled in settings
Aljullu Jul 16, 2019
22e26bf
Merge branch 'update/reviews-by-product-hook-order-by-endpoint' into …
Aljullu Jul 22, 2019
acbbb74
Hide order by select if ratings are disabled
Aljullu Jul 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
147 changes: 91 additions & 56 deletions assets/js/blocks/reviews-by-product/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,24 +69,25 @@ class ReviewsByProduct extends Component {
const selectedOrder = isPreview ? attributes.orderby :
orderValue || this.state.orderby || attributes.orderby;

switch ( selectedOrder ) {
case 'lowest-rating':
if ( wc_product_block_data.enableReviewRating ) {
if ( selectedOrder === 'lowest-rating' ) {
return {
order: 'asc',
orderby: 'rating',
};
case 'highest-rating':
}
if ( selectedOrder === 'highest-rating' ) {
return {
order: 'desc',
orderby: 'rating',
};
case 'most-recent':
default:
return {
order: 'desc',
orderby: 'date_gmt',
};
}
}

return {
order: 'desc',
orderby: 'date_gmt',
};
}

getReviews( orderValue, page = 1 ) {
Expand Down Expand Up @@ -144,21 +145,13 @@ class ReviewsByProduct extends Component {
this.getReviews( null, page );
}

render() {
renderOrderBySelect() {
if ( ! wc_product_block_data.enableReviewRating ) {
return null;
}

const { attributes, instanceId, isPreview } = this.props;
const { orderby, reviews, totalReviews } = this.state;
const { className, showProductRating, showReviewDate, showReviewerName } = attributes;
const showAvatar = wc_product_block_data.showAvatars && attributes.showAvatar;
const classes = classNames( 'wc-block-reviews-by-product', className, {
'has-avatar': showAvatar,
'has-date': showReviewDate,
'has-name': showReviewerName,
'has-rating': showProductRating,
} );
const attrs = {
...attributes,
showAvatar,
};
const { orderby } = this.state;

const selectId = `wc-block-reviews-by-product__orderby__select-${ instanceId }`;
const selectProps = isPreview ? {
Expand All @@ -169,41 +162,83 @@ class ReviewsByProduct extends Component {
onBlur: this.onChangeOrderby,
};

return (
<p className="wc-block-reviews-by-product__orderby">
<label className="wc-block-reviews-by-product__orderby__label" htmlFor={ selectId }>
{ __( 'Order by', 'woo-gutenberg-products-block' ) }
</label>
<select id={ selectId } className="wc-block-reviews-by-product__orderby__select" { ...selectProps }>
<option value="most-recent">
{ __( 'Most recent', 'woo-gutenberg-products-block' ) }
</option>
<option value="highest-rating">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If ratings are disabled, these ordering options don't make sense.

{ __( 'Highest rating', 'woo-gutenberg-products-block' ) }
</option>
<option value="lowest-rating">
{ __( 'Lowest rating', 'woo-gutenberg-products-block' ) }
</option>
</select>
</p>
);
}

renderReviewsList( showAvatar, showProductRating ) {
const { attributes } = this.props;
const { reviews } = this.state;
const attrs = {
...attributes,
showAvatar,
showProductRating,
};

return (
<ul className="wc-block-reviews-by-product__list">
{ reviews.length === 0 ?
(
renderReview( attrs )
) : (
reviews.map( ( review, i ) => renderReview( attrs, review, i ) )
)
}
</ul>
);
}

renderLoadMoreButton() {
const { isPreview } = this.props;
const { reviews, totalReviews } = this.state;

if ( totalReviews <= reviews.length ) {
return null;
}

return (
<button
className="wc-block-reviews-by-product__load-more"
onClick={ isPreview ? null : this.appendReviews }
>
{ __( 'Load more', 'woo-gutenberg-products-block' ) }
</button>
);
}

render() {
const { attributes } = this.props;
const { className, showReviewDate, showReviewerName } = attributes;
const showAvatar = wc_product_block_data.showAvatars && attributes.showAvatar;
const showProductRating = wc_product_block_data.enableReviewRating && attributes.showProductRating;
const classes = classNames( 'wc-block-reviews-by-product', className, {
'has-avatar': showAvatar,
'has-date': showReviewDate,
'has-name': showReviewerName,
'has-rating': showProductRating,
} );

return (
<div className={ classes }>
<p className="wc-block-reviews-by-product__orderby">
<label className="wc-block-reviews-by-product__orderby__label" htmlFor={ selectId }>
{ __( 'Order by', 'woo-gutenberg-products-block' ) }
</label>
<select id={ selectId } className="wc-block-reviews-by-product__orderby__select" { ...selectProps }>
<option value="most-recent">
{ __( 'Most recent', 'woo-gutenberg-products-block' ) }
</option>
<option value="highest-rating">
{ __( 'Highest rating', 'woo-gutenberg-products-block' ) }
</option>
<option value="lowest-rating">
{ __( 'Lowest rating', 'woo-gutenberg-products-block' ) }
</option>
</select>
</p>
<ul className="wc-block-reviews-by-product__list">
{ reviews.length === 0 ?
(
renderReview( attrs )
) : (
reviews.map( ( review, i ) => renderReview( attrs, review, i ) )
)
}
</ul>
{ totalReviews > reviews.length && (
<button
className="wc-block-reviews-by-product__load-more"
onClick={ isPreview ? null : this.appendReviews }
>
{ __( 'Load more', 'woo-gutenberg-products-block' ) }
</button>
) }
{ this.renderOrderBySelect() }
{ this.renderReviewsList( showAvatar, showProductRating ) }
{ this.renderLoadMoreButton() }
</div>
);
}
Expand Down
22 changes: 12 additions & 10 deletions assets/js/blocks/reviews-by-product/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,16 +99,18 @@ class ReviewsByProductEditor extends Component {
/>
</PanelBody>
<PanelBody title={ __( 'Content', 'woo-gutenberg-products-block' ) }>
<ToggleControl
label={ __( 'Product rating', 'woo-gutenberg-products-block' ) }
help={
attributes.showProductRating ?
__( 'Product rating is visible.', 'woo-gutenberg-products-block' ) :
__( 'Product rating is hidden.', 'woo-gutenberg-products-block' )
}
checked={ attributes.showProductRating }
onChange={ () => setAttributes( { showProductRating: ! attributes.showProductRating } ) }
/>
{ wc_product_block_data.enableReviewRating && (
<ToggleControl
label={ __( 'Product rating', 'woo-gutenberg-products-block' ) }
help={
attributes.showProductRating ?
__( 'Product rating is visible.', 'woo-gutenberg-products-block' ) :
__( 'Product rating is hidden.', 'woo-gutenberg-products-block' )
}
checked={ attributes.showProductRating }
onChange={ () => setAttributes( { showProductRating: ! attributes.showProductRating } ) }
/>
) }
<ToggleControl
label={ __( 'Reviewer name', 'woo-gutenberg-products-block' ) }
help={
Expand Down
7 changes: 3 additions & 4 deletions assets/js/blocks/reviews-by-product/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,10 @@ import classNames from 'classnames';
* @return {Object} React JSx nodes of the block
*/
export function renderReview( attributes, review = {}, i = 0 ) {
const { showAvatar, showProductRating, showReviewDate, showReviewerName } = attributes;
const { showAvatar, showProductRating: showProductRatingAttr, showReviewDate, showReviewerName } = attributes;
const { id = null, date_created: dateCreated, rating, review: text = '', reviewer = '', reviewer_avatar_urls: avatarUrls = {} } = review;
const isLoading = ! Object.keys( review ).length > 0;
const showProductRating = Number.isFinite( rating ) && showProductRatingAttr;

const classes = classNames( 'wc-block-reviews-by-product__item', {
'has-avatar': showAvatar,
Expand Down Expand Up @@ -57,9 +58,7 @@ export function renderReview( attributes, review = {}, i = 0 ) {
{ showProductRating && (
<div className="wc-block-reviews-by-product__rating">
<div className="wc-block-reviews-by-product__rating__stars" role="img">
{ Number.isFinite( rating ) && (
<span style={ starStyle }>{ sprintf( __( 'Rated %d out of 5', 'woo-gutenberg-products-block' ), rating ) }</span>
) }
<span style={ starStyle }>{ sprintf( __( 'Rated %d out of 5', 'woo-gutenberg-products-block' ), rating ) }</span>
</div>
</div>
) }
Expand Down
29 changes: 15 additions & 14 deletions src/Assets.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,20 +127,21 @@ public static function print_script_block_data() {

// Global settings used in each block.
$block_settings = array(
'min_columns' => wc_get_theme_support( 'product_blocks::min_columns', 1 ),
'max_columns' => wc_get_theme_support( 'product_blocks::max_columns', 6 ),
'default_columns' => wc_get_theme_support( 'product_blocks::default_columns', 3 ),
'min_rows' => wc_get_theme_support( 'product_blocks::min_rows', 1 ),
'max_rows' => wc_get_theme_support( 'product_blocks::max_rows', 6 ),
'default_rows' => wc_get_theme_support( 'product_blocks::default_rows', 1 ),
'thumbnail_size' => wc_get_theme_support( 'thumbnail_image_width', 300 ),
'placeholderImgSrc' => wc_placeholder_img_src(),
'min_height' => wc_get_theme_support( 'featured_block::min_height', 500 ),
'default_height' => wc_get_theme_support( 'featured_block::default_height', 500 ),
'isLargeCatalog' => $product_counts->publish > 200,
'productCategories' => $product_categories,
'homeUrl' => esc_js( home_url( '/' ) ),
'showAvatars' => '1' === get_option( 'show_avatars' ),
'min_columns' => wc_get_theme_support( 'product_blocks::min_columns', 1 ),
'max_columns' => wc_get_theme_support( 'product_blocks::max_columns', 6 ),
'default_columns' => wc_get_theme_support( 'product_blocks::default_columns', 3 ),
'min_rows' => wc_get_theme_support( 'product_blocks::min_rows', 1 ),
'max_rows' => wc_get_theme_support( 'product_blocks::max_rows', 6 ),
'default_rows' => wc_get_theme_support( 'product_blocks::default_rows', 1 ),
'thumbnail_size' => wc_get_theme_support( 'thumbnail_image_width', 300 ),
'placeholderImgSrc' => wc_placeholder_img_src(),
'min_height' => wc_get_theme_support( 'featured_block::min_height', 500 ),
'default_height' => wc_get_theme_support( 'featured_block::default_height', 500 ),
'isLargeCatalog' => $product_counts->publish > 200,
'productCategories' => $product_categories,
'homeUrl' => esc_js( home_url( '/' ) ),
'showAvatars' => '1' === get_option( 'show_avatars' ),
'enableReviewRating' => 'yes' === get_option( 'woocommerce_enable_review_rating' ),
);
?>
<script type="text/javascript">
Expand Down
3 changes: 2 additions & 1 deletion src/RestApi/Controllers/ProductReviews.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,14 +217,15 @@ protected function normalize_query_param( $query_param ) {
*/
public function prepare_item_for_response( $review, $request ) {
$context = ! empty( $request['context'] ) ? $request['context'] : 'view';
$rating = get_comment_meta( $review->comment_ID, 'rating', true ) === '' ? null : (int) get_comment_meta( $review->comment_ID, 'rating', true );
$data = array(
'id' => (int) $review->comment_ID,
'date_created' => wc_rest_prepare_date_response( $review->comment_date ),
'date_created_gmt' => wc_rest_prepare_date_response( $review->comment_date_gmt ),
'product_id' => (int) $review->comment_post_ID,
'reviewer' => $review->comment_author,
'review' => $review->comment_content,
'rating' => (int) get_comment_meta( $review->comment_ID, 'rating', true ),
'rating' => $rating,
'verified' => wc_review_is_from_verified_owner( $review->comment_ID ),
'reviewer_avatar_urls' => rest_get_avatar_urls( $review->comment_author_email ),
);
Expand Down