Automattic\WooCommerce\Blocks\BlockTypes

ProductSearch{} │ WC 1.0

ProductSearch class.

Хуков нет.

Использование

$ProductSearch = new ProductSearch();
// use class methods

Методы

1. protected get_block_type_script( $key = null )
2. protected render( $attributes, $content )

Код ProductSearch{} ProductSearch{} ^{WC 6.7.0}

class ProductSearch extends AbstractBlock {

	/**
	 * Block name.
	 *
	 * @var string
	 */
	protected $block_name = 'product-search';

	/**
	 * Get the frontend script handle for this block type.
	 *
	 * @param string $key Data to get, or default to everything.
	 * @return null
	 */
	protected function get_block_type_script( $key = null ) {
		return null;
	}

	/**
	 * Render the block.
	 *
	 * @param array  $attributes Block attributes.
	 * @param string $content    Block content.
	 * @return string Rendered block type output.
	 */
	protected function render( $attributes, $content ) {
		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
		);
	}
}