Automattic\WooCommerce\Blocks\BlockTypes

ProductCollection::enable_client_side_navigation() │ private │ WC 1.0

Attach all the Interactivity API directives responsible for client-side navigation.

Method of the class: ProductCollection{}

No Hooks.

Return

String. Updated HTML content.

Usage

// private - for code of main (parent) class only
$result = $this->enable_client_side_navigation( $block_content );

$block_content(string) (required)

The HTML content of the block.

ProductCollection::enable_client_side_navigation() ProductCollection::enable client side navigation code ^{WC 9.4.2}

private function enable_client_side_navigation( $block_content ) {
	$p = new \WP_HTML_Tag_Processor( $block_content );

	// Add `data-wc-navigation-id to the product collection block.
	if ( $this->is_next_tag_product_collection( $p ) ) {
		$p->set_attribute(
			'data-wc-navigation-id',
			'wc-product-collection-' . $this->parsed_block['attrs']['queryId']
		);
		$current_context = json_decode( $p->get_attribute( 'data-wc-context' ) ?? '{}', true );
		$p->set_attribute(
			'data-wc-context',
			wp_json_encode(
				array_merge(
					$current_context,
					array(
						// The message to be announced by the screen reader when the page is loading or loaded.
						'accessibilityLoadingMessage'  => __( 'Loading page, please wait.', 'woocommerce' ),
						'accessibilityLoadedMessage'   => __( 'Page Loaded.', 'woocommerce' ),
						// We don't prefetch the links if user haven't clicked on pagination links yet.
						// This way we avoid prefetching when the page loads.
						'isPrefetchNextOrPreviousLink' => false,
					),
				),
				JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP
			)
		);
		$block_content = $p->get_updated_html();
	}

	/**
	 * Add two div's:
	 * 1. Pagination animation for visual users.
	 * 2. Accessibility div for screen readers, to announce page load states.
	 */
	$last_tag_position                = strripos( $block_content, '</div>' );
	$accessibility_and_animation_html = '
			<div
				data-wc-interactive="{&quot;namespace&quot;:&quot;woocommerce/product-collection&quot;}"
				class="wc-block-product-collection__pagination-animation"
				data-wc-class--start-animation="state.startAnimation"
				data-wc-class--finish-animation="state.finishAnimation">
			</div>
			<div
				data-wc-interactive="{&quot;namespace&quot;:&quot;woocommerce/product-collection&quot;}"
				class="screen-reader-text"
				aria-live="polite"
				data-wc-text="context.accessibilityMessage">
			</div>
		';
	return substr_replace(
		$block_content,
		$accessibility_and_animation_html,
		$last_tag_position,
		0
	);
}