Отображение вариаций в виде радиокнопок в 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

Источник: https://www.kobzarev.com/wordpress/display-variations-as-radio-buttons/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

Добавить комментарий

%d такие блоггеры, как: