translations-for-lazy-loaded-components.md

📣 Announcement: New documentation location

The documentation for WooCommerce Blocks has moved to the WooCommerce monorepo.

Please refer to the documentation in the new location as the files in this repository will no longer be updated and the repository will be archived.

---

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:

/**
 * 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:

/**
 * 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:

/**
 * 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:

/**
 * 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:

[...]

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
• Lazy load missing translation files
• Extract function from lazyLoadScript to simplify code
• Lazy Loading Atomic Components