Как сделать фильтрацию в каталоге товаров?

AJAX PHP WordPress

1 ответ

Решил научится натягивать простой сайт на wordpress. Проблема возникла с фильтрацией на странице http://geniuscontraction/%d0%bc%d0%be%d1%81%d0%ba%... . Что не так? Почему не фильтрует?

&lt;div class="page__catalog catalog"&gt; 				&lt;div class="catalog__container"&gt; 					&lt;h1&gt;&lt;?php the_title(); ?&gt;&lt;/h1&gt; 					&lt;div class="catalog__content"&gt; 					&lt;nav class="catalog__navigation navigation-catalog scroll"&gt; 						&lt;div class="navigation-catalog__titles"&gt; 							&lt;div class="navigation-catalog__title"&gt; 								&lt;div data-filter="all" class="navigation-catalog__item _active"&gt; 									&lt;div class="navigation-catalog__image"&gt; 										&lt;picture&gt;&lt;source srcset="img/products/product-1.webp" type="image/webp"&gt;&lt;img src="img/products/product-1.png" alt=""&gt;&lt;/picture&gt; 									&lt;/div&gt; 									&lt;p&gt;Все&lt;/p&gt; 								&lt;/div&gt; 							&lt;/div&gt; 							&lt;div class="navigation-catalog__title"&gt; 								&lt;div data-filter="&lt;?php echo get_category( 13, ARRAY_A)['slug']?&gt;" class="navigation-catalog__item"&gt; 									&lt;div class="navigation-catalog__image"&gt; 										&lt;picture&gt;&lt;source srcset="img/products/product-1.webp" type="image/webp"&gt;&lt;img src="img/products/product-1.png" alt=""&gt;&lt;/picture&gt; 									&lt;/div&gt; 									&lt;p&gt;&lt;?php echo get_category( 13, ARRAY_A)['name']?&gt;&lt;/p&gt; 								&lt;/div&gt; 							&lt;/div&gt; 							&lt;div class="navigation-catalog__title"&gt; 								&lt;div data-filter="&lt;?php echo get_category( 14, ARRAY_A)['slug']?&gt;" class="navigation-catalog__item"&gt; 									&lt;div class="navigation-catalog__image"&gt; 										&lt;picture&gt;&lt;source srcset="img/products/product-2.webp" type="image/webp"&gt;&lt;img src="img/products/product-2.png" alt=""&gt;&lt;/picture&gt; 									&lt;/div&gt; 									&lt;p&gt;&lt;?php echo get_category( 14, ARRAY_A)['name']?&gt;&lt;/p&gt; 								&lt;/div&gt; 							&lt;/div&gt; 							&lt;div class="navigation-catalog__title"&gt; 								&lt;div data-filter="&lt;?php echo get_category( 15, ARRAY_A)['slug']?&gt;" class="navigation-catalog__item"&gt; 									&lt;div class="navigation-catalog__image"&gt; 										&lt;picture&gt;&lt;source srcset="img/products/product-3.webp" type="image/webp"&gt;&lt;img src="img/products/product-3.png" alt=""&gt;&lt;/picture&gt; 									&lt;/div&gt; 									&lt;p&gt;&lt;?php echo get_category( 15, ARRAY_A)['name']?&gt;&lt;/p&gt; 								&lt;/div&gt; 							&lt;/div&gt; 							&lt;div class="navigation-catalog__title"&gt; 								&lt;div data-filter="&lt;?php echo get_category( 16, ARRAY_A)['slug']?&gt;" class="navigation-catalog__item"&gt; 									&lt;div class="navigation-catalog__image"&gt; 										&lt;picture&gt;&lt;source srcset="img/products/product-4.webp" type="image/webp"&gt;&lt;img src="img/products/product-4.png" alt=""&gt;&lt;/picture&gt; 									&lt;/div&gt; 									&lt;p&gt;&lt;?php echo get_category( 16, ARRAY_A)['name']?&gt;&lt;/p&gt; 								&lt;/div&gt; 							&lt;/div&gt; 							&lt;div class="navigation-catalog__title"&gt; 								&lt;div data-filter="&lt;?php echo get_category( 17, ARRAY_A)['slug']?&gt;" class="navigation-catalog__item"&gt; 									&lt;div class="navigation-catalog__image"&gt; 										&lt;picture&gt;&lt;source srcset="img/products/product-5.webp" type="image/webp"&gt;&lt;img src="img/products/product-5.png" alt=""&gt;&lt;/picture&gt; 									&lt;/div&gt; 									&lt;p&gt;&lt;?php echo get_category( 17, ARRAY_A)['name']?&gt;&lt;/p&gt; 								&lt;/div&gt; 							&lt;/div&gt; 						&lt;/div&gt; 					&lt;/nav&gt; 					&lt;div class="catalog__body"&gt;  						&lt;?php  						global $post;  						if(have_posts()){ 							while(have_posts()){ 							the_post(); 							$all_category = get_the_category(); 							$res_name = ''; 							foreach($all_category as $category){ 								if($category -&gt; term_id == 13 || $category -&gt; term_id == 14 || $category -&gt; term_id == 15 || $category -&gt; term_id == 16 || $category -&gt; term_id == 17){ 									$res_name = $category -&gt; slug; 								} 							} 							?&gt;  							&lt;?php  							} 							 						}  						$myposts = get_posts([  							'numberposts' =&gt; -1, 							'category'    =&gt; 12, 						]);  						if( $myposts ){ 							foreach( $myposts as $post ){ 								setup_postdata( $post ); 								?&gt;  								&lt;div class="catalog__column &lt;?php $res_name?&gt;"&gt; 									&lt;div class="catalog__item"&gt; 										&lt;div class="catalog__image"&gt; 											&lt;div class="catalog__favorites"&gt; 												&lt;div class="catalog__favorites-icon _icon-favorites-2"&gt;&lt;/div&gt; 												&lt;div class="catalog__favorites-icon-bg _icon-favorites"&gt;&lt;/div&gt; 												&lt;div class="catalog__like"&gt;2549&lt;/div&gt; 											&lt;/div&gt; 											&lt;?php the_post_thumbnail(); ?&gt; 										&lt;/div&gt; 										&lt;a href="&lt;?php echo get_permalink(); ?&gt;" class="catalog__items"&gt; 											&lt;h3&gt;&lt;?php the_title(); ?&gt;&lt;/h3&gt; 										&lt;/a&gt; 									&lt;/div&gt; 								&lt;/div&gt;  								&lt;?php  							} 						} 						 						wp_reset_postdata(); // Сбрасываем $post 						 						?&gt; 					&lt;/div&gt; 				&lt;/div&gt; 			&lt;/div&gt;

