От автора: WooCommerce предлагает несколько вариантов отображения контента на архивных страницах: товары, категории (на главной странице магазина) или подкатегории (на страницах категорий) и товары, и категории. При настройке магазина я обычно выбираю третий вариант – WooCommerce товар списком и категории/подкатегории. Так посетители моего магазина могут выбирать товары прямо с домашней страницы или задать более четкий поиск через архив категорий товаров.
Тем не менее, у этого подхода есть один минус: категории/подкатегории отображаются вместе без какого-либо разделения. То есть если у ваших товаров изображения разных размеров, макет страницы будет выглядеть просто ужасно. И даже если изображения одного размера, но хотя бы в одной строке архивной страницы содержатся категории и товары, то кнопка «Добавить в корзину» для категорий сбивает всю верстку. Не все элементы одного размера.
В этом уроке я покажу, как отобразить категории в отдельном списке перед товарами. Для этого нам необходимо выполнить 4 шага:
Найти в WooCommerce код, отвечающий за вывод категорий и подкатегорий на архивные страницы в виде списка
Создать плагин для нашего кода
Написать функцию вставки категорий и подкатегорий перед списком товаров
Стилизовать выводимую разметку
Прежде чем приступить вам необходимо иметь установку WooCommerce с добавленными товарами, категориями и подкатегориями.
Что вам понадобится
Для выполнения урока вам потребуется:
Установка WordPress
Редактор кода
Установленный и активированный WooCommerce
Товары – я импортировала шаблонные товары из WooCommerce
Активированная тема, совместимая с WooCommerce – я использую Storefront
Прежде чем приступить: стандартные опции
Давайте взглянем, что дает нам WooCommerce по умолчанию. Я начала с добавления изображений в категории и подкатегории товаров, так как шаблонные данные WooCommerce идут без них. Я просто использовала по одному изображению товаров для каждой категории/подкатегории (см. скриншот ниже):
Теперь давайте посмотрим, как WooCommerce отображает категории и подкатегории товаров на архивных страницах. Если еще не перешли, перейдите в WooCommerce > Settings, вкладка products, опция display. Для Shop Page Display и Default Category Display выберите show both:
Кликните save changes, чтобы сохранить настройки, и перейдите на страницу магазина. Мой выглядит так:
У меня все смотрится хорошо, так как у меня всего 3 категории товаров, а размеры категорий такие же, как у товаров. Но вот так выглядит один из архивов категорий товаров:
В этой категории содержится 2 подкатегории, поэтому первый товар расположен с ними на одной строке в сетке из трех элементов по ширине. Я хочу выделить мой категории/подкатегории, просто отделив их от списка товаров. Давайте же приступим.
Находим код WooCommerce, отвечающий за вывод категорий и товаров в архивы
Первое, что необходимо сделать, это определить, как WooCommerce выводит категории и подкатегории на экран. Давайте поищем подходящую функцию в исходниках WooCommerce.
Для отображения архивных страниц WooCommerce использует файл archive-product.php в папке templates. В этом файле лежит следующий код, который выводит категории и товары:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php /** * woocommerce_before_shop_loop hook * * @hooked woocommerce_result_count - 20 * @hooked woocommerce_catalog_ordering - 30 */ do_action( 'woocommerce_before_shop_loop' ); ?> <?php woocommerce_product_loop_start(); ?> <?php woocommerce_product_subcategories(); ?> <?php while ( have_posts() ) : the_post(); ?> <?php wc_get_template_part( 'content', 'product' ); ?> <?php endwhile; // end of the loop. ?> <?php woocommerce_product_loop_end(); ?> |
Здесь есть функция woocommerce_product_subcategories(), которая выводит категории или подкатегории перед запуском цикла, выводящего товары.
Функция подключаемая, т.е. мы можем переписать ее в нашей теме. К сожалению это не совсем работает, так как WooCommerce содержит встроенные стили с очисткой элементов, которые появляются в начале строки со стандартным отображением.
Вместо этого мы выключим отображение категорий и подкатегорий на архивных страницах, чтобы там отображались только товары. Далее создадим новую функцию вывода категорий/подкатегорий товаров и подключим ее к экшену woocommerce_before_shop_loop. Нашей функции необходимо задать высокий приоритет, чтобы она запускалась последней.
Обратите внимание: так как WooCommerce очищает стили каждого третьего товара в списке, то мы не сможем использовать функцию woocommerce_product_subcategories() или ее отредактированную версию для отображения категорий. Она будет чистить третью, шестую (и т.д.) категорию или товар в списке, даже при вызове этой функции для раздельного отображения категорий. Ее можно переписать, но проще написать свою функцию. Давайте создадим плагин.
Создание плагина
В папке wp-content/plugins создайте новую папку с уникальным названием. Я назвала свою папку tutsplus-separate-products-categories-in-archives. В ней создайте новый файл с уникальным названием. Я использовала то же самое имя tutsplus-separate-products-categories-in-archives.php. Откройте файл и вставьте следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php /** * Plugin Name: Tutsplus display WooCommerce products and categories/subcategories separately in archive pages * Plugin URI: //code.tutsplus.com/tutorials/woocommerce-display-product-categories-subcategories-and-products-in-two-separate-lists--cms-25479 * Description: Display products and catgeories / subcategories as two separate lists in product archive pages * Version: 1.0 * Author: Rachel McCollin * Author URI: //rachelmccollin.co.uk * * */ |
Вы можете исправить данные об авторе, это ведь ваш плагин. Сохраните файл и активируйте плагин через панель администратора WordPress.
Написание своей функции
Теперь давайте напишем свою функцию. Но перед этим выключите отображение категорий в панели администратора. Перейдите WooCommerce > Settings во вкладку Products и выберите опцию Display. Для опций Shop Page Display и Default Category Display установите Show products. Сохраните изменения.
Теперь ваша страница магазина должна выглядеть примерно так:
В файл плагина вставьте этот код:
|
1 2 3 4 5 |
function tutsplus_product_subcategories( $args = array() ) { } } add_action( 'woocommerce_before_shop_loop', 'tutsplus_product_subcategories', 50 ); |
Внутрь функции вставьте этот код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
$parentid = get_queried_object_id(); $args = array( 'parent' => $parentid ); $terms = get_terms( 'product_cat', $args ); if ( $terms ) { echo '<ul class="product-cats">'; foreach ( $terms as $term ) { echo '<li class="category">'; woocommerce_subcategory_thumbnail( $term ); echo '<h2>'; echo '<a href="' . esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">'; echo $term->name; echo '</a>'; echo '</h2>'; echo '</li>'; } echo '</ul>'; } |
Что делает эта функция:
Функция определяет текущий запрошенный объект и сохраняет его ID в переменную $parentid.
Функция get_terms() определяет родительские термины у текущего запрошенного объекта. Если это домашняя страница, вернутся категории верхнего уровня; если это архив категорий, вернутся подкатегории.
Затем проверка, есть ли какие-либо термины перед открытием цикла foreach и тега ul.
Под каждый термин создается отдельный тег li, а функция woocommerce_subcatgeory_thumbnail() выводит изображения категорий. Следом идет название категории в ссылке на архив.
Сохраните файл и обновите страницу магазина. Моя главная страница выглядит так:
Категории отображаются, но им нужно написать стили. Приступим.
Стилизация списков категорий
Теперь необходимо добавить стили. В наш плагин необходимо добавить файл стилей, который нужно поставить в очередь. В папке плагина создайте папку CSS, внутри создайте файл style.css. Код ниже добавьте в файл плагина перед созданной нами функцией:
|
1 2 3 4 5 6 7 8 9 10 11 |
function tutsplus_product_cats_css() { /* register the stylesheet */ wp_register_style( 'tutsplus_product_cats_css', plugins_url( 'css/style.css', __FILE__ ) ); /* enqueue the stylsheet */ wp_enqueue_style( 'tutsplus_product_cats_css' ); } add_action( 'wp_enqueue_scripts', 'tutsplus_product_cats_css' ); |
Этот код правильно поставит созданные стили в очередь. Откройте файл стилей и вставьте в него код ниже. WooCommerce в стилях использует подход mobile first, мы тоже будем его использовать.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
ul.product-cats li { list-style: none; margin-left: 0; margin-bottom: 4.236em; text-align: center; position: relative; } ul.product-cats li img { margin: 0 auto; } @media screen and (min-width:768px) { ul.product-cats { margin-left: 0; clear: both; } ul.product-cats li { width: 29.4117647059%; float: left; margin-right: 5.8823529412%; } ul.product-cats li:nth-of-type(3) { margin-right: 0; } } |
Я взяла значения ширины и внешних отступов прямо из стилей WooCommerce. Откройте главную страницу еще раз. Моя выглядит так:
Архив категории music:
Вот так страница отображается на маленьких экранах:
Заключение
Категории товаров WooCommerce – замечательный инструмент. Однако они не всегда идеально отображаются на экране. В этом уроке вы узнали, как создать плагин для вывода категорий и подкатегорий отдельно от списка товаров. Также вы добавили стили к списку категорий.
Данный код можно использовать для вывода списка категорий и подкатегорий в любом месте на странице (к примеру, ниже списка товаров). Для этого необходимо прикрепить нашу функцию отображения категорий к экшену в файле шаблона WooCommerce.
Автор: Rachel McCollin
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.
