diff --git a/assets/css/admin.scss b/assets/css/admin.scss index 72e3a742909..91c7b0377ac 100644 --- a/assets/css/admin.scss +++ b/assets/css/admin.scss @@ -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; } } } diff --git a/assets/images/icons/star-golden.svg b/assets/images/icons/star-golden.svg new file mode 100644 index 00000000000..9f550f87964 --- /dev/null +++ b/assets/images/icons/star-golden.svg @@ -0,0 +1,13 @@ + + + + diff --git a/assets/images/icons/star-gray.svg b/assets/images/icons/star-gray.svg new file mode 100644 index 00000000000..a530f2298af --- /dev/null +++ b/assets/images/icons/star-gray.svg @@ -0,0 +1,13 @@ + + + + diff --git a/assets/images/icons/star-half-filled.svg b/assets/images/icons/star-half-filled.svg new file mode 100644 index 00000000000..33b07e8ca1b --- /dev/null +++ b/assets/images/icons/star-half-filled.svg @@ -0,0 +1,18 @@ + + + + + + + + diff --git a/includes/admin/class-wc-admin-addons.php b/includes/admin/class-wc-admin-addons.php index 4f98f8222a7..bc8dfbbe1fb 100644 --- a/includes/admin/class-wc-admin-addons.php +++ b/includes/admin/class-wc-admin-addons.php @@ -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. * diff --git a/includes/admin/views/html-admin-page-addons.php b/includes/admin/views/html-admin-page-addons.php index 47a856fff1c..433e317c387 100644 --- a/includes/admin/views/html-admin-page-addons.php +++ b/includes/admin/views/html-admin-page-addons.php @@ -15,7 +15,6 @@ if ( ! defined( 'ABSPATH' ) ) { } $current_section_name = __( 'Browse Categories', 'woocommerce' ); - ?>

@@ -118,21 +117,74 @@ $current_section_name = __( 'Browse Categories', 'woocommerce' ); ?>
  • - image ) ) : ?> - + icon ) ) : ?> + + + +

    title ); ?>

    + vendor_name ) && ! empty( $addon->vendor_url ) ) : ?> +
    + 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( + '%2$s', + esc_url_raw( $addon->vendor_url ), + wp_kses_post( $addon->vendor_name ) + ) + ); + ?> +
    +

    excerpt ); ?>