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

Mini Cart block - fix translations handling #6153 #6158

Merged
merged 5 commits into from
Apr 1, 2022

Conversation

gigitux
Copy link
Contributor

@gigitux gigitux commented Mar 29, 2022

This PR fixes how the Mini Cart block loads the translations.

Fixes #6153

Technical details

I guess that the current method of how the Mini Cart block loads the translations is not correct. It seems that all the blocks using the method register_chunk_translations.

@dinhtungdu noticed that the function append_script_and_deps_src is used to lazy load the dependencies of Mini Cart and payment method scripts. Are we sure that the line about the translation is necessary?

Another doubt that I have: what are the advantages to split the handling of the translations compared to the other scripts with the suffix before? (here the code)

Testing

Manual Testing

How to test the changes in this Pull Request:

Check out this branch

  1. Go to Settings -> General and change the language of the site to any language other than English (my suggestion is to use Dutch because all the translations are available).
  2. Enable a classic theme (for example Storefront)
  3. Now go to Appearance -> Widgets and add Mini Cart widget to any Widget Area.
  4. Go to any page containing that Widget Area and check that any error related to wp.i18n.
  5. Check that the Mini Cart is translated (check with an empty cart and with a filled cart). Please, be sure that you are using a language that has translations for the Mini Cart Block. My suggestion is to use the Dutch language.
  6. Enable a block theme (for example TT2).
  7. Now go to Appearance -> Editor and add the Mini Cart block in the header. Save.
  8. Check that the Mini Cart is translated (check with an empty cart and with a filled cart). Please, be sure that you are using a language that has translations for the Mini Cart Block. My suggestion is to use the Dutch language.

User Facing Testing

These are steps for user testing (where "user" is someone interacting with this change that is not editing any code).

  • Same as above

Changelog

Mini Cart block: Fix translations loading

Mini Cart block - fix translations handling
@gigitux gigitux added skip-changelog PRs that you don't want to appear in the changelog. block: mini-cart Issues related to the Mini-Cart block. labels Mar 29, 2022
@gigitux gigitux requested review from Aljullu and dinhtungdu March 29, 2022 16:08
@gigitux gigitux self-assigned this Mar 29, 2022
@rubikuserbot rubikuserbot requested a review from a team March 29, 2022 16:09
@github-actions
Copy link
Contributor

github-actions bot commented Mar 29, 2022

Size Change: +620 B (0%)

Total Size: 862 kB

Filename Size Change
build/all-products.js 33.9 kB +39 B (0%)
build/cart.js 43.6 kB +26 B (0%)
build/checkout.js 44.7 kB +24 B (0%)
build/featured-category.js 8.66 kB +53 B (+1%)
build/featured-product.js 9.78 kB +66 B (+1%)
build/handpicked-products.js 7.12 kB +29 B (0%)
build/product-best-sellers.js 7.4 kB +28 B (0%)
build/product-category.js 8.5 kB +25 B (0%)
build/product-new.js 7.69 kB +23 B (0%)
build/product-on-sale.js 8 kB +23 B (0%)
build/product-tag.js 7.83 kB +23 B (0%)
build/product-top-rated.js 7.92 kB +22 B (0%)
build/products-by-attribute.js 8.4 kB +22 B (0%)
build/reviews-by-category.js 11.5 kB +31 B (0%)
build/reviews-by-product.js 12.6 kB +44 B (0%)
build/single-product.js 10 kB +41 B (0%)
build/wc-blocks-style-rtl.css 22.3 kB +53 B (0%)
build/wc-blocks-style.css 22.3 kB +48 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 5.92 kB
build/active-filters.js 6.96 kB
build/all-products-frontend.js 18.2 kB
build/all-reviews.js 8.02 kB
build/attribute-filter-frontend.js 16.9 kB
build/attribute-filter.js 13.1 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.17 kB
build/cart-blocks/checkout-button-frontend.js 1.15 kB
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/express-payment-frontend.js 5.19 kB
build/cart-blocks/filled-cart-frontend.js 757 B
build/cart-blocks/items-frontend.js 300 B
build/cart-blocks/line-items-frontend.js 5.5 kB
build/cart-blocks/order-summary-frontend.js 8.87 kB
build/cart-blocks/totals-frontend.js 320 B
build/cart-frontend.js 45 kB
build/checkout-blocks/actions-frontend.js 1.41 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB
build/checkout-blocks/billing-address-frontend.js 891 B
build/checkout-blocks/contact-information-frontend.js 2.83 kB
build/checkout-blocks/express-payment-frontend.js 5.49 kB
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/order-note-frontend.js 1.07 kB
build/checkout-blocks/order-summary-frontend.js 11.3 kB
build/checkout-blocks/payment-frontend.js 7.77 kB
build/checkout-blocks/shipping-address-frontend.js 998 B
build/checkout-blocks/shipping-methods-frontend.js 4.74 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 325 B
build/checkout-frontend.js 47.2 kB
build/legacy-template.js 2.19 kB
build/mini-cart-component-frontend.js 16.5 kB
build/mini-cart-contents-block/empty-cart-frontend.js 329 B
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 5.32 kB
build/mini-cart-contents-block/footer-frontend.js 5.63 kB
build/mini-cart-contents-block/items-frontend.js 226 B
build/mini-cart-contents-block/products-table-frontend.js 5.36 kB
build/mini-cart-contents-block/shopping-button-frontend.js 287 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 23.3 kB
build/mini-cart-frontend.js 1.72 kB
build/mini-cart.js 6.56 kB
build/price-filter-frontend.js 12.1 kB
build/price-filter.js 8.49 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 224 B
build/product-add-to-cart--product-button--product-image--product-title.js 2.64 kB
build/product-add-to-cart-frontend.js 7 kB
build/product-add-to-cart.js 7.47 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 499 B
build/product-button-frontend.js 2.08 kB
build/product-button.js 2.29 kB
build/product-categories.js 3.17 kB
build/product-category-list-frontend.js 923 B
build/product-category-list.js 499 B
build/product-image-frontend.js 1.85 kB
build/product-image.js 1.08 kB
build/product-price-frontend.js 1.93 kB
build/product-price.js 1.51 kB
build/product-rating-frontend.js 1.15 kB
build/product-rating.js 731 B
build/product-sale-badge-frontend.js 1.09 kB
build/product-sale-badge.js 681 B
build/product-search.js 2.18 kB
build/product-sku-frontend.js 380 B
build/product-sku.js 382 B
build/product-stock-indicator-frontend.js 1.03 kB
build/product-stock-indicator.js 621 B
build/product-summary-frontend.js 1.33 kB
build/product-summary.js 917 B
build/product-tag-list-frontend.js 917 B
build/product-tag-list.js 494 B
build/product-title-frontend.js 1.28 kB
build/product-title.js 902 B
build/reviews-frontend.js 6.97 kB
build/single-product-frontend.js 21.6 kB
build/stock-filter-frontend.js 6.5 kB
build/stock-filter.js 6.57 kB
build/vendors--cart-blocks/line-items--cart-blocks/order-summary--checkout-blocks/order-summary--checkout--6efbf40e-frontend.js 5.26 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary--mini-cart-contents-block/products-table-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---4f3822fa-frontend.js 19.3 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 4.74 kB
build/vendors--mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 7.35 kB
build/vendors--product-add-to-cart-frontend.js 7.54 kB
build/wc-blocks-data.js 9.83 kB
build/wc-blocks-editor-style-rtl.css 4.87 kB
build/wc-blocks-editor-style.css 4.87 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-blocks-vendors.js 70.7 kB
build/wc-blocks.js 2.62 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.61 kB

