Automattic\WooCommerce\Blocks\BlockTypes

ProductSearch::render() │ protected │ WC 1.0

Render the block.

Method of the class: ProductSearch{}

No Hooks.

Return

String. Rendered block type output.

Usage

// protected - for code of main (parent) or child class
$result = $this->render( $attributes, $content, $block );

$attributes(array) (required)

Block attributes.

$content(string) (required)

Block content.

$block(WP_Block) (required)

Block instance.

ProductSearch::render() ProductSearch::render code ^{WC 9.4.2}

protected function render( $attributes, $content, $block ) {
	static $instance_id = 0;

	$attributes = wp_parse_args(
		$attributes,
		array(
			'hasLabel'    => true,
			'align'       => '',
			'className'   => '',
			'label'       => __( 'Search', 'woocommerce' ),
			'placeholder' => __( 'Search products…', 'woocommerce' ),
		)
	);

	/**
	 * Product Search event.
	 *
	 * Listens for product search form submission, and on submission fires a WP Hook named
	 * `experimental__woocommerce_blocks-product-search`. This can be used by tracking extensions such as Google
	 * Analytics to track searches.
	 */
	$this->asset_api->add_inline_script(
		'wp-hooks',
		"
		window.addEventListener( 'DOMContentLoaded', () => {
			const forms = document.querySelectorAll( '.wc-block-product-search form' );

			for ( const form of forms ) {
				form.addEventListener( 'submit', ( event ) => {
					const field = form.querySelector( '.wc-block-product-search__field' );

					if ( field && field.value ) {
						wp.hooks.doAction( 'experimental__woocommerce_blocks-product-search', { event: event, searchTerm: field.value } );
					}
				} );
			}
		} );
		",
		'after'
	);

	$input_id           = 'wc-block-search__input-' . ( ++$instance_id );
	$wrapper_attributes = get_block_wrapper_attributes(
		array(
			'class' => implode(
				' ',
				array_filter(
					[
						'wc-block-product-search',
						$attributes['align'] ? 'align' . $attributes['align'] : '',
					]
				)
			),
		)
	);

	$label_markup = $attributes['hasLabel'] ? sprintf(
		'<label for="%s" class="wc-block-product-search__label">%s</label>',
		esc_attr( $input_id ),
		esc_html( $attributes['label'] )
	) : sprintf(
		'<label for="%s" class="wc-block-product-search__label screen-reader-text">%s</label>',
		esc_attr( $input_id ),
		esc_html( $attributes['label'] )
	);

	$input_markup  = sprintf(
		'<input type="search" id="%s" class="wc-block-product-search__field" placeholder="%s" name="s" />',
		esc_attr( $input_id ),
		esc_attr( $attributes['placeholder'] )
	);
	$button_markup = sprintf(
		'<button type="submit" class="wc-block-product-search__button" aria-label="%s">
			<svg aria-hidden="true" role="img" focusable="false" class="dashicon dashicons-arrow-right-alt2" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
				<path d="M6 15l5-5-5-5 1-2 7 7-7 7z" />
			</svg>
		</button>',
		esc_attr__( 'Search', 'woocommerce' )
	);

	$field_markup = '
		<div class="wc-block-product-search__fields">
			' . $input_markup . $button_markup . '
			<input type="hidden" name="post_type" value="product" />
		</div>
	';

	return sprintf(
		'<div %s><form role="search" method="get" action="%s">%s</form></div>',
		$wrapper_attributes,
		esc_url( home_url( '/' ) ),
		$label_markup . $field_markup
	);
}