<div class="page__catalog catalog"> <div class="catalog__container"> <h1><?php the_title(); ?></h1> <div class="catalog__content"> <nav class="catalog__navigation navigation-catalog scroll"> <div class="navigation-catalog__titles"> <div class="navigation-catalog__title"> <div data-filter="all" class="navigation-catalog__item _active"> <div class="navigation-catalog__image"> <picture><source srcset="img/products/product-1.webp" type="image/webp"><img src="img/products/product-1.png" alt=""></picture> </div> <p>Все</p> </div> </div> <div class="navigation-catalog__title"> <div data-filter="<?php echo get_category( 13, ARRAY_A)['slug']?>" class="navigation-catalog__item"> <div class="navigation-catalog__image"> <picture><source srcset="img/products/product-1.webp" type="image/webp"><img src="img/products/product-1.png" alt=""></picture> </div> <p><?php echo get_category( 13, ARRAY_A)['name']?></p> </div> </div> <div class="navigation-catalog__title"> <div data-filter="<?php echo get_category( 14, ARRAY_A)['slug']?>" class="navigation-catalog__item"> <div class="navigation-catalog__image"> <picture><source srcset="img/products/product-2.webp" type="image/webp"><img src="img/products/product-2.png" alt=""></picture> </div> <p><?php echo get_category( 14, ARRAY_A)['name']?></p> </div> </div> <div class="navigation-catalog__title"> <div data-filter="<?php echo get_category( 15, ARRAY_A)['slug']?>" class="navigation-catalog__item"> <div class="navigation-catalog__image"> <picture><source srcset="img/products/product-3.webp" type="image/webp"><img src="img/products/product-3.png" alt=""></picture> </div> <p><?php echo get_category( 15, ARRAY_A)['name']?></p> </div> </div> <div class="navigation-catalog__title"> <div data-filter="<?php echo get_category( 16, ARRAY_A)['slug']?>" class="navigation-catalog__item"> <div class="navigation-catalog__image"> <picture><source srcset="img/products/product-4.webp" type="image/webp"><img src="img/products/product-4.png" alt=""></picture> </div> <p><?php echo get_category( 16, ARRAY_A)['name']?></p> </div> </div> <div class="navigation-catalog__title"> <div data-filter="<?php echo get_category( 17, ARRAY_A)['slug']?>" class="navigation-catalog__item"> <div class="navigation-catalog__image"> <picture><source srcset="img/products/product-5.webp" type="image/webp"><img src="img/products/product-5.png" alt=""></picture> </div> <p><?php echo get_category( 17, ARRAY_A)['name']?></p> </div> </div> </div> </nav> <div class="catalog__body"> <?php global $post; if(have_posts()){ while(have_posts()){ the_post(); $all_category = get_the_category(); $res_name = ''; foreach($all_category as $category){ if($category -> term_id == 13 || $category -> term_id == 14 || $category -> term_id == 15 || $category -> term_id == 16 || $category -> term_id == 17){ $res_name = $category -> slug; } } ?> <?php } } $myposts = get_posts([ 'numberposts' => -1, 'category' => 12, ]); if( $myposts ){ foreach( $myposts as $post ){ setup_postdata( $post ); ?> <div class="catalog__column <?php $res_name?>"> <div class="catalog__item"> <div class="catalog__image"> <div class="catalog__favorites"> <div class="catalog__favorites-icon _icon-favorites-2"></div> <div class="catalog__favorites-icon-bg _icon-favorites"></div> <div class="catalog__like">2549</div> </div> <?php the_post_thumbnail(); ?> </div> <a href="<?php echo get_permalink(); ?>" class="catalog__items"> <h3><?php the_title(); ?></h3> </a> </div> </div> <?php } } wp_reset_postdata(); // Сбрасываем $post ?> </div> </div> </div>

