Как разделить вывод по полям?
В общем есть мини каталог, который выводится через повторитель
<div class="list"> <?php if (have_rows("list")) : ?> <?php while (have_rows("list")) : the_row(); ?> <div class="item"> <div><?php the_sub_field("title") ?></div> <div><?php the_sub_field("description") ?></div> <div><?php the_sub_field("link") ?></div> </div> <?php endwhile; ?> <?php endif; ?> </div> |
<div class="list"> <?php if (have_rows("list")) : ?> <?php while (have_rows("list")) : the_row(); ?> <div class="item"> <div><?php the_sub_field("title") ?></div> <div><?php the_sub_field("description") ?></div> <div><?php the_sub_field("link") ?></div> </div> <?php endwhile; ?> <?php endif; ?> </div>
Не могу понять, как разделить это все через какое то поле или хз
нужно что то вроде галереи, думаю видели
где сверху идут табы там: Дизайн Арт 3Д
а снизу листинг, по клику на табы напр. Дизайн, остается все что относится к дизайну и т.д
как это рпавильно сделать не пойму
интересует только программная часть, как это правильно настроить
не пойму
по сути нужно вывести допустим 4 таких цикла, только как отделить это все по какому то полю
Дополнительно:
Создаете повторитель внутри которого название таба и на этом же уровне повторитель галереи. Далее в нужном песте выводите отдельно табы и отдельно галереи и переключаете посредством js/jq не забывая скрыть все галереи и задав первой галерее display:block
<div class="tabs"> <?php if( have_rows('gallery') ) : while ( have_rows('gallery') ) : the_row(); ?> <span id="gallery-<?php echo get_row_index(); ?>"><?php the_sub_field('gallery_name'); ?></span> <?php endwhile; endif; ?> </div> <?php if( have_rows('gallery') ) : while ( have_rows('gallery') ) : the_row(); ?> <?php if( have_rows('gallery_item') ) : while ( have_rows('gallery_item') ) : the_row(); ?> <div data-gallery="gallery-<?php echo get_row_index(); ?>" class="gallery"></div> <?php endwhile; endif; ?> <?php endwhile; endif; ?> |
<div class="tabs"> <?php if( have_rows('gallery') ) : while ( have_rows('gallery') ) : the_row(); ?> <span id="gallery-<?php echo get_row_index(); ?>"><?php the_sub_field('gallery_name'); ?></span> <?php endwhile; endif; ?> </div> <?php if( have_rows('gallery') ) : while ( have_rows('gallery') ) : the_row(); ?> <?php if( have_rows('gallery_item') ) : while ( have_rows('gallery_item') ) : the_row(); ?> <div data-gallery="gallery-<?php echo get_row_index(); ?>" class="gallery"></div> <?php endwhile; endif; ?> <?php endwhile; endif; ?>
- Спасибо
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для табов «Дизайн / Арт / 3D» нужно добавить каждому элементу повторителя признак категории, а потом на фронте фильтровать элементы по этому признаку. В ACF это можно сделать через select/checkbox поле внутри repeater, например
item_category.Структура repeater:
title— заголовок;description— описание;link— ссылка;category— select: design, art, 3d.Вывод кнопок табов можно сделать вручную:
<button data-filter="all">Все</button> <button data-filter="design">Дизайн</button> <button data-filter="art">Арт</button> <button data-filter="3d">3D</button>
А элементы выводить с data-атрибутом:
if (have_rows('list')) { echo '<div class="list">'; while (have_rows('list')) { the_row(); $category = get_sub_field('category'); echo '<div class="item" data-category="' . esc_attr($category) . '">'; echo '<div>' . esc_html(get_sub_field('title')) . '</div>'; echo '<div>' . esc_html(get_sub_field('description')) . '</div>'; echo '</div>'; } echo '</div>'; }
JS-фильтрация:
document.addEventListener('click', function (event) { const button = event.target.closest('[data-filter]'); if (!button) return; const filter = button.dataset.filter; document.querySelectorAll('.list .item').forEach(function (item) { const show = filter === 'all' || item.dataset.category === filter; item.hidden = !show; }); });document.addEventListener('click', function (event) { const button = event.target.closest('[data-filter]'); if (!button) return; const filter = button.dataset.filter; document.querySelectorAll('.list .item').forEach(function (item) { const show = filter === 'all' || item.dataset.category === filter; item.hidden = !show; }); });
Если категорий много и ими нужно управлять из админки, сделайте не select, а таксономию или отдельный repeater с категориями. Но для трёх фиксированных табов select внутри ACF repeater — самый простой вариант.
Если фильтрация должна работать без JavaScript, лучше делать отдельные страницы/архивы по категориям или перезагружать страницу с GET-параметром. JS-фильтр удобен для небольшого списка, уже загруженного на странице. Если элементов сотни, лучше фильтровать на сервере через AJAX или обычный запрос, иначе страница станет тяжёлой.