Plugin para WordPress · desde 2021

Taxonomy Chain Menu

Listas pendentes encadeadas sobre uma taxonomia hierárquica (marca, modelo, geração) que terminam num artigo, numa página de termo ou numa ação de filtro.

Primeira versão: 25 de fevereiro de 2021
Instalações ativas: 100+

Ver em wordpress.org wordpress.org

Sobre

O Taxonomy Chain Menu transforma qualquer taxonomia hierárquica de qualquer tipo de conteúdo numa cadeia de listas pendentes: ao escolher um termo carrega o nível seguinte e, no fim da cadeia, o visitante obtém uma lista de artigos, uma ligação para o termo ou nada. É um único shortcode com 22 definições, e pode também controlar uma tabela TableOn ou WOOT ou um filtro de produtos WOOF na mesma página.

O trabalho de engenharia está em carregar uma árvore de profundidade desconhecida um nível de cada vez, saber quando um nível é o último, restaurar um caminho escolhido a partir de uma ligação e comunicar com outros plugins sem depender do código deles.

o que foi resolvido

ATIVOdesde 2021

Listas pendentes encadeadas sobre uma árvore de taxonomia

shipped · 2021

O que ofereceOs visitantes escolhem uma marca, depois um modelo, depois uma geração, e chegam depressa à página certa. Só os níveis necessários carregam, e um caminho escolhido pode ser partilhado como ligação.

Problema: Uma taxonomia pode ter vários níveis de profundidade. Renderizar a árvore inteira de antemão é pesado para catálogos grandes; carregar nível a nível exige saber quando um nível é o último e o que mostrar nesse caso.
Solução: O servidor renderiza um nível por pedido e responde com o select seguinte, um select de artigos ou uma ligação de termo. O navegador mantém os níveis obtidos como nós do DOM e repõe-nos a partir da memória.
Stack: PHP
admin-ajax
JavaScript
Fetch API

Tarefas · 6

Carregar apenas o nível que o visitante abriuget_terms() por pai com hide_empty; o ajax devolve o select seguinte ou uma resposta de folha

get_chain_item() lê o termo pai do pedido e pede a get_categories() os seus filhos não vazios. Se houver filhos, devolve um select; caso contrário, a resposta depende do modo de folha. O front-end analisa o HTML com DOMParser e acrescenta o nó à cadeia.

Decidir o que mostra o fim da cadeiawatch_view escolhe um select de artigos, get_term_link() ou nenhuma saída

No modo 'posts', a folha devolve um select com os artigos do termo, com os permalinks como valores, com limite, ordem e ordenação por chave meta configuráveis. No modo 'terms', devolve o URL do termo e o front-end renderiza um botão. 'none' termina a cadeia em silêncio, que é o modo usado quando a cadeia apenas controla um filtro.

Um pedido para um termo que não tem filhos é desperdícioNo modo terms, cada opção transporta o número de filhos; uma folha abre a ligação diretamente

Quando watch_view é 'terms', generate_tax_select() acrescenta data-child-count (wp_count_terms com o termo como pai) e data-link a cada opção. O front-end verifica a contagem e, se for 0, mostra o botão sem chamar o servidor.

Voltar atrás na cadeia não deve obter de novo os mesmos níveisGuardar em cache os nós select obtidos por term_id; mudar um nível remove todos os seguintes

trigger_taxonomy_select() remove primeiro todos os elementos a seguir ao select alterado e depois procura em this.cache[term_id]. Um nó em cache é voltado a anexar com a seleção limpa; uma resposta de folha em cache recria o botão. Só os termos nunca vistos vão ao servidor, e cada resultado é guardado com os seus dados do pedido, para que os eventos disparem da mesma forma para níveis em cache e novos.

Restaurar um caminho escolhido a partir de uma ligação ou de um shortcodeready_chain lista IDs de termos; o servidor renderiza todos os níveis pré-selecionados numa só passagem

ready_chain vem do shortcode ou do parâmetro GET ready_chain como uma lista de IDs de termos separada por vírgulas; um item que não seja um número simples é lido como ID de artigo. draw_chain_menu() percorre-a, renderizando cada nível com o ID seguinte selecionado e usando-o como pai do seguinte; um item não numérico torna-se o artigo pré-selecionado. Após o carregamento, o front-end acrescenta o botão para o último valor e volta a emitir o evento change para o termo selecionado mais profundo, para que tabelas e filtros ligados assumam o estado.

Limitar o nível superior sem cortar os níveis mais profundosinclude_top aplica-se apenas quando parent é 0; include e exclude aplicam-se em todo o lado

Um site pode querer apenas algumas marcas no topo mas todos os modelos por baixo delas. get_terms() substitui a lista include por include_top apenas para o pedido da raiz. O shortcode verifica também com get_object_taxonomies() que a taxonomia pertence ao tipo de conteúdo antes de renderizar o que quer que seja.

Controlar tabelas e filtros a partir da cadeia

no produto

O que ofereceAs mesmas listas pendentes podem controlar as tabelas de produtos e os filtros de produtos já presentes na página, para que os visitantes restrinjam um catálogo num só sítio.

