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

Show ratings with the use of stars

This commit is contained in:
Timur Gogolev 2021-09-29 23:09:42 +03:00
parent 1492f8f66c
commit bf5e4ef48b
5 changed files with 83 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
assets/css/admin.scss
View File

@ -768,11 +768,23 @@
margin-top: 4px;
.product-rating-star {
background: url(../images/icons/star.svg) no-repeat;
background-repeat: no-repeat;
background-size: contain;
height: 16px;
margin: 4px 4px 4px 0;
width: 17px;
&__fill {
background-image: url(../images/icons/star-golden.svg);
}
&__half-fill {
background-image: url(../images/icons/star-half-filled.svg);
}
&__no-fill {
background-image: url(../images/icons/star-gray.svg);
}
}
.product-reviews-count {

0
assets/images/icons/star.svg → assets/images/icons/star-golden.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 424 B

After

Width:  |  Height:  |  Size: 424 B

13
assets/images/icons/star-gray.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="16.27"
height="15.39"
viewBox="0 0 16.270002 15.39"
fill="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
>
<path
d="m 8.1376662,11.759108 5.0199998,3.6 -1.9214,-5.8133003 5.02,-3.52 h -6.1566 L 8.1376662,0.02580769 6.1757662,6.0258077 H 0.01919622 l 5.01994998,3.52 -1.92139,5.8133003 z"
fill="#a7aaad" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 424 B

18
assets/images/icons/star-half-filled.svg Normal file
View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="16.27"
height="15.39"
viewBox="0 0 16.270002 15.39"
fill="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
>
<linearGradient id="gradient">
<stop offset="50%" stop-color="#f0c930"/>
<stop offset="50%" stop-color="#a7aaad" stop-opacity="1"/>
</linearGradient>
<path
d="m 8.1376662,11.759108 5.0199998,3.6 -1.9214,-5.8133003 5.02,-3.52 h -6.1566 L 8.1376662,0.02580769 6.1757662,6.0258077 H 0.01919622 l 5.01994998,3.52 -1.92139,5.8133003 z"
fill="url(#gradient)"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 588 B

43
includes/admin/views/html-admin-page-addons.php
View File

@ -13,6 +13,40 @@ if ( ! defined( 'ABSPATH' ) ) {
$current_section_name = __( 'Browse Categories', 'woocommerce' );
/**
* Determine which class should be used for a rating star:
* - golden
* - half-filled (50/50 golden and gray)
* - gray
*
* Consider ratings from 3.0 to 4.0 as an example
* 3.0 will produce 3 stars
* 3.1 to 3.5 will produce 3 stars and a half star
* 3.6 to 4.0 will product 4 stars
*
* @param float $rating Rating of a product.
* @param int $index Index of a star in a row.
*
* @return string CSS class to use.
*/
function wccom_get_star_class( $rating, $index ) {
if ( $rating >= $index ) {
// Rating more that current star to show.
return 'fill';
} else if (
abs( $index - 1 - floor( $rating ) ) < 0.0000001 &&
0 < ( $rating - floor( $rating ) )
) {
// For rating more than x.0 and less than x.5 or equal it will show a half star.
return 50 >= floor( ( $rating - floor( $rating ) ) * 100 )
? 'half-fill'
: 'fill';
}
// Don't show a golden star otherwise.
return 'no-fill';
}
?>
<div class="woocommerce wc-addons-wrap">
<h1 class="screen-reader-text"><?php esc_html_e( 'Marketplace', 'woocommerce' ); ?></h1>
@ -154,11 +188,12 @@ $current_section_name = __( 'Browse Categories', 'woocommerce' );
<span class="price-suffix"><?php esc_html_e( 'per year', 'woocommerce' ); ?></span>
<?php endif; ?>
</div>
<?php if ( null !== $addon->reviews_count ) : ?>
<?php if ( ! empty( $addon->reviews_count ) && ! empty( $addon->rating ) ) : ?>
<?php /* Show rating and the number of reviews */ ?>
<div class="product-reviews-block">
<?php /* TODO: Show proper rating, including half stars */ ?>
<?php for ( $i = 1; $i <= 5; ++$i ) : ?>
<div class="product-rating-star"></div>
<?php for ( $index = 1; $index <= 5; ++$index ) : ?>
<?php $rating_star_class = 'product-rating-star product-rating-star__' . wccom_get_star_class( $addon->rating, $index ); ?>
<div class="<?php echo esc_attr( $rating_star_class ); ?>"></div>
<?php endfor; ?>
<span class="product-reviews-count">(<?php echo wp_kses_post( $addon->reviews_count ); ?>)</span>
</div>