Как сделать переключение между категориями при выводе товаров по типу табов без использования сторонних плагинов?

Question

[Елена]

Речь идет о подобном решении с категориями:



В WC есть виджет для вывода категорий, но при открытии категории он перекидывает на страницу категории, а мне нужно, чтобы это работало как обычный фильтр по категориям, а не ссылки на страницу. Я могла бы сделать это табами с аякс подгрузкой, для каждого таба сделать вывод товаров из нужной категории, но прикол в том, что категории могут меняться и добавляться новые, а значит, нужно, чтобы их создавал автоматом и выводил сам wp.

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

P.S. С WC еще толком не работала, поэтому и не знаю.

Answer 1

[Елена]

Решила вопрос с помощью доп поля ACF с типом "таксономия". Надо было сразу с него начинать)

<?php $cats = get_terms(
                    array(
                        'taxonomy' => 'product_cat',
                        'hide_empty' => false,
                    )
                );

                global $post;
                $term_slug=$post->post_name;

                $i=0;
                foreach($cats as $item){ $i++;
                    if($i ==1){
                        $current_cat = $item->slug;
                        if(isset($_GET['cat'])) {
                            $current_cat = $_GET['cat'];
                        }
                    }
                }

                $terms = get_field('cats');

                if( $terms ): ?>
                        <?php foreach( $terms as $term ): ?>
                            <a href="/<?php print "$term_slug"; ?>/?cat=<?php echo $term->slug; ?>" class="nav_category_catalog w-inline-block">
                                <div><?php echo $term->name; ?></div>
                            </a>
                        <?php endforeach; ?>

                <?php endif; ?>

Answer 2

[Пычев Анатолий]

а мне нужно, чтобы это работало как обычный фильтр по категориям

Фильтр предполагает включение двух и более категорий одновременно. Вы действительно этого хотите? Если да, то вам наверное нужен плагин фильтра и фильтровать по таксономии "product_cat"

Виджет не позволит Вам включить две и более категории одновременно, или надо писать свой виджет с фильтром.

Если же Вы хотите просто ajax обновление странички с подгрузкой нужной категории, то Вам может помочь это видео ( там общий алгоритм )

Comments

[Елена]

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

[Пычев Анатолий]

Думаю придётся писать свой виджет, выводить его в сайдбаре, а сайдбар выводить в шаблоне.
Виджет писать с функцией фильтра.
Работы не мало.
Может попробуйте поставить плагин фильтра и настроить?

[Елена]

Пычев Анатолий, нет. Теперь оказалось, что нужно, чтобы на каждой странице можно было выбирать категории, которые будут выводиться. То есть я сейчас делаю шаблон, который можно применить к каждой странице. И вот на каждой странице с этим шаблоном должна быть возможность выбирать категории для вывода товаров (прям при создании страницы) и т.д.

У меня есть идея - сделать вот эти табы с категориями через доп поля ACF, где вбивать прям ярлык/слаг самой категории, а значение доп поля выводить в переменную, которую юзать для вывода товаров уже. На сайте есть шаблон старый для уже ненужного типа страниц, где есть вывод всех категорий с такими табами и подгрузкой товаров соответствующей категории (то есть то, что мне нужно). По аналогии я сделала сейчас свой вывод в своем шаблоне, и все работает. Теперь остается как-то применить для этого метода свою идею с доп полями.

Код вывода категорий и товаров сейчас в шаблоне:

<div class="nv_catalog_wrap">
            <!--?php dynamic_sidebar('catalog_category'); ?-->
            <ul class="type-list-print wow fadeInUp">
                <?php $cats = get_terms(
                    array(
                        'taxonomy' => 'product_cat',
                        'hide_empty' => false,
                    )
                );
                global $post;
                $term_slug=$post->post_name;
                $i=0;
                foreach($cats as $item){ $i++;
                    if($i ==1){
                        $current_cat = $item->slug;
                        if(isset($_GET['cat'])) {
                            $current_cat = $_GET['cat'];
                        }
                    }
                    ?>
                    <li <?php if(($i == 1 and !isset($_GET['cat'])) or(isset($_GET['cat']) and $_GET['cat'] == $item->slug)){?>class="active"<?php }?>><a href="/<?php print "$term_slug"; ?>/?cat=<?= $item->slug?>#v" class="nav_category_catalog w-inline-block"><span><?= $item->name?></span></a></li>
                <?php }?>
            </ul>
            <a href="#" class="nav_category_catalog nav_category_catalog_active w-inline-block">
                <div>Комплексы барбекю</div>
            </a>
            <a href="#" class="nav_category_catalog w-inline-block">
                <div>Кирпичные камины</div>
            </a>
            <a href="#" class="nav_category_catalog w-inline-block">
                <div>Банные печи</div>
            </a>
            <a href="#" class="nav_category_catalog w-inline-block">
                <div>Отопительные печи</div>
            </a>
            <a href="#" class="nav_category_catalog w-inline-block">
                <div>Беседки</div>
            </a>
        </div>
        <div class="catalog_box_wrap">
            <div class="w-row">
                <?php
					$args = array(
							'post_type' => 'product',
							'posts_per_page' =>-1,
							'tax_query' => array(
								array(
									'taxonomy' => 'product_cat',
									'field'    => 'slug',
									'terms'    =>array($current_cat) ,
								)
							),
						);
						$works_data = new WP_Query($args);

						while($works_data->have_posts()): $works_data->the_post(); ?>
                <div class="w-col w-col-4 w-col-medium-4">
                    <div class="catalog_box"><img src="<?= bloginfo('template_directory'); ?>/img/1.JPG" srcset="<?= bloginfo('template_directory'); ?>/img/1-p-500.jpeg 500w, <?= bloginfo('template_directory'); ?>/img/1-p-1080.jpeg 1080w, <?= bloginfo('template_directory'); ?>/img/1-p-1600.jpeg 1600w, <?= bloginfo('template_directory'); ?>/img/1-p-2000.jpeg 2000w, <?= bloginfo('template_directory'); ?>/img/1-p-2600.jpeg 2600w, <?= bloginfo('template_directory'); ?>/img/1-p-3200.jpeg 3200w, <?= bloginfo('template_directory'); ?>/img/1.JPG 4032w" sizes="(max-width: 767px) 96vw, (max-width: 991px) 229.328125px, 299.984375px" alt="" class="images_box_catalog">
                        <div class="foot_box_catalog">
                            <div class="catalog_text_box"><?php the_title(); ?></div>
                            <div class="hr_catalog_box"></div>
                            <a href="<?php echo get_permalink(); ?>" class="button_catalog_box w-inline-block">
                                <div>Подробнее</div>
                            </a>
                        </div>
                    </div>
                </div>
                <?php endwhile; ?>
            </div>
        </div>

То есть мне надо теперь разобраться как передать значение доп поля ACF в переменную $current_cat. Просто времени уже нет писать что-то свое. Наверное, быстрее будет добить уже существующее.

[Пычев Анатолий]

Ну отлично, тогда успешной реализации Вам.

Я правда не совсем понял.
Сначала я подумал, что нужно дать возможность клиенту фильтровать категории, потом, что их должен указывать админ в админке.

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

[Елена]

Пычев Анатолий, да, нужно. Вы правильно поняли) Но! Не через виджеты, которые будут одинаковыми на всех страницах, а в редактировании каждой страницы.