Problema: A cadeia é muitas vezes uma fachada de navegação para outros plugins na mesma página: uma tabela TableOn ou WOOT, ou um filtro de produtos WOOF. Estes mantêm o seu próprio estado e lógica de redesenho e nada sabem da cadeia.
Solução: Cada seleção dispara um CustomEvent do DOM com os dados do pedido. Pequenos conectores traduzem-no para o filter_data de uma tabela ou para os valores atuais do WOOF, e hooks PHP permitem ao código do site alterar dados e rótulos das opções.
Stack: JavaScript
CustomEvent
Filtros do WordPress

Tarefas · 5

Outros plugins têm de reagir sem acoplamento forteCada alteração dispara um CustomEvent 'taxonomy-chain-menu' com os dados do pedido

cast_event() envia os dados do pedido, o contentor e o novo nó. Os conectores incorporados escutam este evento; qualquer outro script pode fazer o mesmo. As cadeias que pedem um filtro genérico recebem também 'taxonomy-chain-menu-do-filter' com term_id, slug e container.

Filtrar uma tabela TableOn ou WOOT pelo termo selecionado mais profundoO conector substitui o filter_data da tabela por {taxonomy: term_id} e depois redesenha

table_connector() encontra a tabela em DataTable23.tables através de connect_table. Se um nível foi reposto em 'select', percorre os selects do fim para encontrar o mais profundo ainda escolhido. Depois substitui o filter_data da tabela pelo termo selecionado, ou remove a chave da taxonomia quando nada está selecionado, e chama redraw_table(); a lógica de ajax e cache da própria tabela faz o resto.

O WOOF espera slugs de termos e o seu próprio formato de URLEscrever o slug e ready_chain em woof_current_values e submeter a ligação do WOOF

As opções transportam data-slug vindo do servidor. Com do_filter='woof', o handler coloca o slug mais profundo sob a chave da taxonomia de woof_current_values e guarda o caminho completo de IDs como ready_chain, para que a página de resultados do WOOF possa reconstruir a cadeia. Desselecionar tudo remove ambas as chaves antes do envio.

O texto, as imagens e os rótulos das opções têm de vir do código do siteHook taxonomy-chain-menu-option-data por opção; prefixo call_filter_ para rótulos

draw_select() pede ao filtro taxonomy-chain-menu-option-data o texto e a imagem de cada opção, passando o ID do termo ou artigo, o pai e o chain_id. Um rótulo que comece por call_filter_ é resolvido aplicando o filtro com esse nome, pelo que os rótulos podem ser traduzidos ou calculados por página.

As definições do shortcode têm de chegar a cada pedido ajaxAs definições vivem em atributos data-; o JS converte as chaves camelCase de volta para snake_case

draw_chain_menu() imprime todas as definições como atributos data- com escape no contentor, pelo que o servidor não guarda estado por cadeia. prepare_request_data() copia o dataset para o pedido, convertendo os nomes camelCase do dataset para snake_case; sanitize_request_data() converte as chaves para minúsculas e sanitiza cada valor.

Selects estilizados sem perder o comportamento nativo

no produto

O que ofereceAs listas pendentes podem ser estilizadas para combinar com o design do site, mantendo o comportamento padrão de que os formulários e outros plugins dependem.

Problema: Os sites querem listas pendentes estilizadas, mas a lógica da cadeia, os conectores e o tratamento de formulários dependem de elementos select nativos e dos seus eventos change.
Solução: Os selects nativos permanecem como fonte de verdade oculta. Um reflector clona a cadeia para widgets Selectron23 após cada alteração e devolve as escolhas ao select nativo através de um evento personalizado.
Stack: JavaScript
CustomEvent
Clonagem do DOM

Tarefas · 3

Um widget estilizado não deve substituir o select realO TCM_Reflector clona a cadeia ao lado do original oculto após cada alteração

Com select_wrapper='selectron23', o contentor é renderizado oculto e o TCM_Reflector insere um elemento irmão. clone() reconstrói-o a partir dos filhos atuais do contentor, envolvendo cada select clonado num widget Selectron23, e corre após cada mudança de nível, acerto de cache e atualização do loader.

Uma escolha no widget tem de controlar o select realonSelect dispara select-changed; um listener define o valor e executa a lógica

O onSelect do Selectron23 dispara taxonomy-chain-menu-select-changed no select original com o valor e o contentor. append_select_changed_event() verifica o contentor, define o valor e o atributo selected, e chama o mesmo handler que uma alteração nativa, pelo que a cadeia, a cache e os conectores veem um único caminho de código.

Larguras e alturas diferentes por nível a partir de uma única definiçãoListas separadas por barras verticais; o último valor aplica-se a todos os níveis mais profundos

select_width ('300px|250px|20%') e selectron23_max_open_height são divididos por '|' e aplicados por índice cada vez que se acrescenta um nível. A profundidade da cadeia não é conhecida de antemão, pelo que o último valor cobre todos os níveis seguintes.

Números

wordpress.org

Instalações ativas 100+ contador do wordpress.org.
Anos de suporte 5 Desde 25 de fevereiro de 2021, última atualização em 21 de maio de 2026.

Projeto seguinte Botoscope · loja no Telegram