Примеры циклов для вывода товаров WooCommerce на сайте WordPress

WooCommerce — это самое быстрорастущее решение для электронной коммерции в Интернете для системы управления сайтом WordPress.

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

Цикл для отображения товаров WooCommerce

Когда на странице магазина WooCommerce отображается список товаров, код, который выводит список товаров, называется «Циклом товаров». Терминология напоминает цикл записей в блоге WordPress, где список записей выводится на страницах блога и архива. Принцип работы тот же.

Концепция кода довольно проста даже для понимания теми, кто почти не имеет опыта разработки. Цикл проверяет, не осталось ли еще товаров (при определенных условиях) для отображения.

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

Важность цикла товаров

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

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

Где найти цикл товаров WooCommerce?

Цикл товаров WooCommerce эволюционировал за последние четыре-пять лет, с тех пор как Automatic приобрела WooCommerce. Ушел в прошлое один небольшой кусок кода, выводивший комбинацию PHP вперемешку с HTML.

Теперь цикл товаров WooCommerce — это усовершенствованный, подключаемый модуль. Лучше всего найти дефолтный цикл товаров WooCommerce в файле шаблона: /template/archive-product.php.

Папка /template/ в плагине WooCommere содержит шаблоны, которые вы можете скопировать в свою дочернюю тему, чтобы настроить определенные страницы WooCommerce.

Также вы можете просмотреть файл archive-product.php по адресу:

https://github.com/woocommerce/woocommerce/blob/6.5.0/plugins/woocommerce/templates/archive-product.php

Код цикла товаров WooCommerce

Я удалил многие комментарии из исходного кода, чтобы показать простоту текущего цикла.

if ( woocommerce_product_loop() ) {
	do_action( 'woocommerce_before_shop_loop' );
	woocommerce_product_loop_start();
	if ( wc_get_loop_prop( 'total' ) ) {
		while ( have_posts() ) {
			the_post();
			do_action( 'woocommerce_shop_loop' );
			wc_get_template_part( 'content', 'product' );
		}
	}
	woocommerce_product_loop_end();
	do_action( 'woocommerce_after_shop_loop' );
} else {
	do_action( 'woocommerce_no_products_found' );
}

Я объясню, что происходит в коде на верхнем уровне.

Сам цикл товаров окружен условным оператором if, строки 1, 13 и 15, который проверяет, является ли это циклом товаров WooCommerce; в противном случае он сообщает браузеру, что в строке 14 товаров не найдено.

Строки 2 и 12 позволяют подключить или запустить свои функции для вывода содержимого непосредственно до и после цикла товаров, используя имена хуков WordPress woocommerce_before_shop_loop и woocommerce_after_shop_loop.

Не волнуйтесь, если вы не знаете, как использовать хуки WordPress, просто знайте, что это возможно. Строки 3 и 11 запускают и завершают цикл товаров WooCommerce соответственно.

Функция woocommerce_product_loop_start устанавливает указатели и счетчики и подготавливает базу данных WordPress для запроса.

Функция woocommerce_product_loop_end закрывает соединение с базой данных, сбрасывает указатели и приводит все в порядок, готовясь к очередному запросу WordPress.

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

Наконец, в строках с 5 по 9 запускается собственно цикл вывода товаров WooCommerce, в котором информация о товарах извлекается из базы данных и выводится в браузер.

Строка 8 вызывает другой шаблон, /templates/content-product.php, для вывода данных о товарах.

Вы можете посмотреть этот шаблон онлайн здесь:

https://github.com/woocommerce/woocommerce/blob/6.5.0/plugins/woocommerce/templates/content-product.php

Альтернативный пользовательский цикл товаров WooCommerce

Документация WooCommerce довольно хороша, и у них есть альтернативный пример кода для пользовательского цикла товаров WooCommerce:

<ul class="products">
	<?php
		$args = array(
			'post_type' => 'product',
			'posts_per_page' => 12
			);
		$loop = new WP_Query( $args );
		if ( $loop->have_posts() ) {
			while ( $loop->have_posts() ) : $loop->the_post();
				wc_get_template_part( 'content', 'product' );
			endwhile;
		} else {
			echo __( 'No products found' );
		}
		wp_reset_postdata();
	?>
</ul>

Приведенный выше код очень похож на тот, который мы рассмотрели выше, но вместо того, чтобы использовать все эти функции WooCommerce для настройки, этот фрагмент кода использует объект WP_Query для настройки запроса к базе данных для получения данных о товаре.

Критерии поиска товаров задаются в массиве $arg в строках 3-6.

В приведенном выше фрагменте кода запрос ищет записи типа 'product', а пагинация страниц настроена так, чтобы возвращать 12 товаров на страницу. Вы можете настроить условия запроса, добавив условия в переменную $arg.

Ознакомьтесь с документацией WP_Query по адресу:

https://developer.wordpress.org/reference/classes/wp_query/

Заключение

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

Чтобы настроить цикл товаров WooCommerce, вам нужно будет понять, как использовать хуки и фильтры WordPress. Но подробнее об этом мы поговорим в следующих статьях.