woocommerce/plugins/woocommerce-blocks/docs/internal-developers/translations/translations-for-lazy-loaded-components.md

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

---

We're hiring! Come work with us!

🐞 Found a mistake, or have a suggestion? Leave feedback about this document here.