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

Add support for decimal and thousand separators in the formatPrice function #5188

Merged
merged 2 commits into from
Nov 19, 2021

Conversation

mikejolley
Copy link
Member

@mikejolley mikejolley commented Nov 18, 2021

formatPrice ignores custom decimal and thousand symbols, instead defaulting to . for decimals.

This PR fixes this by formatting the values with the correct (based on the provided currency) symbols from settings.

Fixes #5018

Screenshots

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.

Manual Testing

How to test the changes in this Pull Request:

  1. Go to WooCommerce > Settings.
  2. Change decimal separator to ,
  3. Change thousand separator to .
  4. Save changes.
  5. Add mini cart block to a page
  6. Add something to your cart and view mini cart block.
  7. Hover the button - the value should not change and should show correct decimal/thousand symbols
  8. Re-rest with a cart qty > 1000 and ensure a thousand separator is used in the price (this does not affect non-prices)

User Facing Testing

Same as above.

Changelog

Add support for decimal and thousand separators in the formatPrice function

@mikejolley mikejolley self-assigned this Nov 18, 2021
@rubikuserbot rubikuserbot requested review from a team and ralucaStan and removed request for a team November 18, 2021 16:58
@mikejolley mikejolley added status: needs review block: cart Issues related to the cart block. block: mini-cart Issues related to the Mini-Cart block. labels Nov 18, 2021
@mikejolley mikejolley requested a review from Aljullu November 18, 2021 16:58
@github-actions
Copy link
Contributor

github-actions bot commented Nov 18, 2021

Size Change: +151 B (0%)

Total Size: 1.11 MB

Filename Size Change
build/blocks-checkout.js 21.3 kB +2 B (0%)
build/checkout.js 53.9 kB +120 B (0%)
build/price-format.js 1.4 kB +28 B (+2%)
build/wc-blocks-registry.js 3.71 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.18 kB
build/active-filters.js 8 kB
build/all-products-frontend.js 23.4 kB
build/all-products.js 38.3 kB
build/all-reviews.js 9.56 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 3.19 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.81 kB
build/atomic-block-components/add-to-cart-frontend.js 8.34 kB
build/atomic-block-components/add-to-cart.js 7.85 kB
build/atomic-block-components/button-frontend.js 1.74 kB
build/atomic-block-components/button.js 873 B
build/atomic-block-components/category-list-frontend.js 466 B
build/atomic-block-components/category-list.js 469 B
build/atomic-block-components/image-frontend.js 1.71 kB
build/atomic-block-components/image.js 1.36 kB
build/atomic-block-components/price-frontend.js 2.13 kB
build/atomic-block-components/price.js 2.1 kB
build/atomic-block-components/rating-frontend.js 562 B
build/atomic-block-components/rating.js 566 B
build/atomic-block-components/sale-badge-frontend.js 861 B
build/atomic-block-components/sale-badge.js 868 B
build/atomic-block-components/sku-frontend.js 390 B
build/atomic-block-components/sku.js 393 B
build/atomic-block-components/stock-indicator-frontend.js 611 B
build/atomic-block-components/stock-indicator.js 610 B
build/atomic-block-components/summary-frontend.js 907 B
build/atomic-block-components/summary.js 912 B
build/atomic-block-components/tag-list-frontend.js 468 B
build/atomic-block-components/tag-list.js 471 B
build/atomic-block-components/title-frontend.js 1.47 kB
build/atomic-block-components/title.js 1.48 kB
build/attribute-filter-frontend.js 18.1 kB
build/attribute-filter.js 12.1 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.39 kB
build/cart-blocks/checkout-button-frontend.js 1.21 kB
build/cart-blocks/empty-cart-frontend.js 348 B
build/cart-blocks/express-payment--checkout-blocks/express-payment--checkout-blocks/payment-frontend.js 4.73 kB
build/cart-blocks/express-payment-frontend.js 1.59 kB
build/cart-blocks/filled-cart-frontend.js 805 B
build/cart-blocks/items-frontend.js 302 B
build/cart-blocks/line-items-frontend.js 5.87 kB
build/cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.69 kB
build/cart-blocks/order-summary-frontend.js 7.4 kB
build/cart-blocks/totals-frontend.js 324 B
build/cart-frontend.js 52.6 kB
build/cart.js 50.5 kB
build/checkout-blocks/actions-frontend.js 1.48 kB
build/checkout-blocks/billing-address-frontend.js 2.64 kB
build/checkout-blocks/contact-information-frontend.js 3.62 kB
build/checkout-blocks/express-payment-frontend.js 1.93 kB
build/checkout-blocks/fields-frontend.js 348 B
build/checkout-blocks/order-note-frontend.js 1.25 kB
build/checkout-blocks/order-summary-frontend.js 12.9 kB
build/checkout-blocks/payment-frontend.js 4.28 kB
build/checkout-blocks/shipping-address-frontend.js 2.72 kB
build/checkout-blocks/shipping-methods-frontend.js 5.54 kB
build/checkout-blocks/terms-frontend.js 1.29 kB
build/checkout-blocks/totals-frontend.js 329 B
build/checkout-frontend.js 54.8 kB
build/featured-category.js 7.74 kB
build/featured-product.js 9.43 kB
build/handpicked-products.js 6.27 kB
build/legacy-template.js 2.05 kB
build/mini-cart-component-frontend.js 44.6 kB
build/mini-cart-frontend.js 2.34 kB
build/mini-cart.js 6.11 kB
build/price-filter-frontend.js 14.2 kB
build/price-filter.js 9.65 kB
build/product-best-sellers.js 6.62 kB
build/product-categories.js 3.38 kB
build/product-category.js 7.49 kB
build/product-new.js 6.77 kB
build/product-on-sale.js 7.11 kB
build/product-search.js 2.71 kB
build/product-tag.js 6.6 kB
build/product-top-rated.js 6.74 kB
build/products-by-attribute.js 7.71 kB
build/reviews-by-category.js 11.5 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 8.97 kB
build/single-product-frontend.js 26.9 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 8.62 kB
build/stock-filter.js 7.81 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 16.1 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 4.77 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js 5.71 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 5.03 kB
build/wc-blocks-data.js 11.3 kB
build/wc-blocks-editor-style-rtl.css 15.7 kB
build/wc-blocks-editor-style.css 15.7 kB
build/wc-blocks-google-analytics.js 1.98 kB
build/wc-blocks-middleware.js 1.19 kB
build/wc-blocks-shared-context.js 1.54 kB
build/wc-blocks-shared-hocs.js 1.92 kB
build/wc-blocks-style-rtl.css 21.1 kB
build/wc-blocks-style.css 21.1 kB
build/wc-blocks-vendors-style-rtl.css 1.37 kB
build/wc-blocks-vendors-style.css 1.37 kB
build/wc-blocks-vendors.js 255 kB
build/wc-blocks.js 3.49 kB
build/wc-payment-method-bacs.js 806 B
build/wc-payment-method-cheque.js 806 B
build/wc-payment-method-cod.js 898 B
build/wc-payment-method-paypal.js 839 B
build/wc-payment-method-stripe.js 12.2 kB
build/wc-settings.js 2.91 kB

