woocommerce/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/rest-api/extend-rest-api-formatters.md

200 lines
9.7 KiB
Markdown
Raw Normal View History

# Formatters <!-- omit in toc -->
## Table of Contents <!-- omit in toc -->
- [Why are formatters useful?](#why-are-formatters-useful)
- [How to use formatters](#how-to-use-formatters)
- [Real world example](#real-world-example)
Add Cart/Checkout/Order-Received Templates (https://github.com/woocommerce/woocommerce-blocks/pull/9301) * WIP: dirty attempt to dry run Cart & Checkout templates * Added Cart and Checkout to the template hierarchies * Merge branch 'trunk' into poc/cart_and_checkout_fse_templates * Updated cart & Checkout templates * Order Received FSE template (https://github.com/woocommerce/woocommerce-blocks/pull/8937) * Order Received template bootstrap * typo * WIP: new block * add logic here * Order received classic template * reverted constants.ts * Added the post title (buggy) * Corrected page title * Updated constants.ts * Fixed template typo * removed placeholder for order received block * add order-received template description * updated placeholder description * Formatting fixes * Template description. * replaced hardcoded string with OrderReceivedTemplate::SLUG --------- Co-authored-by: Luigi <gigitux@gmail.com> * Code formatting (https://github.com/woocommerce/woocommerce-blocks/pull/8350) * Code formatting * page_template_hierarchy priority to 1 (https://github.com/woocommerce/woocommerce-blocks/pull/9323) Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> * Migrate Cart and Checkout Pages to the Template Editor when using a FSE theme (https://github.com/woocommerce/woocommerce-blocks/pull/9339) * Introduce woocommerce_blocks_template_content hook * Migrate cart and checkout page content to the template editor * Add redirection from edit page to edit template --------- Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> * Removed header and footer from checkout template. (https://github.com/woocommerce/woocommerce-blocks/pull/9378) * Removed header and footer from checkout template. * Removed header and footer from checkout template migration * Permalink solution for the checkout endpoint/template (https://github.com/woocommerce/woocommerce-blocks/pull/9406) * Checkout endpoint work * Move setting field to util * Include link to edit the template * Remove todo * Refactor checkout templates to share logic (https://github.com/woocommerce/woocommerce-blocks/pull/9411) * Sync endpoints with pages (https://github.com/woocommerce/woocommerce-blocks/pull/9426) * Switch to page syncing * Update settings descriptions --------- Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> * Migrate pages to templates once (https://github.com/woocommerce/woocommerce-blocks/pull/9488) * Migrate content on init, once * Skip migration if page does not exist * Put back HTML for header and footer parts * Fix page redirect due to wrong ID * fix loading template part * Removed unnecessary var * update cart and checkout html templates --------- Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> * Include a notice to redirect user to template editor (https://github.com/woocommerce/woocommerce-blocks/pull/9508) * Template Placeholder Design for the Order Received Template (https://github.com/woocommerce/woocommerce-blocks/pull/9602) * Load frontend styles in editor iframe * Update placeholder to include skeleton and updated icons * Update classic template configs * 1px border for .wp-block-woocommerce-classic-template__placeholder-copy * Show copy on focus * Sample data --------- Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> * Add simplified header on checkout template (https://github.com/woocommerce/woocommerce-blocks/pull/9607) * Added simplified header on checkout template * Moved simplified header to template part * updated constants.ts * added template part to checkout.html * Add missing translation * frontpage_template_hierarchy no longer needed * Allow plugin based template parts (https://github.com/woocommerce/woocommerce-blocks/pull/9667) * Merge branch 'trunk' into add/9288_cart-checkout-order-received_fse_templates * Synced templates on blockified folder * Add blockified order-received.html * removed WooCommerce prefix * Refactor/rebrand order received template to order confirmation (https://github.com/woocommerce/woocommerce-blocks/pull/9734) * rebrand order received to order confirmation * updated descriptions for templates * updated descriptions for order confirmation placeholder * Resolve merge conflict * Resolve merge conflicts * Resolve more merge conflicts after rebase * Fix formatting * Use patterns for localisation (https://github.com/woocommerce/woocommerce-blocks/pull/9883) * e2e tests for cart and checkout templates (https://github.com/woocommerce/woocommerce-blocks/pull/9939) * Merge branch 'trunk' into poc/cart_and_checkout_fse_templates * Merge branch 'trunk' into add/9288_cart-checkout-order-received_fse_templates * Resolve merge conflicts * Add e2e for permalink settings * Test that templates exist * Add test to check that templates can be edited * Add tests to confirm templates can be edited * Ensure cart has contents before running tests on frontend views * Commend out problem test * Make sure search has multiple results * Remove useThrottle - bad rebase * Revert changes to docs after rebase * Revert function call for noReviewsPlaceholder * Bad rebase * Reverts * Remove revertTemplate * Spacing * Wait for networkidle after navigation * Always wait for network * Use button roles in site editor * More specific button locator * Update option comparison * Fix template content * Disable failing tests * Disable failing classic template tests * Use enterEditMode * More enterEditMode usage * enterEditMode * Use test.skip * More robust selectors * Alt iframe selector --------- Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> * Skip flakey test --------- Co-authored-by: Luigi <gigitux@gmail.com> Co-authored-by: Mike Jolley <mike.jolley@me.com>
2023-06-29 13:41:22 +00:00
- [MoneyFormatter](#moneyformatter)
- [Arguments](#arguments)
- [Example use and returned value](#example-use-and-returned-value)
- [CurrencyFormatter](#currencyformatter)
- [Arguments](#arguments-1)
- [Example use and returned value](#example-use-and-returned-value-1)
- [HtmlFormatter](#htmlformatter)
- [Arguments](#arguments-2)
- [Example use and returned value](#example-use-and-returned-value-2)
`Formatters` are utility classes that allow you to format values to so that they are compatible with the StoreAPI. Default formatters handle values such as monetary amounts, currency information, or HTML.
It is recommended that you use these formatters when you are extending the StoreAPI.
## Why are formatters useful?
Using the formatter utilities when returning certain types of data will ensure that your custom data is consistent and compatible with other endpoints. They also take care of any store specific settings that may affect the formatting of the data, such as currency settings.
Store API includes formatters for:
- [Money](#moneyformatter)
- [Currency](#currencyformatter)
- [HTML](#htmlformatter)
## How to use formatters
To get a formatter, you can use the `get_formatter` method of the `ExtendSchema` class. This method accepts a string, which is the name of the formatter you want to use.
```php
get_formatter('money'); // For the MoneyFormatter
get_formatter('html'); // For the HtmlFormatter
get_formatter('currency'); // CurrencyFormatter
```
This returns a `FormatterInterface` which has the `format` method. The `format` method signature is:
```php
format( $value, array $options = [] );
```
Only `MoneyFormatter`'s behavior can be controlled by the `$options` parameter. This parameter is optional.
### Real world example
Let's say we're going to be returning some extra price data via the API. We want to return the price in cents, and also the currency data for the store. We can use the `MoneyFormatter` and `CurrencyFormatter` to do this.
First we need to ensure we can access the formatter classes. We can do this by using the `use` keyword:
```php
use Automattic\WooCommerce\StoreApi\StoreApi;
use Automattic\WooCommerce\StoreApi\Utilities\ExtendSchema;
$extend = StoreApi::container()->get( ExtendSchema::class );
$my_custom_price = $extend->get_formatter( 'money' )->format( '10.00', [
'rounding_mode' => PHP_ROUND_HALF_DOWN,
'decimals' => 2
] );
$price_response = $extend->get_formatter( 'currency' )->format( [
'price' => $my_custom_price,
] );
```
The above code would result in `$price_response` being set to:
```text
[
'price' => '1000'
'currency_code' => 'GBP'
'currency_symbol' => '£'
'currency_minor_unit' => 2
'currency_decimal_separator' => '.'
'currency_thousand_separator' => ','
'currency_prefix' => '£'
'currency_suffix' => ''
]
```
## MoneyFormatter
The [`MoneyFormatter`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/src/StoreApi/Formatters/MoneyFormatter.php) class can be used to format a monetary value using the store settings. The store settings may be overridden by passing options to this formatter's `format` method.
Values are returned in cents to avoid floating point rounding errors, so when using this formatter you'll most likely also be returning the currency data using the [`CurrencyFormatter`](#currencyformatter) alongside it. This will allow the consumer of the API to display the value in the intended format.
### Arguments
| Argument | Type | Description |
| --------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `$value` | `number` | The number you want to format into a monetary value |
| `$options` | `array` | Should contain two keys, `decimals` which should be an `integer`, |
| `$options['decimals']` | `number` | Used to control how many decimal places should be displayed in the monetary value. Defaults to the store setting. |
| `$options['rounding_mode']` | `number` | Used to determine how to round the monetary value. This should be one of the PHP rounding modes described in the [PHP round() documentation](https://www.php.net/manual/en/function.round.php). Defaults to `PHP_ROUND_HALF_UP`. |
### Example use and returned value
```php
get_formatter( 'money' )->format( 10.443, [
'rounding_mode' => PHP_ROUND_HALF_DOWN,
'decimals' => 2
] );
```
returns `1044`
## CurrencyFormatter
This formatter takes an array of prices, and returns the same array but with currency data appended to it. The currency data added is:
| Key | Type | Description |
| ----------------------------- | -------- | ------------------------------------------------------------------------------------------------- |
| `currency_code` | `string` | The string representation of the currency, e.g. GPB or USD |
| `currency_symbol` | `string` | The symbol of the currency, e.g. &pound; or \$ |
| `currency_minor_unit` | `number` | How many decimal places will be shown in the currency |
| `currency_decimal_separator` | `string` | The string used to separate the whole value and the decimal value in the currency. |
| `currency_thousand_separator` | `string` | The string used to separate thousands in the currency, for example: &pound;10,000 or &euro;10.000 |
| `currency_prefix` | `string` | A string that should appear before the currency value. |
| `currency_suffix` | `string` | A string that should appear after the currency value. |
This data can then be used by the client/consumer to format prices correctly according to store settings. Important: the array of prices passed to this formatted should already be in monetary format so you should use the [`MoneyFormatter`](#moneyformatter) first.
### Arguments
| Argument | Type | Description |
| -------- | ---------- | ---------------------------------------------------------------------------- |
| `$value` | `number[]` | An array of prices that you want to merge with the store's currency settings |
### Example use and returned value
```php
get_formatter( 'currency' )->format( [
'price' => 1800,
'regular_price' => 1800,
'sale_price' => 1800,
] );
```
returns
```text
'price' => '1800'
'regular_price' => '1800'
'sale_price' => '1800'
'price_range' => null
'currency_code' => 'GBP'
'currency_symbol' => '£'
'currency_minor_unit' => 2
'currency_decimal_separator' => '.'
'currency_thousand_separator' => ','
'currency_prefix' => '£'
'currency_suffix' => ''
```
## HtmlFormatter
This formatter will take an HTML value, run it through: [`wptexturize`](https://developer.wordpress.org/reference/functions/wptexturize/),
[`convert_chars`](https://developer.wordpress.org/reference/functions/convert_chars/),
[`trim`](https://www.php.net/manual/en/function.trim.php), and [`wp_kses_post`](https://developer.wordpress.org/reference/functions/wp_kses_post/)
before returning it. The purpose of this formatter is to make HTML "safe" (in terms of correctly formatted characters).
`wp_kses_post` will ensure only HTML tags allowed in the context of a `post` are present in the string.
### Arguments
| Argument | Type | Description |
| -------- | -------- | ----------------------------------------------- |
| `$value` | `string` | The string you want to format into "safe" HTML. |
### Example use and returned value
```php
get_formatter( 'html' )->format(
"<script>alert('bad script!')</script> This \"coffee\" is <strong>very strong</strong>."
);
```
returns:
```text
alert('bad script!') This &#8220;coffee&#8221; is <strong>very strong</strong>.
```
This formatter should be used when returning HTML from the StoreAPI regardless of whether the HTML is user generated or not. This will ensure the consumer/client can display the HTML safely and without encoding issues.
<!-- FEEDBACK -->
---
[Docs] Update links from WooCommerce.com to Woo.com for the Woo Blocks documentation (#43055) * Update woocommerce.com URLs in documentation and code files * Add changelog * Fix github repository link in extend-rest-api-add-custom-fields.md Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> * Add github reporter (#42974) * Add github reporter * Add changelog --------- Co-authored-by: Jon Lane <jon.lane@automattic.com> * Fix product task redirect to support grouped and external products (#43051) * Rearrange product redirection logic to better accept grouped and external produc types * Add changelog * Modify feedback modal actions (#43005) * Adapt feedback modal actions * Add changelogs * Modify comments * Fix tests * Fix test * Update class-wc-gateway-bacs.php (#43054) * Update class-wc-gateway-bacs.php Fix typo in textdomain * Add changefile(s) from automation for the following project(s): woocommerce --------- Co-authored-by: github-actions <github-actions@github.com> * [Product Block Editor]: Add `Linked product` tab (#43009) * add linked-products to group IDs * add Linked Products tab * tweak hideConditions condition * changelog * fix typo in doc comment * Introduce a product type selection within the new experience (#41823) * Create a relation between the product type and the product block template * Add 'patterns' to name the kind of products that can be created for a specific template * Resolve template using its id as a template query param * Rename ProductEditPattern to ProductTemplate * Rename get_patterns hook to woocommerce_product_editor_get_product_templates * Return the list of templates to the client * Set layout template events as array * Register the layout template based on the product template or the post type in case of product variations * Registering non supported product types * Create and register the woocommerce/product-details-section-description block * Add the product type to the section description * Create product type selector * Fix menu item style * Highlight selected menu item * Set the selected product template * Set product template title to lowercase in the content description * Rename blocks by blockTemplates under the AbstractBlockTemplate class * Rename to woocommerce_product_editor_product_templates filter * Remove product_template_ prefix from the supported_product_types map * Rename get_formatted to to_JSON and convert the props to client side like * Refactor get_product_templates * Fix icon resolution * Add a confirmation modal for unsupported product templates * Add changelog files * Remove product types using for testing * Fix redirection when changing to a non supported product template * Set the change button state to busy when it is saving the product * Fix php linter errors * Fix rebase conflict * Move ProductTemplate to Automattic\WooCommerce\Admin\Features\ProductBlockEditor namespace * Add the to_json definition to the BlockTemplateInterface * Create default product template by custom product type if it does not have a template associated yet * Fix some comments and product template creation validation * Add support to load the product template icon from an external resource * Fix php linter * Fix the changelog description * [Experimental] Interactivity Dropdown multi-select mode, ratings filter and introduce each directive (#42981) --------- Co-authored-by: David Arenas <david.arenas@automattic.com> * Introduce the transient files engine (#42877) Co-authored-by: Corey McKrill <916023+coreymckrill@users.noreply.github.com> * Change marketplace install API request to POST instead of GET (#43033) * Change marketplace install API to using POST instead of GET * Fix linting error * Add changefile(s) from automation for the following project(s): woocommerce --------- Co-authored-by: github-actions <github-actions@github.com> * Prep trunk for 8.6 cycle (#43021) Prep trunk for 8.6 cycle with version bump to 8.6.0-dev Co-authored-by: WooCommerce Bot <no-reply@woo.com> * Add Playwright tests for All Reviews, Reviews by Product and Reviews by Category blocks (#42903) * Remove Reviews blocks Puppeteer tests * Minor code cleanup * Typos * Create publishAndVisitPost() editor util * Fix subcategories when importing products in Playwright and add reviews * Add Reviews blocks tests in Playwright * More typos * Add changefile(s) from automation for the following project(s): woocommerce-blocks * Create a 'reviews' object in data.ts so we can store reviews data in one single place * Update test so instead of creating a new post in each test, we go to the already-created post * Add source comments to reviews data to match it with the script --------- Co-authored-by: github-actions <github-actions@github.com> * Release: Remove 8.5 change files (#43022) Delete changelog files from 8.5 release Co-authored-by: WooCommerce Bot <no-reply@woo.com> Co-authored-by: Alex López <alex.lopez@automattic.com> * Delete changelog files based on PR 43033 (#43079) Delete changelog files for 43033 Co-authored-by: WooCommerce Bot <no-reply@woo.com> * Delete changelog files based on PR 43051 (#43081) Delete changelog files for 43051 Co-authored-by: WooCommerce Bot <no-reply@woo.com> * Interactive Price Filter: use `context` instead of `state` (#42980) * feat: use context instead of state * fix: temporary move the context to inner element for diffing to work * fix: update context before navigation for optimistic UI * Load google analytics gtag script asynchronously in WooCommerce Blocks (#43040) Co-authored-by: github-actions <github-actions@github.com> * set WOOCOMMERCE_BLOCKS_PHASE to 1 for the production build (#43074) * set WOOCOMMERCE_BLOCKS_PHASE to 1 for the production build * Add changefile(s) from automation for the following project(s): woocommerce --------- Co-authored-by: github-actions <github-actions@github.com> * Revert "Fix schedule sales error" (#43094) Revert "Fix schedule sales error (#42700)" This reverts commit 9b800aa179b25bafebfed0da8c00eec892272cb4. * [Product Block Editor]: add Linked product sections. First approach. (#43013) * add Linked products, Upsell section * changelog * add Cross-lens section * add links to the Upsell sections * changelog * fix lint issues * fix lint issus * fix linting issue :-| * check whether the linked product group is defined * [Product Block Editor]: introduce ShoppingBags component (#43042) * add ShoppingBags component * Add ShoppingBag story * changelog * Fix: Collection data being leaked between Collection Filters blocks (#43044) * fix: CYS - change heading color (#43076) * fix: CYS - change heading color * Add changefile(s) from automation for the following project(s): woocommerce --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com> * Delete changelog files based on PR 43074 (#43118) Delete changelog files for 43074 Co-authored-by: WooCommerce Bot <no-reply@woo.com> * [Product Block Editor]: fix feature flag to hide the Linked products (#43119) * fix flag to hide/show product editor * changelog * Add changelog --------- Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> Co-authored-by: Jonathan Lane <lanej0@users.noreply.github.com> Co-authored-by: Jon Lane <jon.lane@automattic.com> Co-authored-by: louwie17 <lourensschep@gmail.com> Co-authored-by: Fernando Marichal <fernando.marichal@automattic.com> Co-authored-by: Marc Guay <marc.guay@gmail.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Damián Suárez <rdsuarez@gmail.com> Co-authored-by: Maikel David Pérez Gómez <maikel.perez@automattic.com> Co-authored-by: Sam Seay <samueljseay@gmail.com> Co-authored-by: Néstor Soriano <konamiman@konamiman.com> Co-authored-by: Corey McKrill <916023+coreymckrill@users.noreply.github.com> Co-authored-by: Kyle Nel <22053773+kdevnel@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: WooCommerce Bot <no-reply@woo.com> Co-authored-by: Alex López <alex.lopez@automattic.com> Co-authored-by: Tung Du <dinhtungdu@gmail.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Luigi Teschio <gigitux@gmail.com> Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
2023-12-29 15:28:11 +00:00
[We're hiring!](https://woo.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-blocks/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/third-party-developers/extensibility/rest-api/extend-rest-api-formatters.md)
<!-- /FEEDBACK -->