Мова

Зв'язатися

Плагін для WordPress · з 2021

Taxonomy Chain Menu

Ланцюжки випадних списків за ієрархічною таксономією (марка, модель, покоління), що закінчуються записом, сторінкою терміна або дією фільтра.

Перший реліз
Активні встановлення
100+
  • PHP
  • WordPress
  • get_categories()
  • admin-ajax
  • JavaScript (класи ES6)
  • Fetch API
  • DOMParser
  • CustomEvent

Про мене

Taxonomy Chain Menu перетворює будь-яку ієрархічну таксономію будь-якого типу записів на ланцюжок випадних списків: вибір терміна завантажує наступний рівень, а в кінці ланцюжка відвідувач отримує список записів, посилання на термін або нічого. Це один шорткод із 22 налаштуваннями, і він також може керувати таблицею TableOn чи WOOT або фільтром товарів WOOF на тій самій сторінці.

Інженерна робота полягає в завантаженні дерева невідомої глибини по одному рівню, у вмінні визначити, що рівень останній, у відновленні вибраного шляху з посилання та в спілкуванні з іншими плагінами без залежності від їхнього коду.

Taxonomy Chain Menu · ланцюжки списків

що розв'язано

ПРАЦЮЄз 2021

Ланцюжки випадних списків за деревом таксономії

shipped · 2021

Що це даєВідвідувачі вибирають марку, потім модель, потім покоління й швидко потрапляють на потрібну сторінку. Завантажуються лише потрібні рівні, а вибраним шляхом можна поділитися як посиланням.

Проблема
Таксономія може мати кілька рівнів вкладеності. Рендерити все дерево наперед важко для великих каталогів; завантаження по рівнях вимагає знати, коли рівень останній і що тоді показувати.
Рішення

Сервер рендерить один рівень за запит і відповідає наступним списком, списком записів або посиланням на термін. Браузер зберігає отримані рівні як вузли DOM і відтворює їх із пам'яті.

Стек
  • PHP
  • admin-ajax
  • JavaScript
  • Fetch API
Задачі · 6
Завантажувати лише той рівень, який відкрив відвідувачget_terms() за батьківським терміном з hide_empty; ajax повертає наступний список або відповідь для кінцевого вузла

get_chain_item() читає батьківський термін із запиту й просить get_categories() його непорожні дочірні терміни. Якщо дочірні є, повертає список; інакше відповідь залежить від режиму кінцевого вузла. Фронтенд розбирає HTML через DOMParser і додає вузол до ланцюжка.

Визначити, що показує кінець ланцюжкаwatch_view обирає список записів, get_term_link() або відсутність виводу

У режимі 'posts' кінцевий вузол повертає список записів терміна з постійними посиланнями як значеннями, з налаштовуваними лімітом, порядком і сортуванням за мета-ключем. У режимі 'terms' він повертає URL терміна, і фронтенд рендерить кнопку. 'none' закінчує ланцюжок мовчки, і це режим, що використовується, коли ланцюжок лише керує фільтром.

Запит для терміна без дочірніх зайвийУ режимі terms кожна опція несе кількість своїх дочірніх; кінцевий вузол відкриває посилання напряму

Коли watch_view дорівнює 'terms', generate_tax_select() додає до кожної опції data-child-count (wp_count_terms із цим терміном як батьківським) і data-link. Фронтенд перевіряє кількість і для 0 показує кнопку без звернення до сервера.

Повернення вгору ланцюжком не повинно завантажувати ті самі рівні зновуКешувати отримані вузли списків за term_id; зміна рівня видаляє всі наступні

trigger_taxonomy_select() спершу видаляє всі елементи після зміненого списку, потім шукає в this.cache[term_id]. Кешований вузол повторно прикріплюється зі скинутим вибором; кешована відповідь для кінцевого вузла заново створює кнопку. На сервер ідуть лише невідомі раніше терміни, і кожен результат зберігається разом із даними свого запиту, тож події спрацьовують однаково для кешованих і нових рівнів.

Відновити вибраний шлях з посилання або шорткодуready_chain перелічує ID термінів; сервер за один прохід рендерить кожен рівень із попередньо вибраним значенням

ready_chain надходить із шорткоду або GET-параметра ready_chain як список ID термінів через кому; елемент, що не є простим числом, читається як ID запису. draw_chain_menu() проходить по ньому, рендерячи кожен рівень із вибраним наступним ID і використовуючи його як батьківський для наступного; нечисловий елемент стає попередньо вибраним записом. Після завантаження фронтенд додає кнопку для останнього значення й повторно випромінює подію change для найглибшого вибраного терміна, тож підключені таблиці та фільтри підхоплюють стан.

Обмежити верхній рівень, не обрізаючи глибші рівніinclude_top застосовується лише коли parent дорівнює 0; include та exclude застосовуються скрізь

Сайт може хотіти лише деякі бренди нагорі, але всі моделі під ними. get_terms() замінює список include на include_top лише для запиту кореня. Шорткод також перевіряє через get_object_taxonomies(), що таксономія належить до типу записів, перш ніж щось рендерити.

Керування таблицями та фільтрами з ланцюжка

у продукті

Що це даєТі самі випадні списки можуть керувати таблицями товарів і фільтрами товарів, що вже є на сторінці, тож відвідувачі звужують каталог в одному місці.

