Merge pull request #30840 from woocommerce/add/reviews-into-marketplace-product-card
Add ratings, reviews and icons into Marketplace's Product Cards
This commit is contained in:
Néstor Soriano
GitHub
commit
30df9f4a01
|
|
@ -731,10 +731,26 @@
|
|||
margin: 14px 64px 0 0;
|
||||
max-width: 389px;
|
||||
}
|
||||
|
||||
.product-developed-by {
|
||||
color: #50575e; // Gray 60
|
||||
font-size: 12px;
|
||||
font-family: sans-serif;
|
||||
line-height: 20px;
|
||||
margin-top: 4px;
|
||||
|
||||
.product-vendor-link {
|
||||
color: #50575e; // Gray 60
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-footer {
|
||||
align-items: center;
|
||||
border-top: 1px solid #dcdcde;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 24px;
|
||||
|
||||
.price {
|
||||
|
|
@ -742,11 +758,51 @@
|
|||
color: #1d2327;
|
||||
}
|
||||
|
||||
.price-suffix {
|
||||
color: #646970; // Gray 50
|
||||
}
|
||||
|
||||
.product-reviews-block {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 4px;
|
||||
|
||||
.product-rating-star {
|
||||
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 {
|
||||
color: #646970; // Gray 50
|
||||
font-size: 12px;
|
||||
font-family: sans-serif;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.154px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #fff;
|
||||
border-color: #007cba;
|
||||
color: #007cba;
|
||||
float: right;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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="#f0c930" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 424 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 424 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 588 B |
|
|
@ -882,6 +882,40 @@ class WC_Admin_Addons {
|
|||
return " $admin_body_class woocommerce-page-wc-marketplace ";
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
public static function 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';
|
||||
}
|
||||
|
||||
/**
|
||||
* Take an action object and return the URL based on properties of the action.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
}
|
||||
|
||||
$current_section_name = __( 'Browse Categories', 'woocommerce' );
|
||||
|
||||
?>
|
||||
<div class="woocommerce wc-addons-wrap">
|
||||
<h1 class="screen-reader-text"><?php esc_html_e( 'Marketplace', 'woocommerce' ); ?></h1>
|
||||
|
|
@ -118,21 +117,74 @@ $current_section_name = __( 'Browse Categories', 'woocommerce' );
|
|||
?>
|
||||
<li class="product">
|
||||
<div class="product-details">
|
||||
<?php if ( ! empty( $addon->image ) ) : ?>
|
||||
<span class="product-img-wrap"><img src="<?php echo esc_url( $addon->image ); ?>" /></span>
|
||||
<?php if ( ! empty( $addon->icon ) ) : ?>
|
||||
<span class="product-img-wrap">
|
||||
<?php /* Show an icon if it exists */ ?>
|
||||
<img src="<?php echo esc_url( $addon->icon ); ?>" />
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
<a href="<?php echo esc_url( WC_Admin_Addons::add_in_app_purchase_url_params( $addon->link ) ); ?>">
|
||||
<h2><?php echo esc_html( $addon->title ); ?></h2>
|
||||
</a>
|
||||
<?php if ( ! empty( $addon->vendor_name ) && ! empty( $addon->vendor_url ) ) : ?>
|
||||
<div class="product-developed-by">
|
||||
<?php
|
||||
$parsed_vendor_url = parse_url( $addon->vendor_url );
|
||||
if ( null == $parsed_vendor_url['path'] ) {
|
||||
$addon->vendor_url .= '/';
|
||||
}
|
||||
$separator = ( null == $parsed_vendor_url['query'] ) ? '?' : '&';
|
||||
$query = http_build_query(
|
||||
array(
|
||||
'utm_source' => 'extensionsscreen',
|
||||
'utm_medium' => 'product',
|
||||
'utm_campaign' => 'wcaddons',
|
||||
'utm_content' => 'devpartner',
|
||||
)
|
||||
);
|
||||
$addon->vendor_url .= $separator . $query;
|
||||
|
||||
printf(
|
||||
/* translators: %s vendor link */
|
||||
esc_html__( 'Developed by %s', 'woocommerce' ),
|
||||
sprintf(
|
||||
'<a class="product-vendor-link" href="%1$s" target="_blank">%2$s</a>',
|
||||
esc_url_raw( $addon->vendor_url ),
|
||||
wp_kses_post( $addon->vendor_name )
|
||||
)
|
||||
);
|
||||
?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<p><?php echo wp_kses_post( $addon->excerpt ); ?></p>
|
||||
</div>
|
||||
<div class="product-footer">
|
||||
<?php if ( '$0.00' === $addon->price ) : ?>
|
||||
<span class="price"><?php esc_html_e( 'Free', 'woocommerce' ); ?></span>
|
||||
<?php else : ?>
|
||||
<span class="price"><?php echo wp_kses_post( $addon->price ); ?></span>
|
||||
<span class="price_suffix"><?php esc_html_e( 'per year', 'woocommerce' ); ?></span>
|
||||
<?php endif; ?>
|
||||
<div class="product-price-and-reviews-container">
|
||||
<div class="product-price-block">
|
||||
<?php if ( '$0.00' === $addon->price ) : ?>
|
||||
<span class="price"><?php esc_html_e( 'Free', 'woocommerce' ); ?></span>
|
||||
<?php else : ?>
|
||||
<?php
|
||||
$price_suffix = __( 'per year', 'woocommerce' );
|
||||
if ( ! empty( $addon->price_suffix ) ) {
|
||||
$price_suffix = $addon->price_suffix;
|
||||
}
|
||||
?>
|
||||
<span class="price"><?php echo wp_kses_post( $addon->price ); ?></span>
|
||||
<span class="price-suffix"><?php echo esc_html( $price_suffix ); ?></span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php if ( ! empty( $addon->reviews_count ) && ! empty( $addon->rating ) ) : ?>
|
||||
<?php /* Show rating and the number of reviews */ ?>
|
||||
<div class="product-reviews-block">
|
||||
<?php for ( $index = 1; $index <= 5; ++$index ) : ?>
|
||||
<?php $rating_star_class = 'product-rating-star product-rating-star__' . WC_Admin_Addons::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>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<a class="button" href="<?php echo esc_url( WC_Admin_Addons::add_in_app_purchase_url_params( $addon->link ) ); ?>">
|
||||
<?php esc_html_e( 'View details', 'woocommerce' ); ?>
|
||||
</a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue