Отображение вариаций в виде радиокнопок в WooCommerce

• Отображение вариаций в виде радиокнопок в WooCommerce

В этом руководстве я хочу показать вам пример того, как можно заменить стандартные выпадающие списки с выбором вариаций на радиокнопки без использования плагинов.

Рассмотрим возможность указания данного функционала для определенных атрибутов товаров WooCommerce или идентификаторов товаров.

Что-то в этом роде:

Но теперь позвольте мне немного подробнее описать то, что мы будем делать в этом руководстве:

• Мы не будем изменять какие-либо HTML-шаблоны WooCommerce, это довольно грубый метод, и я заметил, что некоторые плагины в каталоге плагинов WordPress делают это, что, на мой взгляд, совершенно не нужно.
• Я покажу вам несколько условий, которые позволят вам заменить выпадающие списки выбора вариаций на радиокнопки только для определенных товаров или только для определенных атрибутов.

Приступим к работе

Начнем с простого фрагмента PHP-кода, который я создал на основе функции wc_dropdown_variation_attribute_options() и фактически использовал хук woocommerce_dropdown_variation_attribute_options_html, который находится внутри этой функции.

Моя цель состоит в том, чтобы отобразить радиокнопки точно под списком выбора вариаций по умолчанию и скрыть стандартный список с помощью display:none. Затем с помощью JavaScript мы собираемся эмулировать взаимодействие с выпадающим списком вариаций, когда пользователи используют радиокнопки.

Это легко!

add_filter( 'woocommerce_dropdown_variation_attribute_options_html', 'rudr_radio_variations', 20, 2 );
function rudr_radio_variations( $html, $args ) {

	// in wc_dropdown_variation_attribute_options() they also extract all the array elements into variables
	$options   = $args[ 'options' ];
	$product   = $args[ 'product' ];
	$attribute = $args[ 'attribute' ];
	$name      = $args[ 'name' ] ? $args[ 'name' ] : 'attribute_' . sanitize_title( $attribute );
	$id        = $args[ 'id' ] ? $args[ 'id' ] : sanitize_title( $attribute );
	$class     = $args[ 'class' ];

	if( empty( $options ) || ! $product ) {
		return $html;
	}
	
	// HTML for our radio buttons
	$radios = '<div class="rudr-variation-radios">';

	// taxonomy-based attributes
	if( taxonomy_exists( $attribute ) ) {

		$terms = wc_get_product_terms(
			$product->get_id(),
			$attribute,
			array(
				'fields' => 'all',
			)
		);

		foreach( $terms as $term ) {
			if( in_array( $term->slug, $options, true ) ) {
				$radios .= "<input type=\"radio\" id=\"{$name}-{$term->slug}\" name=\"{$name}\" value=\"{$term->slug}\"" . checked( $args[ 'selected' ], $term->slug, false ) . "><label for=\"{$name}-{$term->slug}\">{$term->name}</label><br />";
			}
		}
	// individual product attributes
	} else {
		foreach( $options as $option ) {
			$checked = sanitize_title( $args[ 'selected' ] ) === $args[ 'selected' ] ? checked( $args[ 'selected' ], sanitize_title( $option ), false ) : checked( $args[ 'selected' ], $option, false );
			$radios .= "<input type=\"radio\" id=\"{$name}-{$option}\" name=\"{$name}\" value=\"{$option}\" id=\"{$option}\" {$checked}><label for=\"{$name}-{$option}\">{$option}</label>";
		}
	}
  
	$radios .= '</div>';

	return $html . $radios;
	
}

Как видите, приведенный выше код предоставляет нам широкие возможности для настройки — мы можем отображать цены как часть меток радиокнопок или даже изображений.

Также:

В строках 32 и 39 для простоты HTML в этом руководсте я специально пропустил все функции экранирования, не забывайте о них.

Не забудьте использовать CSS, чтобы скрыть стандартный выпадающий список:

#pa_color{
	display:none;	
}

Для того чтобы отобразить эти радиокнопки только для определенных идентификаторов товаров, можно использовать условие, приведенное ниже. Например, мы покажем радиокнопки только для товаров с идентификаторами 1, 15 и 25.

if( ! in_array( $product->get_id(), array( 1, 15, 25 ) ) ) {
	return $html;
}

Чтобы отобразить радиокнопки только для определенных атрибутов, используйте следующее условие:

if( 'pa_color' !== $attribute ) {
	return $html;
}

И, конечно, часть, связанная с JavaScript:

jQuery( function( $ ) {
	// on radio button change(click)
	$( document ).on( 'change', '.rudr-variation-radios input', function() {
		// for each checked radio button we reflect the same changes to select dropdowns
		$( '.rudr-variation-radios input:checked' ).each( function( index, element ) {
			const radio = $(element)
			const radioName = radio.attr( 'name' )
			const radioValue  = radio.attr( 'value' )
			$( 'select[name="' + radioName + '"]' ).val( radioValue ).trigger( 'change' );
		})
	})

})

Источник: https://rudrastyh.com/woocommerce/variations-as-radio-buttons.html