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

fix: Show sale bage on Product Image Gallery block #8652

Merged

Conversation

gigitux
Copy link
Contributor

@gigitux gigitux commented Mar 7, 2023

The new Product Image Gallery block was not displaying the badge for a product that is on sale. This PR fixes this bug.

Fixes #8528

Testing

User Facing Testing

  1. Go to Appearance > Themes and activate a Blockfied theme, such as: Twenty-twenty Three;
  2. After the theme is activated, go to Appearance > Editor (Beta);
  3. Inside the Design section, click on Templates;
  4. Select the Single Product template;
  5. On the top left of the page, click on the Edit button;
  6. Add the Product Image Gallery block to the editor;
  7. Go to your website, and open a Product with a On Sale status.
  8. Look at the top left of the Product Image Gallery and check that the badge appears.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

@gigitux gigitux added type: bug The issue/PR concerns a confirmed bug. skip-changelog PRs that you don't want to appear in the changelog. labels Mar 7, 2023
@gigitux gigitux requested a review from thealexandrelara March 7, 2023 10:58
@gigitux gigitux self-assigned this Mar 7, 2023
@woocommercebot woocommercebot requested a review from a team March 7, 2023 10:58
@gigitux gigitux force-pushed the fix/8528-product-image-gallery-block-not-showing-sale-badge branch from 4994ee4 to 6b48d90 Compare March 7, 2023 11:01
@github-actions
Copy link
Contributor

github-actions bot commented Mar 7, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8652.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 485
  • Total errors: 2306

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Mar 7, 2023

Size Change: +142 B (0%)

Total Size: 1.12 MB

Filename Size Change
build/active-filters.js 7.37 kB +1 B (0%)
build/all-products.js 37.4 kB +9 B (0%)
build/all-reviews.js 7.66 kB -1 B (0%)
build/attribute-filter.js 13.1 kB +2 B (0%)
build/cart.js 47.6 kB +6 B (0%)
build/catalog-sorting.js 1.7 kB +1 B (0%)
build/checkout.js 44.2 kB +12 B (0%)
build/featured-category.js 14 kB +3 B (0%)
build/featured-product.js 14.2 kB -1 B (0%)
build/handpicked-products.js 7.91 kB +2 B (0%)
build/legacy-template.js 5.31 kB -1 B (0%)
build/mini-cart-contents.js 16.5 kB +2 B (0%)
build/mini-cart.js 4.29 kB -1 B (0%)
build/price-filter.js 8.37 kB -1 B (0%)
build/product-add-to-cart.js 8.61 kB -1 B (0%)
build/product-best-sellers.js 8.25 kB -2 B (0%)
build/product-categories.js 2.36 kB -2 B (0%)
build/product-category.js 9.24 kB -2 B (0%)
build/product-on-sale.js 8.57 kB -3 B (0%)
build/product-query.js 10.8 kB +2 B (0%)
build/product-search.js 2.63 kB -1 B (0%)
build/product-tag.js 8.74 kB +2 B (0%)
build/products-by-attribute.js 9.45 kB -1 B (0%)
build/rating-filter.js 7.41 kB +1 B (0%)
build/reviews-by-category.js 11.9 kB +3 B (0%)
build/reviews-by-product.js 13 kB -1 B (0%)
build/single-product.js 10.6 kB +3 B (0%)
build/stock-filter.js 8.13 kB -3 B (0%)
build/wc-blocks-style-rtl.css 26.9 kB +59 B (0%)
build/wc-blocks-style.css 26.8 kB +58 B (0%)
build/wc-blocks-vendors.js 64.4 kB -3 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.97 kB
build/active-filters-wrapper-frontend.js 5.98 kB
build/all-products-frontend.js 11.7 kB
build/attribute-filter-frontend.js 22.5 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 3.36 kB
build/attribute-filter-wrapper-frontend.js 4.49 kB
build/blocks-checkout.js 41.2 kB
build/breadcrumbs.js 2.05 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products-frontend.js 9.74 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.19 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.36 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 653 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping-frontend.js 14.8 kB
build/cart-blocks/order-summary-subtotal-frontend.js 275 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.24 kB
build/cart-frontend.js 28.9 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.92 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 330 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 277 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 14.9 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 275 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/payment-frontend.js 8.43 kB
build/checkout-blocks/pickup-options-frontend.js 2.8 kB
build/checkout-blocks/shipping-address-frontend.js 1.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.27 kB
build/checkout-blocks/shipping-methods-frontend.js 4.58 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 311 B
build/checkout-frontend.js 30.4 kB
build/customer-account.js 3.16 kB
build/filter-wrapper-frontend.js 14.1 kB
build/filter-wrapper.js 2.39 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/mini-cart-component-frontend.js 28 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 2.87 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 588 B
build/mini-cart-contents-block/shopping-button-frontend.js 573 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-frontend.js 2.05 kB
build/price-filter-frontend.js 13.9 kB
build/price-filter-wrapper-frontend.js 6.99 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 253 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.69 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js 262 B
build/product-button-frontend.js 2.22 kB
build/product-button.js 3.99 kB
build/product-category-list-frontend.js 1.19 kB
build/product-category-list.js 502 B
build/product-image-frontend.js 2.22 kB
build/product-image.js 4.1 kB
build/product-new.js 8.25 kB
build/product-price-frontend.js 2.38 kB
build/product-price.js 1.64 kB
build/product-rating-frontend.js 1.65 kB
build/product-rating.js 918 B
build/product-results-count.js 1.65 kB
build/product-sale-badge-frontend.js 1.45 kB
build/product-sale-badge.js 818 B
build/product-sku-frontend.js 629 B
build/product-sku.js 375 B
build/product-stock-indicator-frontend.js 1.32 kB
build/product-stock-indicator.js 643 B
build/product-summary-frontend.js 1.58 kB
build/product-summary.js 920 B
build/product-tag-list-frontend.js 1.19 kB
build/product-tag-list.js 498 B
build/product-title-frontend.js 1.65 kB
build/product-title.js 3.46 kB
build/product-top-rated.js 8.49 kB
build/rating-filter-frontend.js 20.9 kB
build/rating-filter-wrapper-frontend.js 5.61 kB
build/reviews-frontend.js 7.13 kB
build/single-product-frontend.js 17.9 kB
build/stock-filter-frontend.js 21.1 kB
build/stock-filter-wrapper-frontend.js 3.15 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.69 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.83 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/vendors--checkout-blocks/shipping-methods-frontend.js 8.84 kB
build/wc-blocks-data.js 21.5 kB
build/wc-blocks-editor-style-rtl.css 5.82 kB
build/wc-blocks-editor-style.css 5.82 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.73 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks.js 2.63 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.6 kB
build/wc-shipping-method-pickup-location.js 29.7 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@gigitux gigitux force-pushed the fix/8528-product-image-gallery-block-not-showing-sale-badge branch from 6b48d90 to af57923 Compare March 7, 2023 11:22
Copy link
Contributor

