Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Document DOM events used in WC Blocks (https://github.com/woocommerce/woocommerce-blocks/pull/4876) 

* Document DOM events used in WC Blocks

* Update docs/extensibility/dom-events.md

Co-authored-by: Tung Du <dinhtungdu@gmail.com>

Co-authored-by: Tung Du <dinhtungdu@gmail.com>
This commit is contained in:
Albert Juhé Lluveras 2021-10-06 10:52:53 +02:00 committed by GitHub
parent c7e966fd28
commit f8bf71c164
4 changed files with 50 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
plugins/woocommerce-blocks/docs/extensibility/README.md
View File

@ -4,16 +4,17 @@ These documents are all dealing with extensibility in the various WooCommerce Bl
## Checkout Block
| Document | Description |
| --------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| [Payment Method Integration](./payment-method-integration.md) | Information about implementing payment methods. |
| [Filtering Payment Methods](./filtering-payment-methods.md) | Information about filtering the payment methods available in the Checkout Block. |
| [Checkout Flow and Events](./checkout-flow-and-events.md) | All about the checkout flow in the checkout block and the various emitted events that can be subscribed to. |
| [Available Filters](./available-filters.md) | All about the filters that you may use to change values of certain elements of WooCommerce Blocks. |
| [Exposing your data in the Store API.](./extend-rest-api-add-data.md) | Explains how you can add additional data to Store API endpoints. |
| [Available endpoints to extend with ExtendRestAPI.](./available-endpoints-to-extend.md) | A list of all available endpoints to extend. |
| [Adding an endpoint to ExtendRestAPI.](./extend-rest-api-new-endpoint.md) | A step by step process for contributors to expose a new endpoint via ExtendRestApi. |
| [Slots and Fills.](./slot-fills.md) | Explains Slot Fills and how to use them to render your own components in Cart and Checkout. |
| [Available Slot Fills.](./available-slot-fills.md) | Available Slots that you can use and their positions in Cart and Checkout. |
| [Available Formatters](./extend-rest-api-formatters.md) | Available `Formatters` to format data for use in the Store API. |
| [IntegrationInterface](./integration-interface.md) | The `IntegrationInterface` class and how to use it to register scripts, styles, and data with WooCommerce Blocks. |
| Document | Description |
| -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| [Payment Method Integration](./payment-method-integration.md) | Information about implementing payment methods. |
| [Filtering Payment Methods](./filtering-payment-methods.md) | Information about filtering the payment methods available in the Checkout Block. |
| [Checkout Flow and Events](./checkout-flow-and-events.md) | All about the checkout flow in the checkout block and the various emitted events that can be subscribed to. |
| [Available Filters](./available-filters.md) | All about the filters that you may use to change values of certain elements of WooCommerce Blocks. |
| [Exposing your data in the Store API](./extend-rest-api-add-data.md) | Explains how you can add additional data to Store API endpoints. |
| [Available endpoints to extend with ExtendRestAPI](./available-endpoints-to-extend.md) | A list of all available endpoints to extend. |
| [Adding an endpoint to ExtendRestAPI](./extend-rest-api-new-endpoint.md) | A step by step process for contributors to expose a new endpoint via ExtendRestApi. |
| [Slots and Fills](./slot-fills.md) | Explains Slot Fills and how to use them to render your own components in Cart and Checkout. |
| [Available Slot Fills](./available-slot-fills.md) | Available Slots that you can use and their positions in Cart and Checkout. |
| [Available Formatters](./extend-rest-api-formatters.md) | Available `Formatters` to format data for use in the Store API. |
| [IntegrationInterface](./integration-interface.md) | The `IntegrationInterface` class and how to use it to register scripts, styles, and data with WooCommerce Blocks. |
| [DOM Events](./dom-events.md) | A list of DOM Events used by some blocks to communicate between them and with other parts of WooCommerce. |

1
plugins/woocommerce-blocks/docs/extensibility/available-filters.md
View File

@ -1,4 +1,5 @@
# Filters
Like traditional WordPress filters (you register a callback with a specific filter, your callback accepts a number of
arguments, then it returns a value), we are introducing filters to the WooCommerce Blocks extension. These will function
very similarly to the traditional filters.

34
plugins/woocommerce-blocks/docs/extensibility/dom-events.md Normal file
View File

@ -0,0 +1,34 @@
# DOM Events
Some blocks need to react to certain events in order to display the most up to date data or behave in a certain way. That's the case of the Cart block, for example, that must listen to 'add to cart' events in order to update the cart contents; or the Mini Cart block, that gets opened every time a product is added to the cart.
## WooCommerce core events in WooCommerce Blocks
WooCommerce core uses jQuery events to trigger and listen to certain events, like when a product is added or removed from the cart. In WooCommerce Blocks, we moved away from using jQuery, but we still need to listen to those events. To achieve that, we have a utility named [`translatejQueryEventToNative()`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/3f7c3e517d7bf13008a22d0c2eb89434a9c35ae7/assets/js/base/utils/legacy-events.ts#L79-L106) that listens to those jQuery events, and every time one is triggered, it triggers an associated DOM native event (with the `wc-blocks_` prefix).
## WooCommerce Blocks events
### `wc-blocks_adding_to_cart`
This event is the equivalent to the jQuery event `adding_to_cart` triggered by WooCommerce core. It indicates that the process of adding a product to the cart was sent to the server, but there is still no indication on whether the product was successfully added or not.
_Example usage in WC Blocks:_ Mini Cart block listens to this event to append its dependencies.
### `wc-blocks_added_to_cart`
This event is the equivalent to the jQuery event `added_to_cart` triggered by WooCommerce core. It indicates that the process of adding a product to the cart has finished with success.
_Example usage in WC Blocks:_ Cart and Mini Cart blocks listen to this event to know if they need to update their contents.
#### `detail` parameters:
| Parameter | Type | Default value | Description |
|--------------------|---------|---------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `preserveCartData` | boolean | `false` | Whether Cart data in the store should be preserved. By default, it's `false` so any `wc-blocks_added_to_cart` event will invalidate cart data and blocks listening to it will refetch cart data again. However, if the code triggering the event already updates the store (ie: All Products block), it can set `preserveCartData: true` to avoid the other blocks refetching the data again. |
### `wc-blocks_removed_from_cart`
This event is the equivalent to the jQuery event `removed_from_cart` triggered by WooCommerce core. It indicates that a product has been removed from the cart.
_Example usage in WC Blocks:_ Cart and Mini Cart blocks listen to this event to know if they need to update their contents.

1
plugins/woocommerce-blocks/docs/extensibility/extend-rest-api-formatters.md
View File

@ -1,4 +1,5 @@
# Formatters
As part of ExtendRestAPI, we introduced `Formatters`, these are utility classes that allow you to format values to
so that they are compatible with the StoreAPI, values such as money, currency, or HTML.