Automattic\WooCommerce\Blocks\BlockTypes\AddToCartWithOptions

VariationSelectorAttributeOptions::render_pillsprotectedWC 1.0

Render the attribute options as pills.

Method of the class: VariationSelectorAttributeOptions{}

No Hooks.

Returns

String. The pills.

Usage

// protected - for code of main (parent) or child class
$result = $this->render_pills( $attributes, $content, $block );
$attributes(array) (required)
Block attributes.
$content(string) (required)
Block content.
$block(WP_Block) (required)
Block instance.

VariationSelectorAttributeOptions::render_pills() code WC 10.8.1

protected function render_pills( $attributes, $content, $block ) {
	$attribute_id               = $block->context['woocommerce/attributeId'];
	$attribute_slug             = wc_variation_attribute_name( $block->context['woocommerce/attributeName'] );
	$attribute_terms            = $block->context['woocommerce/attributeTerms'];
	$autoselect                 = $attributes['autoselect'] ?? false;
	$disabled_attributes_action = $attributes['disabledAttributesAction'] ?? 'disable';

	wp_interactivity_state(
		'woocommerce/add-to-cart-with-options',
		array(
			'isOptionSelected' =>
			function () {
				$context = wp_interactivity_get_context();

				return $context['option']['value'] === $context['selectedValue'];
			},
		)
	);

	$pills = '';
	foreach ( $attribute_terms as $attribute_term ) {
		$input = sprintf(
			'<input type="radio" %s/>',
			$this->get_normalized_attributes(
				array(
					'class'                  => 'wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill-input',
					'name'                   => $attribute_slug,
					'value'                  => $attribute_term['value'],
					'data-wp-bind--checked'  => 'state.isOptionSelected',
					'data-wp-bind--disabled' => 'state.isOptionDisabled',
					'data-wp-bind--hidden'   => 'hide' === $disabled_attributes_action ? 'state.isOptionDisabled' : null,
					'data-wp-on--click'      => 'actions.handlePillClick',
					'data-wp-on--keydown'    => 'actions.handleKeyDown',
					'data-wp-context'        => array(
						'option' => $attribute_term,
					),
				),
			)
		);

		$pills .= '<label class="wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill">' . $input . esc_html( $attribute_term['label'] ) . '</label>';
	}

	return sprintf(
		'<div %s>%s</div>',
		$this->get_normalized_attributes(
			array(
				'class'           => 'wc-block-add-to-cart-with-options-variation-selector-attribute-options__pills',
				'role'            => 'radiogroup',
				'id'              => $attribute_id,
				'aria-labelledby' => $attribute_id . '_label',
				'data-wp-context' => array(
					'name'          => wc_attribute_label( $block->context['woocommerce/attributeName'] ),
					'options'       => $attribute_terms,
					'selectedValue' => $this->get_default_selected_attribute( $attribute_slug, $attribute_terms ),
					'focused'       => '',
					'autoselect'    => $autoselect,
				),
				'data-wp-init'    => 'callbacks.setDefaultSelectedAttribute',
			),
		),
		$pills,
	);
}