@thealexandrelara thealexandrelara left a comment

Choose a reason for hiding this comment

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

Thank you for working and solving the issue. There is one thing that I'd like to check with you before approving the PR.

Currently, we can have multiple Product Image Gallery blocks added to the page, so I added more than one to the page inside a Group block and I realized the Sale badges are stacking at the top (probably caused by the fact that the span.onsale class has a position: absolute), like this:

image

Do you think this is an issue we have to solve or it would be better to just limit to 1 the amount of product image gallery blocks that we can add to the page?

@gigitux
Copy link
Contributor Author

gigitux commented Mar 8, 2023

Thank you for working and solving the issue. There is one thing that I'd like to check with you before approving the PR.

Currently, we can have multiple Product Image Gallery blocks added to the page, so I added more than one to the page inside a Group block and I realized the Sale badges are stacking at the top (probably caused by the fact that the span.onsale class has a position: absolute), like this:

image

Do you think this is an issue we have to solve or it would be better to just limit to 1 the amount of product image gallery blocks that we can add to the page?

Great catch! For now, let's limit it to one! I think that we should do this for all blocks related to the Single Product template.

Fixed via 97b6a72

@gigitux gigitux requested a review from thealexandrelara March 8, 2023 11:33
Copy link
Contributor

@thealexandrelara thealexandrelara left a comment

Choose a reason for hiding this comment

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

Just tested and confirmed the issue is no longer happening since now the block limit was set to just 1. Thank you for solving it! ✅

@github-actions github-actions bot added this to the 9.8.0 milestone Mar 8, 2023
@gigitux gigitux merged commit 01efca1 into trunk Mar 9, 2023
@gigitux gigitux deleted the fix/8528-product-image-gallery-block-not-showing-sale-badge branch March 9, 2023 08:43
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
skip-changelog PRs that you don't want to appear in the changelog. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Product Image Gallery block not showing Sale Badge
2 participants