Проблема
Ланцюжок часто є навігаційним фронтом для інших плагінів на тій самій сторінці: таблиці TableOn чи WOOT або фільтра товарів WOOF. Вони мають власний стан і логіку перемальовування та нічого не знають про ланцюжок.
Рішення

Кожен вибір відправляє DOM CustomEvent з даними запиту. Невеликі конектори перекладають його у filter_data таблиці або поточні значення WOOF, а PHP-хуки дозволяють коду сайту змінювати дані опцій і підписи.

Стек
  • JavaScript
  • CustomEvent
  • Фільтри WordPress
Задачі · 5
Інші плагіни мають реагувати без жорсткого зв'язуванняКожна зміна відправляє CustomEvent 'taxonomy-chain-menu' з даними запиту

cast_event() надсилає дані запиту, контейнер і новий вузол. Вбудовані конектори слухають цю подію; будь-який інший скрипт може робити те саме. Ланцюжки, що просять загальний фільтр, також отримують 'taxonomy-chain-menu-do-filter' з term_id, slug і контейнером.

Фільтрувати таблицю TableOn або WOOT за найглибшим вибраним терміномКонектор замінює filter_data таблиці на {taxonomy: term_id}, потім перемальовує

table_connector() знаходить таблицю в DataTable23.tables за connect_table. Якщо рівень скинули на 'select', він проходить списки з кінця, щоб знайти найглибший, що досі вибраний. Потім замінює filter_data таблиці на вибраний термін або видаляє ключ таксономії, коли нічого не вибрано, і викликає redraw_table(); решту робить власна ajax-логіка та кеш таблиці.

WOOF очікує слаги термінів і власний формат URLЗаписати slug і ready_chain у woof_current_values та надіслати посилання WOOF

Опції несуть data-slug із сервера. З do_filter='woof' обробник кладе слаг найглибшого рівня під ключ таксономії в woof_current_values і зберігає повний шлях ID як ready_chain, щоб сторінка результатів WOOF могла відновити ланцюжок. Скасування всього вибору видаляє обидва ключі перед надсиланням.

Текст опцій, зображення й підписи мають надходити з коду сайтуХук taxonomy-chain-menu-option-data для кожної опції; префікс call_filter_ для підписів

draw_select() запитує у фільтра taxonomy-chain-menu-option-data текст і зображення кожної опції, передаючи ID терміна чи запису, батьківський і chain_id. Підпис, що починається з call_filter_, розв'язується застосуванням названого фільтра, тож підписи можна перекладати або обчислювати для кожної сторінки.

Налаштування шорткоду мають доходити до кожного ajax-запитуНалаштування живуть в атрибутах data-; JS перетворює ключі camelCase назад у snake_case

draw_chain_menu() виводить усі налаштування як екрановані атрибути data- на контейнері, тож сервер не зберігає стан окремого ланцюжка. prepare_request_data() копіює dataset у запит, перетворюючи імена dataset з camelCase на snake_case; sanitize_request_data() переводить ключі в нижній регістр і санітизує кожне значення.

Стилізовані списки без втрати рідної поведінки

у продукті

Що це даєВипадні списки можна стилізувати під дизайн сайту, зберігши стандартну поведінку, на яку покладаються форми та інші плагіни.

Проблема
Сайти хочуть стилізовані випадні списки, але логіка ланцюжка, конектори та обробка форм залежать від рідних елементів select і їхніх подій change.
Рішення

Рідні списки лишаються прихованим джерелом істини. Рефлектор клонує ланцюжок у віджети Selectron23 після кожної зміни й надсилає вибір назад до рідного списку через власну подію.

Стек
  • JavaScript
  • CustomEvent
  • Клонування DOM
Задачі · 3
Стилізований віджет не повинен замінювати справжній selectTCM_Reflector клонує ланцюжок поруч із прихованим оригіналом після кожної зміни

З select_wrapper='selectron23' контейнер рендериться прихованим, а TCM_Reflector вставляє сусідній елемент. clone() перебудовує його з поточних дочірніх елементів контейнера, обгортаючи кожен клонований select у віджет Selectron23, і запускається після кожної зміни рівня, влучання в кеш і оновлення завантажувача.

Вибір у віджеті має керувати справжнім selectonSelect відправляє select-changed; слухач встановлює значення й запускає логіку

onSelect у Selectron23 відправляє taxonomy-chain-menu-select-changed на оригінальний select зі значенням і контейнером. append_select_changed_event() перевіряє контейнер, встановлює значення й атрибут selected і викликає той самий обробник, що й для рідної зміни, тож ланцюжок, кеш і конектори бачать один шлях коду.

Різна ширина й висота для кожного рівня з одного налаштуванняСписки, розділені вертикальною рискою; останнє значення застосовується до всіх глибших рівнів

select_width ('300px|250px|20%') і selectron23_max_open_height розбиваються за '|' та застосовуються за індексом щоразу, коли додається рівень. Глибина ланцюжка наперед невідома, тож останнє значення покриває кожен подальший рівень.

Цифри

wordpress.org
  • Активні встановлення 100+ лічильник wordpress.org.
  • Років підтримки 5 З 25 лютого 2021 р., останнє оновлення 21 травня 2026 р..