From 85a894021a6da69dcab3e94aab5a3ae481a77e17 Mon Sep 17 00:00:00 2001 From: Timur Gogolev Date: Wed, 29 Sep 2021 16:23:04 +0300 Subject: [PATCH 01/14] Add stars and reviews number --- assets/css/admin.scss | 32 +++++++++++++++++++ assets/images/icons/star.svg | 13 ++++++++ .../admin/views/html-admin-page-addons.php | 24 ++++++++++---- 3 files changed, 63 insertions(+), 6 deletions(-) create mode 100644 assets/images/icons/star.svg diff --git a/assets/css/admin.scss b/assets/css/admin.scss index 47da6765b34..dfe2ef2a052 100644 --- a/assets/css/admin.scss +++ b/assets/css/admin.scss @@ -734,7 +734,11 @@ } .product-footer { + align-items: center; border-top: 1px solid #dcdcde; + display: flex; + flex-direction: row; + justify-content: space-between; padding: 24px; .price { @@ -742,11 +746,39 @@ color: #1d2327; } + .price-suffix { + color: #646970; /* Gray 50 */ + } + + .product-reviews-block { + display: flex; + flex-direction: row; + margin-top: 4px; + + .product-rating-star { + background: url(../images/icons/star.svg) no-repeat; + background-size: contain; + height: 16px; + margin: 4px 4px 4px 0; + width: 17px; + } + + .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.svg b/assets/images/icons/star.svg new file mode 100644 index 00000000000..9f550f87964 --- /dev/null +++ b/assets/images/icons/star.svg @@ -0,0 +1,13 @@ + + + + diff --git a/includes/admin/views/html-admin-page-addons.php b/includes/admin/views/html-admin-page-addons.php index ceaf5a380b6..1d087614239 100644 --- a/includes/admin/views/html-admin-page-addons.php +++ b/includes/admin/views/html-admin-page-addons.php @@ -127,12 +127,24 @@ $current_section_name = __( 'Browse Categories', 'woocommerce' );

excerpt ); ?>

