Tudo sobre programação! Ou quase tudo!!!

Bem, em continuação do artigo anterior onde mostrei como preparar um array para a construção de uma árvore de categorias, coloco agora outra parte onde vamos, usando esse array, colocar todas as categorias na página, e nos seus devidos lugares.

Não vou usar qualquer tipo de CSS neste momento para poder facilitar a compreensão da função, e, depois cada um poder usar o CSS como entender.

Então cá vai.

Depois de criado o array com todas as categorias e respectivas sub-categorias, apenas é necessário criar um ‘ciclo for’ de forma a colocar tudo na pagina.

Sendo  que o array criado anteriormente era:

<?
$tree=tree_to_folders($cat_array, 0, "parent", "name", SORT_ASC);
?>

Pegamos agora neste array e fazemos o ciclo de impressão:

/*Função que vai recorrer o array para imprimir na pagina as categorias*/
function recorre($tree) {
echo "<ul>";
/*procura e recorre os nomes no nivel actual */

foreach ($tree as $id => $subarray) {
echo '<li>'.$subarray["name"];
/* Verifica se esta categoria tem subcategorias, se sim, chama novamente a função*/

if (sizeof($subarray["folders"])>=1) {
recorre($subarray["folders"]);
}
echo "</li>";
}
echo "</ul>";
}
/*chamamos a função para que inicie o processo*/
recorre($tree);

Penso que ao colocar assim, sem CSS será bastante simples de entender o resultado final, que seria por exemplo:

• Categoria 1
  • Categoria 1.1
  • Categoria 1.2
    • Categoria 1.2.1
    • Categoria 1.2.2
  • Categoria 1.3
• Catgoria 2
  • Categoria 2.1
• Categoria 3

E por ai em diante.

Sem o CSS este será o aspecto real que vai aparecer na página, agora é uma questão de se aplicar alum CSS e algum JavaScript de forma a tornar a árvore mais bonita e apenas estar visivel inicialmente as categorias 0, ou seja, as categorias Pai e, mediante vamos clicando em cada uma mostrar ou ocultar as filhas.

Esta forma de fazer a árvore de categorias, como mencionei antes, tem como objectivo, que no código fonte da página já estejam lá todas as categorias, o que para os motores de busca é optimo porque teremos em vez de 10 categorias (as principais), teremos todas as categorias listadas na página, apenas ocultas por CSS.