Página de Categoria de Produtos
Uma página de categoria de produtos é um tipo de página que se repete para cada uma das categorias criadas no CMS. Ou seja, caso existam duas categorias na loja online (sapatos e botas), cada uma com os respetivos produtos, não é necessário criar uma página para cada uma delas. É apenas necessário criar uma, visto que a estrutura se irá repetir para cada uma das categorias criadas, mudando apenas a informação contida nas mesmas.
Atenção: Antes de dar início à criação de uma loja online na nossa plataforma, é importante que já tenha as noções de como criar um website básico, nomeadamente a criação de páginas, criação de elementos e a inserção dos mesmos no código HTML. Clique aqui para ver os tutoriais de como criar um website básico.
1. Criar Página de Categorias de Produtos
Para criar uma Página de Categorias de Produtos vá até:
Gestor CMS -> Websites -> Alterar Estrutura e clique no símbolo + para criar uma nova página.
No campo do nome, vamos colocar "Categoria".
Atenção: numa página de categoria de produtos, o nome da página estará presente como um slug no URL da mesma. Ou seja, se colocar o nome "categoria" e for criada uma categoria "sapatos" o URL será o seguinte:
www.aminhalojaonline.pt/categoria/sapatos
Selecione o tipo de página Página de Categorias de Produtos.
O campo Registos por Página serve para selecionar quantos produtos serão apresentados por página. O ideal será escolher um múltiplo daqueles apresentados no template por linha.
Como vamos selecionar esta página do template, e ela está organizada com três produtos por linha, vamos colocar 18 registos por página.
É possível criar um sistema de paginação, que permita ao utilizador final navegar entre as páginas páginas dos produtos. Veremos isso mais tarde.
Clique em "Guardar".
2. Inserir elementosuma lista de produtos categoria na página
Abra o editor de código da página criada.
Nota: em primeiro lugar, vamos colocar o header e o footer. Selecione o código referente ao header e, através do modal de inserção de elementos, coloque a tag do CMS [include_header]. No final da página, faça o mesmo, mas agora insira a tag [include_footer].
Vamos proceder, então, à colocação dos elementos específicos da página de categoria.
Inicialmente, queremos fazer as modificações necessárias no código para que os produtos introduzidos apareçam corretamente nas páginas de categorias respetivas.
Abra o editor de HTML da página de categoria e identifique o código referente aos produtos.
No caso do template que estamos a utilizar o caso é o que está abaixo, ou seja, tem início na linha 279 e termina na linha 322.
Apenas precisamos do código referente a um dos produtos presentes no template, visto que os restantes respeitam a mesma estrutura. Regra geral, podemos apagar do código os restantes produtos.
Vamos introduzir uma quebra de linha antes da linha 279 e com o cursor na linha em branco abra o modal de inserção de elementos.
Este terá agora um novo botão. O de Elementos de Páginas de Listagem.
Clique no botão.
Este abrirá uma lista de tags relacionadas com as Categorias, Produtos, Produtos mais vistos e Produtos mais vendidos.
Da mesma forma, inserimos uma quebra de linha abaixo da linha 322 e através no modal de inserção de elementos, colocamos agora a tag do CMS Finaliza o Repetidor de lista de Produtos.
O código deverá estar agora deste modo (colapsamos algumas das <div> para que facilitasse a visualização:
Vamos agora colocar as restantes informações relativas ao produto.