- price ) : ?> - - - price ); ?> - - +
+
+ price ) : ?> + + + price ); ?> + + +
+ reviews_count ) : ?> +
+ +
+ + (reviews_count ); ?>) +
+ +
From 3801977e430cddfe160ab4484f0cc313d6def0a6 Mon Sep 17 00:00:00 2001 From: Timur Gogolev Date: Wed, 29 Sep 2021 16:47:54 +0300 Subject: [PATCH 02/14] Use icon instead of image if possible --- includes/admin/views/html-admin-page-addons.php | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/includes/admin/views/html-admin-page-addons.php b/includes/admin/views/html-admin-page-addons.php index 1d087614239..15415592d5b 100644 --- a/includes/admin/views/html-admin-page-addons.php +++ b/includes/admin/views/html-admin-page-addons.php @@ -118,12 +118,16 @@ $current_section_name = __( 'Browse Categories', 'woocommerce' ); ?>
  • - image ) ) : ?> - + image ) || ! empty( $addon->icon ) ) : ?> + + + +

    title ); ?>

     +

    excerpt ); ?>

    @@ -138,6 +142,7 @@ $current_section_name = __( 'Browse Categories', 'woocommerce' );
    reviews_count ) : ?>
    +
    From 1492f8f66cdb7a59d2fbe9399e4ace4c2ce3d6b5 Mon Sep 17 00:00:00 2001 From: Timur Gogolev Date: Wed, 29 Sep 2021 22:00:11 +0300 Subject: [PATCH 03/14] Add developed-by string --- assets/css/admin.scss | 12 ++++++++++++ .../admin/views/html-admin-page-addons.php | 18 ++++++++++++++++-- 2 files changed, 28 insertions(+), 2 deletions(-) diff --git a/assets/css/admin.scss b/assets/css/admin.scss index dfe2ef2a052..e79d66094bf 100644 --- a/assets/css/admin.scss +++ b/assets/css/admin.scss @@ -731,6 +731,18 @@ 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 { diff --git a/includes/admin/views/html-admin-page-addons.php b/includes/admin/views/html-admin-page-addons.php index 15415592d5b..e0b5830b25a 100644 --- a/includes/admin/views/html-admin-page-addons.php +++ b/includes/admin/views/html-admin-page-addons.php @@ -121,13 +121,27 @@ $current_section_name = __( 'Browse Categories', 'woocommerce' ); image ) || ! empty( $addon->icon ) ) : ?> - +

    title ); ?>

     - + vendor_name ) && ! empty( $addon->vendor_url ) ) : ?> +
    + %2$s', + esc_url_raw( $addon->vendor_url ), + wp_kses_post( $addon->vendor_name ) + ) + ); + ?> +
    +

    excerpt ); ?>

    From bf5e4ef48b870dfd728575a197b735e4badda486 Mon Sep 17 00:00:00 2001 From: Timur Gogolev Date: Wed, 29 Sep 2021 23:09:42 +0300 Subject: [PATCH 04/14] Show ratings with the use of stars --- assets/css/admin.scss | 14 +++++- .../icons/{star.svg => star-golden.svg} | 0 assets/images/icons/star-gray.svg | 13 ++++++ assets/images/icons/star-half-filled.svg | 18 ++++++++ .../admin/views/html-admin-page-addons.php | 43 +++++++++++++++++-- 5 files changed, 83 insertions(+), 5 deletions(-) rename assets/images/icons/{star.svg => star-golden.svg} (100%) create mode 100644 assets/images/icons/star-gray.svg create mode 100644 assets/images/icons/star-half-filled.svg diff --git a/assets/css/admin.scss b/assets/css/admin.scss index e79d66094bf..68929fc13f3 100644 --- a/assets/css/admin.scss +++ b/assets/css/admin.scss @@ -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 { diff --git a/assets/images/icons/star.svg b/assets/images/icons/star-golden.svg similarity index 100% rename from assets/images/icons/star.svg rename to assets/images/icons/star-golden.svg 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/views/html-admin-page-addons.php b/includes/admin/views/html-admin-page-addons.php index e0b5830b25a..2f2b9a78011 100644 --- a/includes/admin/views/html-admin-page-addons.php +++ b/includes/admin/views/html-admin-page-addons.php @@ -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'; +} + ?>

    @@ -154,11 +188,12 @@ $current_section_name = __( 'Browse Categories', 'woocommerce' );
    - reviews_count ) : ?> + reviews_count ) && ! empty( $addon->rating ) ) : ?> +
    - - -
    + + rating, $index ); ?> +
    (reviews_count ); ?>)
    From b2b0761adba7e7d1b8231457de6d5d3159535fd4 Mon Sep 17 00:00:00 2001 From: Timur Gogolev Date: Tue, 5 Oct 2021 14:50:03 +0300 Subject: [PATCH 05/14] Address review comments --- includes/admin/views/html-admin-page-addons.php | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/includes/admin/views/html-admin-page-addons.php b/includes/admin/views/html-admin-page-addons.php index 2f2b9a78011..2c2793b8f83 100644 --- a/includes/admin/views/html-admin-page-addons.php +++ b/includes/admin/views/html-admin-page-addons.php @@ -152,10 +152,10 @@ function wccom_get_star_class( $rating, $index ) { ?>
  • - image ) || ! empty( $addon->icon ) ) : ?> + icon ) ) : ?> - - + + @@ -168,7 +168,7 @@ function wccom_get_star_class( $rating, $index ) { /* translators: %s vendor link */ esc_html__( 'Developed by %s', 'woocommerce' ), sprintf( - '%2$s', + '%2$s', esc_url_raw( $addon->vendor_url ), wp_kses_post( $addon->vendor_name ) ) From a31f87476315544109dbd992f709b8f639811d1c Mon Sep 17 00:00:00 2001 From: And Finally Date: Wed, 13 Oct 2021 12:23:21 +0100 Subject: [PATCH 06/14] Changed SCSS comments. --- assets/css/admin.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/assets/css/admin.scss b/assets/css/admin.scss index 68929fc13f3..eae091f59df 100644 --- a/assets/css/admin.scss +++ b/assets/css/admin.scss @@ -733,14 +733,14 @@ } .product-developed-by { - color: #50575e; /* Gray 60 */ + color: #50575e; // Gray 60 font-size: 12px; font-family: sans-serif; line-height: 20px; margin-top: 4px; .product-vendor-link { - color: #50575e; /* Gray 60 */ + color: #50575e; // Gray 60 } } } @@ -759,7 +759,7 @@ } .price-suffix { - color: #646970; /* Gray 50 */ + color: #646970; // Gray 50 } .product-reviews-block { @@ -788,7 +788,7 @@ } .product-reviews-count { - color: #646970; /* Gray 50 */ + color: #646970; // Gray 50 font-size: 12px; font-family: sans-serif; line-height: 24px; From dd53c8d62b1bfc94b99d9746f8da87d4d1f8d52f Mon Sep 17 00:00:00 2001 From: And Finally Date: Wed, 13 Oct 2021 14:14:49 +0100 Subject: [PATCH 07/14] Added UTM params to vendor URL. --- .../admin/views/html-admin-page-addons.php | 33 ++++++++++++++----- 1 file changed, 24 insertions(+), 9 deletions(-) diff --git a/includes/admin/views/html-admin-page-addons.php b/includes/admin/views/html-admin-page-addons.php index 2c2793b8f83..2f0c11949a7 100644 --- a/includes/admin/views/html-admin-page-addons.php +++ b/includes/admin/views/html-admin-page-addons.php @@ -164,15 +164,30 @@ function wccom_get_star_class( $rating, $index ) { vendor_name ) && ! empty( $addon->vendor_url ) ) : ?>
    %2$s', - esc_url_raw( $addon->vendor_url ), - wp_kses_post( $addon->vendor_name ) - ) - ); + $parsed_vendor_url = parse_url( $addon->vendor_url ); + if ( $parsed_vendor_url['path'] == null ) { + $addon->vendor_url .= '/'; + } + $separator = ( $parsed_vendor_url['query'] == null ) ? '?' : '&'; + $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 ) + ) + ); ?>
    From e7fa363d8dc45c47903b5016a83a6426fa60a046 Mon Sep 17 00:00:00 2001 From: And Finally Date: Wed, 13 Oct 2021 14:20:57 +0100 Subject: [PATCH 08/14] Added support for dynamic price suffix in `$addon` data. --- includes/admin/views/html-admin-page-addons.php | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/includes/admin/views/html-admin-page-addons.php b/includes/admin/views/html-admin-page-addons.php index 2f0c11949a7..4877b3641d2 100644 --- a/includes/admin/views/html-admin-page-addons.php +++ b/includes/admin/views/html-admin-page-addons.php @@ -199,8 +199,14 @@ function wccom_get_star_class( $rating, $index ) { price ) : ?> + price_suffix ) { + $price_suffix = $addon->price_suffix; + } + ?> price ); ?> - +
    reviews_count ) && ! empty( $addon->rating ) ) : ?> From 57c17498658c5eb49965ab70502de98ff0961448 Mon Sep 17 00:00:00 2001 From: Timur Gogolev Date: Wed, 13 Oct 2021 17:40:29 +0300 Subject: [PATCH 09/14] Try remove vendor folder from caching --- .github/workflows/ci.yml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index ec0263a68c8..98aa05ee017 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -50,9 +50,8 @@ jobs: - name: Get cached composer directories uses: actions/cache@v2 with: - path: | + path: | # try removing ./vendor from cache ./packages - ./vendor key: ${{ runner.os }}-${{ hashFiles('./composer.lock') }} - name: Setup and install composer From bd69cb2dd4da4695dad00093a29dae6f4042104e Mon Sep 17 00:00:00 2001 From: Timur Gogolev Date: Wed, 13 Oct 2021 17:50:53 +0300 Subject: [PATCH 10/14] Try remove using of cache --- .github/workflows/ci.yml | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 98aa05ee017..ee5cef5712e 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -47,12 +47,14 @@ jobs: php --version composer --version - - name: Get cached composer directories - uses: actions/cache@v2 - with: - path: | # try removing ./vendor from cache - ./packages - key: ${{ runner.os }}-${{ hashFiles('./composer.lock') }} + # Try removing using of cache + # - name: Get cached composer directories + # uses: actions/cache@v2 + # with: + # path: | + # ./packages + # ./vendor + # key: ${{ runner.os }}-${{ hashFiles('./composer.lock') }} - name: Setup and install composer run: composer install From db64f583bcb119f30dc9f5c2eaa286282aee0be1 Mon Sep 17 00:00:00 2001 From: Timur Gogolev Date: Wed, 13 Oct 2021 17:58:02 +0300 Subject: [PATCH 11/14] Try add phpunit into deps --- .github/workflows/ci.yml | 15 +++++++-------- composer.json | 1 + composer.lock | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index ee5cef5712e..ec0263a68c8 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -47,14 +47,13 @@ jobs: php --version composer --version - # Try removing using of cache - # - name: Get cached composer directories - # uses: actions/cache@v2 - # with: - # path: | - # ./packages - # ./vendor - # key: ${{ runner.os }}-${{ hashFiles('./composer.lock') }} + - name: Get cached composer directories + uses: actions/cache@v2 + with: + path: | + ./packages + ./vendor + key: ${{ runner.os }}-${{ hashFiles('./composer.lock') }} - name: Setup and install composer run: composer install diff --git a/composer.json b/composer.json index d719a63864d..d38cccccc1f 100644 --- a/composer.json +++ b/composer.json @@ -26,6 +26,7 @@ }, "require-dev": { "bamarni/composer-bin-plugin": "^1.4", + "phpunit/phpunit": "^6.5", "yoast/phpunit-polyfills": "^1.0" }, "config": { diff --git a/composer.lock b/composer.lock index f24a0432462..0c587f69820 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "1a8d9b536eba5d14612c538b56803186", + "content-hash": "f694e88349087e677d5ae262107235de", "packages": [ { "name": "automattic/jetpack-autoloader", From a0745a6992351e9af2eeeef6ab1dcf1f0141e8df Mon Sep 17 00:00:00 2001 From: Timur Gogolev Date: Wed, 13 Oct 2021 18:02:31 +0300 Subject: [PATCH 12/14] Fix linter bugs --- includes/admin/views/html-admin-page-addons.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/includes/admin/views/html-admin-page-addons.php b/includes/admin/views/html-admin-page-addons.php index 4877b3641d2..702fe202d44 100644 --- a/includes/admin/views/html-admin-page-addons.php +++ b/includes/admin/views/html-admin-page-addons.php @@ -165,10 +165,10 @@ function wccom_get_star_class( $rating, $index ) {
    vendor_url ); - if ( $parsed_vendor_url['path'] == null ) { + if ( null == $parsed_vendor_url['path'] ) { $addon->vendor_url .= '/'; } - $separator = ( $parsed_vendor_url['query'] == null ) ? '?' : '&'; + $separator = ( null == $parsed_vendor_url['query'] ) ? '?' : '&'; $query = http_build_query( array( 'utm_source' => 'extensionsscreen', From 8e2f8bd1db3dc28e7c2111009cc9f8ebed11565a Mon Sep 17 00:00:00 2001 From: Timur Gogolev Date: Wed, 13 Oct 2021 18:24:52 +0300 Subject: [PATCH 13/14] Move get_star_class out of template file --- includes/admin/class-wc-admin-addons.php | 34 ++++++++++++++++ .../admin/views/html-admin-page-addons.php | 39 +------------------ 2 files changed, 36 insertions(+), 37 deletions(-) diff --git a/includes/admin/class-wc-admin-addons.php b/includes/admin/class-wc-admin-addons.php index 82a96a401e9..b068669e046 100644 --- a/includes/admin/class-wc-admin-addons.php +++ b/includes/admin/class-wc-admin-addons.php @@ -811,4 +811,38 @@ 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'; + } } diff --git a/includes/admin/views/html-admin-page-addons.php b/includes/admin/views/html-admin-page-addons.php index 702fe202d44..ad9f707f6f4 100644 --- a/includes/admin/views/html-admin-page-addons.php +++ b/includes/admin/views/html-admin-page-addons.php @@ -12,41 +12,6 @@ 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'; -} - ?>

    @@ -201,7 +166,7 @@ function wccom_get_star_class( $rating, $index ) { price_suffix ) { + if ( ! empty( $addon->price_suffix ) ) { $price_suffix = $addon->price_suffix; } ?> @@ -213,7 +178,7 @@ function wccom_get_star_class( $rating, $index ) {
    - rating, $index ); ?> + rating, $index ); ?>
    (reviews_count ); ?>) From 3136dbb7869d1ce81648f7786de19887adafa424 Mon Sep 17 00:00:00 2001 From: Timur Gogolev Date: Wed, 13 Oct 2021 18:26:01 +0300 Subject: [PATCH 14/14] Revert composer.json --- composer.json | 1 - 1 file changed, 1 deletion(-) diff --git a/composer.json b/composer.json index d38cccccc1f..d719a63864d 100644 --- a/composer.json +++ b/composer.json @@ -26,7 +26,6 @@ }, "require-dev": { "bamarni/composer-bin-plugin": "^1.4", - "phpunit/phpunit": "^6.5", "yoast/phpunit-polyfills": "^1.0" }, "config": {