compressed-size-action

@gigitux
Copy link
Contributor Author

gigitux commented Mar 29, 2022

Added as reviewers @dinhtungdu and @Aljullu that have participated in the discussion

@gigitux gigitux removed the skip-changelog PRs that you don't want to appear in the changelog. label Mar 29, 2022
Copy link
Member

@dinhtungdu dinhtungdu left a comment

Choose a reason for hiding this comment

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

Tested with deutsch and all strings are translated 🎉 . However, the translations are included in the server-rendered HTML with this approach. I think we should lazy load the translations instead. #6164 is my idea to lazy load the translations, can you please take a look?

'version' => $script->ver,
'before' => $wp_scripts->print_inline_script( $script->handle, 'before', false ),
'after' => $wp_scripts->print_inline_script( $script->handle, 'after', false ),
'translations' => $wp_scripts->print_translations( $script->handle, false ),
Copy link
Member

Choose a reason for hiding this comment

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

Looking closer, I notice that the $wp_scripts->print_translations() of enqueued scripts cause the JS errors; even we don't echo them, they are still printed.

Copy link
Contributor

Choose a reason for hiding this comment

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

Not sure if related, but I remember being confused by something similar and it was because we hook into pre_load_script_translations to print the translations, which runs no matter if you echo them or not:
https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/2d0270cc23121f79a5d3f1759a7e7df43f1323a4/woocommerce-gutenberg-products-block.php#L239

Copy link
Member

@dinhtungdu dinhtungdu Mar 30, 2022

Choose a reason for hiding this comment

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

You're the lifesaver @Aljullu! Thanks so much for the suggestion!

Copy link
Member

@dinhtungdu dinhtungdu left a comment

Choose a reason for hiding this comment

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

LGTM!

@github-actions github-actions bot added this to the 7.4.0 milestone Mar 30, 2022
Copy link
Contributor

@Aljullu Aljullu left a comment

Choose a reason for hiding this comment

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

Thanks for investigating this tricky issue, @gigitux and @dinhtungdu! I could verify this PR fixes the issue, and translations are loaded correctly, so I'm pre-approving. Besides that, I left a couple of questions of changes to help me understand the changes.

src/BlockTypes/MiniCart.php Outdated Show resolved Hide resolved
src/BlockTypes/MiniCart.php Outdated Show resolved Hide resolved
src/BlockTypes/MiniCart.php Outdated Show resolved Hide resolved
@dinhtungdu
Copy link
Member

@Aljullu I updated the PR to load translations close to the associated scripts. Please take another look! Thanks so much!

Copy link
Contributor

@Aljullu Aljullu left a comment

Choose a reason for hiding this comment

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

Thanks for the explanations @dinhtungdu!

🚢

@gigitux gigitux merged commit 21708a0 into trunk Apr 1, 2022
@gigitux gigitux deleted the fix/6153-mini-cart-i18n branch April 1, 2022 08:54
tjcafferkey pushed a commit that referenced this pull request Apr 5, 2022
* Mini Cart block - fix translations handling #6153

Mini Cart block - fix translations handling

* Mini Cart block - fix translations handling (#6164)

* loads translations for deps

Co-authored-by: Tung Du <[email protected]>

* address code review. load translations close to associated scripts

Co-authored-by: Tung Du <[email protected]>
@tarhi-saad tarhi-saad added the type: bug The issue/PR concerns a confirmed bug. label Apr 11, 2022
@nielslange nielslange added the focus: i18n The issue/PR is related to internationalization. label May 18, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: mini-cart Issues related to the Mini-Cart block. focus: i18n The issue/PR is related to internationalization. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

TypeError: wp.i18n is undefined in new Mini Cart Block
5 participants