compressed-size-action

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.

This is testing well for the Cart price, but doesn't seem to add a thousand separator to the quantity badge, did I understand the testing steps wrong?

Mini Cart block showing no thousands separator in the quantity badge

Besides that, I think the third testing step needs to be updated:

  1. Change decimal separator to ,
  2. Change thousand separator to .

packages/prices/utils/price.ts Outdated Show resolved Hide resolved
@mikejolley
Copy link
Member Author

@Aljullu Clarified testing steps. This only change how prices are shown, not qty.

Co-authored-by: Albert Juhé Lluveras <[email protected]>
@github-actions github-actions bot added this to the 6.4.0 milestone Nov 19, 2021
@mikejolley mikejolley merged commit d952b9f into trunk Nov 19, 2021
@mikejolley mikejolley deleted the fix/format-price-decimals branch November 19, 2021 12:32
@Aljullu Aljullu added the type: bug The issue/PR concerns a confirmed bug. label Nov 22, 2021
nielslange added a commit that referenced this pull request Nov 23, 2021
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 14, 2021
…function (woocommerce#5188)

* Format with decimal and thousands, with tests

* Update packages/prices/utils/price.ts

Co-authored-by: Albert Juhé Lluveras <[email protected]>

Co-authored-by: Albert Juhé Lluveras <[email protected]>
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 16, 2021
…function (woocommerce#5188)

* Format with decimal and thousands, with tests

* Update packages/prices/utils/price.ts

Co-authored-by: Albert Juhé Lluveras <[email protected]>

Co-authored-by: Albert Juhé Lluveras <[email protected]>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: cart Issues related to the cart block. block: mini-cart Issues related to the Mini-Cart block. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

formatPrice doesn't work with custom decimal separator
2 participants