Una select dropdown per i prodotti di Woocommerce

Woocommerce dispone di un apposito widget che consente di inserire nelle sidebar del tema le voci delle categorie dei prodotti, sotto forma di elenco o di menù a discesa.

Se il template del nostro tema non dispone di una sidebar, o se vogliamo stampare le categorie dei prodotti al di fuori di essa, è possibile utilizzare la funzione di Woocommerce wc_product_dropdown_categories() in modalità standalone.

Io ho modificato questa funzione per utilizzare il markup html che desideravo, e soprattutto per rendere la select dropdown funzionante anche nel caso in cui Javascript sia disabilitato, seguendo le convenzioni dell’unobtrusive scripting.

function my_product_dropdown_categories( $args = array() ) {
	global $wp_query, $woocommerce;
	
	$defaults = array(
		'pad_counts'         => 1,
		'show_count'        => 1,
		'hierarchical'       => 1,
		'hide_empty'         => 1,
		'show_uncategorized' => 1,
		'orderby'            => 'name',
		'selected'			 => isset($wp_query->queried_object->slug)  ? $wp_query->queried_object->slug : '',
		'menu_order'         => false
	);

	$args = wp_parse_args( $args, $defaults );

	if ( $args['orderby'] == 'order' ) {
		$args['menu_order'] = 'asc';
		$args['orderby']    = 'name';
	}

	$terms = get_terms( 'product_cat', $args );

	if ( ! $terms )
		return;
	$output  ="<form class='woocommerce-product-cat' method='get'>";
	$output .= "<div class=\"form-group\"><select name='product_cat' class='dropdown_product_cat form-control input-sm'>";
	$output .= '<option value="">' . __( 'Select a category', 'woocommerce' ) . '</option>';
	$output .= wc_walk_category_dropdown_tree( $terms, 0, $args );

	$output .="</select></div>";
	$output .="<noscript><button type=\"submit\" class=\"btn btn-standard btn-sm\">submit</button></noscript>";
	$output .="</form>";

	echo $output;
}

La seguente funzione aggiunge l’interatività javascript sulla select html in modo da effettuare il redirect verso la pagina della categoria prodotti che è stata selezionata nel dropdown:

function get_product_dropdown_categories() {
	
	my_product_dropdown_categories();
	
	wc_enqueue_js("
				jQuery('.dropdown_product_cat').change(function(){
					if(jQuery(this).val() != '') {
						location.href = '" . home_url() . "/?product_cat=' + jQuery(this).val();
					} else {
						location.href = '" . get_permalink( woocommerce_get_page_id( 'shop' ) ) . "'
					}
				});
			");
	
}

La funzione get_product_dropdown_categories() si può invocare a piacimento nella posizione voluta all’interno del template del proprio tema, personalizzando gli argomenti che sono gli stessi della funzione del core di wordpress get_terms().