Дополнительно:

Ссылка не валидна на сайт

В вашей верстке нет фильтров. В WP большинство фильтров пишутся на js (если табы) или ajax-php (если нужен запрос на сервер)

Послушай добрый совет = выкинь из головы все эти "натяггивать". ВП не презерватив. Учи ВП, используй нормальные темы и плагины из оф каталога.

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Редакция по БД Ответ

Фильтрация в каталоге не заработает сама по себе только из-за атрибутов data-filter. Нужно связать кнопки фильтра с карточками: либо на фронте через JS, либо через AJAX-запрос к WordPress. Если товары уже выведены на странице и их немного, достаточно клиентской фильтрации. Если товаров много, лучше AJAX и WP_Query.

Для простой фильтрации на клиенте у карточек должен быть такой же признак, как у кнопок:

&lt;button data-filter="sofas"&gt;Диваны&lt;/button&gt;
 
&lt;div class="catalog-card" data-category="sofas"&gt;...&lt;/div&gt;
&lt;div class="catalog-card" data-category="chairs"&gt;...&lt;/div&gt;

<button data-filter="sofas">Диваны</button> <div class="catalog-card" data-category="sofas">...</div> <div class="catalog-card" data-category="chairs">...</div>

JS:

document.addEventListener('click', function (event) {
  const button = event.target.closest('[data-filter]');
  if (!button) return;
 
  const filter = button.dataset.filter;
 
  document.querySelectorAll('.catalog-card').forEach(function (card) {
    const show = filter === 'all' || card.dataset.category === filter;
    card.hidden = !show;
  });
});

document.addEventListener('click', function (event) { const button = event.target.closest('[data-filter]'); if (!button) return; const filter = button.dataset.filter; document.querySelectorAll('.catalog-card').forEach(function (card) { const show = filter === 'all' || card.dataset.category === filter; card.hidden = !show; }); });

Если это WordPress-каталог с рубриками/таксономиями, правильнее хранить категории товаров как taxonomy, а не только как CSS-классы. Тогда AJAX-фильтр будет отправлять slug термина, а сервер возвращать карточки через WP_Query с tax_query.

Частая ошибка у новичков: в HTML кнопки есть, но у карточек нет соответствующих данных, либо JS ищет один класс, а в разметке другой. Откройте DevTools и проверьте: при клике на фильтр реально ли срабатывает обработчик, какой filter получается и какие карточки он должен скрывать. Без этой связки WordPress тут ни при чём — фильтрация просто не имеет логики.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ SMM Из-за чего не сохраняется видео в мобильной программе blackmagic? 1 ответ

Как сделать фильтрацию в каталоге товаров?

Дополнительно:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно