Как вывести недавно просмотренные товары

WooCommerce  /  20 комментариев

В этом уроке хочу показать вам, как создать шорткод для вывода недавно просмотренных пользователем товаров. Он у нас будет работать на основе стандартного шорткода WooCommerce, [products].

Прежде, чем я покажу вам готовый код шорткода, хочу порекомендовать свой видеокурс по WooCommerce, в котором мы создаём тему для интернет-магазина с нуля на основе только готовой HTML-вёрстки, вот ссылка.

Недавно просмотренные товары в WooCommerce
Недавно просмотренные товары будут отображаться на основе уже существующих стилей в вашей теме, это пример для темы Storefront.

Шаг 1. Ставим куки

Вообще в WooCommerce существуют свои собственные куки, которые хранят ID недавно просмотренных товаров $_COOKIE[ 'woocommerce_recently_viewed' ] в виде строки, разделённых палкой |, однако, они будут пустыми, если вы в то же время не используете виджет «Недавно просмотренные товары».

Поэтому нам придётся установить собственные.

Я решил использовать $_COOKIE[ 'woocommerce_recently_viewed_2' ], но опять напоминаю, что если вы используете виджет, то этот код вам и вовсе не понадобится.

add_action( 'template_redirect', 'truemisha_recently_viewed_product_cookie', 20 );
 
function truemisha_recently_viewed_product_cookie() {
 
	// если находимся не на странице товара, ничего не делаем
	if ( ! is_product() ) {
		return;
	}
 
 
	if ( empty( $_COOKIE[ 'woocommerce_recently_viewed_2' ] ) ) {
		$viewed_products = array();
	} else {
		$viewed_products = (array) explode( '|', $_COOKIE[ 'woocommerce_recently_viewed_2' ] );
	}
 
	// добавляем в массив текущий товар
	if ( ! in_array( get_the_ID(), $viewed_products ) ) {
		$viewed_products[] = get_the_ID();
	}
 
	// нет смысла хранить там бесконечное количество товаров
	if ( sizeof( $viewed_products ) > 15 ) {
		array_shift( $viewed_products ); // выкидываем первый элемент
	}
 
 	// устанавливаем в куки
	wc_setcookie( 'woocommerce_recently_viewed_2', join( '|', $viewed_products ) );
 
}
  • is_product() – можно этой функцией проверить, чтобы наш хук срабатывал только на странице товара, только обратите внимание, что это функция WooCommerce и возможно вы захотите на всякий случай добавить проверку function_exists( 'is_product' ), чтобы избежать ошибок 500, когда вдруг будет отключен плагин WooCommerce.
  • Посмотрите на строчки 14 и 28 – это как раз то, очём я говорил выше – ID товаров хранятся в куках в виде строки, разделённые символом |, вообще вы можете выбрать любой другой символ, но сам WooCommerce разделяет их так и я решил сделать то же самое.
  • Я решил хранить максимум 15 товаров, но вы можете выбрать любое другое максимальное значение, может быть вам будет достаточно 5-и.
  • Этот код (и следующий тоже) вставляйте в functions.php вашей текущей темы, либо создайте для него отдельный плагин.

Шаг 2. Шорткод

Я решил создать шорткод [recently_viewed_products], но вы можете назвать его как угодно по-другому. Кроме того, у меня есть отдельный подробный урок про шорткоды и ещё один про шорткоды WooCommerce.

add_shortcode( 'recently_viewed_products', 'truemisha_recently_viewed_products' );
 
function truemisha_recently_viewed_products() {
 
	if( empty( $_COOKIE[ 'woocommerce_recently_viewed_2' ] ) ) {
		$viewed_products = array();
	} else {
		$viewed_products = (array) explode( '|', $_COOKIE[ 'woocommerce_recently_viewed_2' ] );
	}
 
	if ( empty( $viewed_products ) ) {
		return;
	}
 
	// надо ведь сначала отображать последние просмотренные
	$viewed_products = array_reverse( array_map( 'absint', $viewed_products ) );
 
	$title = '<h3>Вы уже смотрели</h3>';
 
	$product_ids = join( ",", $viewed_products );
 
	return $title . do_shortcode( "[products ids='$product_ids']" );
 
}

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Комментарии — 20

Чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или войдите.

Миша Рудрастых и WordPress

Полезности из мира WordPress и жизни студии.

Мой телеграм-канал