woocommerce/plugins/woocommerce-blocks/docs/internal-developers/translations/translations-for-lazy-loade...

152 lines
5.4 KiB
Markdown

# Translations for lazy-loaded components
The Mini Cart block as well as inner blocks of the Cart and the Checkout blocks are lazy-loaded. To lazy-load them, the translation chunks needs to be registered. This takes place in `/src/BlockTypes/AbstractBlock.php`:
```php
/**
* Injects Chunk Translations into the page so translations work for lazy loaded components.
*
* The chunk names are defined when creating lazy loaded components using webpackChunkName.
*
* @param string[] $chunks Array of chunk names.
*/
protected function register_chunk_translations( $chunks ) {
foreach ( $chunks as $chunk ) {
$handle = 'wc-blocks-' . $chunk . '-chunk';
$this->asset_api->register_script( $handle, $this->asset_api->get_block_asset_build_path( $chunk ), [], true );
wp_add_inline_script(
$this->get_block_type_script( 'handle' ),
wp_scripts()->print_translations( $handle, false ),
'before'
);
wp_deregister_script( $handle );
}
}
```
## Lazy-loaded translations of the Cart block
The translations of the inner blocks of the Cart block are loaded in this function in `src/BlockTypes/Cart.php`:
```php
/**
* Register script and style assets for the block type before it is registered.
*
* This registers the scripts; it does not enqueue them.
*/
protected function register_block_type_assets() {
parent::register_block_type_assets();
$chunks = $this->get_chunks_paths( $this->chunks_folder );
$vendor_chunks = $this->get_chunks_paths( 'vendors--cart-blocks' );
$this->register_chunk_translations( array_merge( $chunks, $vendor_chunks ) );
}
```
## Lazy-loaded translations of the Checkout block
The translations of the inner blocks of the Cart block are loaded in this function in `src/BlockTypes/Checkout.php`:
```php
/**
* Register script and style assets for the block type before it is registered.
*
* This registers the scripts; it does not enqueue them.
*/
protected function register_block_type_assets() {
parent::register_block_type_assets();
$chunks = $this->get_chunks_paths( $this->chunks_folder );
$vendor_chunks = $this->get_chunks_paths( 'vendors--cart-blocks' );
$shared_chunks = [ 'cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend' ];
$this->register_chunk_translations( array_merge( $chunks, $vendor_chunks, $shared_chunks ) );
}
```
## Lazy-loaded translations of the Mini-Cart block
The translations of the inner blocks of the Mini-Cart block are loaded in this function in `src/BlockTypes/MiniCart.php`:
```php
/**
* Prepare translations for inner blocks and dependencies.
*/
protected function get_inner_blocks_translations() {
$wp_scripts = wp_scripts();
$translations = array();
$chunks = $this->get_chunks_paths( $this->chunks_folder );
$vendor_chunks = $this->get_chunks_paths( 'vendors--mini-cart-contents-block' );
$shared_chunks = [ 'cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend' ];
foreach ( array_merge( $chunks, $vendor_chunks, $shared_chunks ) as $chunk ) {
$handle = 'wc-blocks-' . $chunk . '-chunk';
$this->asset_api->register_script( $handle, $this->asset_api->get_block_asset_build_path( $chunk ), [], true );
$translations[] = $wp_scripts->print_translations( $handle, false );
wp_deregister_script( $handle );
}
$translations = array_filter( $translations );
return implode( '', $translations );
}
```
## Register lazy-loading components
The functions above show how the chunks are lazy-loaded. These chunks are currently defined in `assets/js/blocks/checkout/inner-blocks/register-components.ts` and look like this:
```js
[...]
registerCheckoutBlock( {
metadata: metadata.CHECKOUT_CONTACT_INFORMATION,
component: lazy( () =>
import(
/* webpackChunkName: "checkout-blocks/contact-information" */ './checkout-contact-information-block/frontend'
)
),
} );
registerCheckoutBlock( {
metadata: metadata.CHECKOUT_SHIPPING_ADDRESS,
component: lazy( () =>
import(
/* webpackChunkName: "checkout-blocks/shipping-address" */ './checkout-shipping-address-block/frontend'
)
),
} );
registerCheckoutBlock( {
metadata: metadata.CHECKOUT_BILLING_ADDRESS,
component: lazy( () =>
import(
/* webpackChunkName: "checkout-blocks/billing-address" */ './checkout-billing-address-block/frontend'
)
),
} );
[...]
```
Please note that the snippet above serves for demo purposes and only lists a few of the definitions.
## Related PRs
Lazy-loading translations within the WooCommerce Blocks plugin changed over time. The following PRs allow to dive deeper into the topic:
- [Refactor webpack splitting to fix missing translation](https://github.com/woocommerce/woocommerce-blocks/pull/6420)
- [Lazy load missing translation files](https://github.com/woocommerce/woocommerce-blocks/pull/5112)
- [Extract function from lazyLoadScript to simplify code](https://github.com/woocommerce/woocommerce-blocks/pull/4631)
- [Lazy Loading Atomic Components](https://github.com/woocommerce/woocommerce-blocks/pull/2777)
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.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/internal-developers/translations/translations-for-lazy-loaded-components.md)
<!-- /FEEDBACK -->