Loja
Neste tutorial vamos ver as funcionalidades que podemos adicionar no header relacionadas com uma loja online.
Abra o código HTML do header criado anteriormente.
1. Lista de categorias
De modo a facilitar a navegação para os utilizadores da loja online, podemos colocar no header da página uma lista de categorias produtos existentes na loja.
Para exemplo, vamos utilizar o menu drop-down de Products do template.
Em primeiro lugar, identificamos o código deste menu.
Como será apenas preciso um elemento <li>, podemos apagar os restantes. Vejas agora os passos a seguir:
1. Insira uma quebra de linha acima do elemento <li> e outra abaixo.
2. Abra o modal de inserção de elementos da plataforma.
3. Do lado direito clique em Elementos da Plataforma e, depois, em Categorias.
4. Coloque a tag Inicia o Repetidor acima do elemento <li>
5. Do mesmo modo, utilize o modal de inserção de elementos para colocar por baixo do elemento <li> a tag.
6. Agora, coloque a slug e o título nos campos respetivos do elemento <li>
NOTA: Antes da slug deve colocar a slug da página do produto criada anteriormente. No final, a ligação da página do produto deve estar assim: /nome-da-categoria/slug
No final, o código deverá estar assim:
As categorias criadas já deverão aparecer no menu drop-down do Header.
2. Carrinho de compras
Muitos templates contêm no header um painel que permite ver, de forma rápida, os produtos adicionados ao carrinho. Vejamos como criar esta funcionalidade.
No template que estamos a utilizar, ao passar o cursor por cima no ícone do carrinho no canto superior direito, aparece-nos este painel:
O primeiro passo é identificar o código deste painel.
Vamos alterar primeiro o número de produtos junto do ícone do carrinho.
Queremos que o círculo vermelho e o número apareçam apenas quando existam produtos adicionados.
1. Identificamos a porção do código que corresponde ao ícone e número.
2. Colocamos o cursor imediatamente antes da da <span> e abrimos o modal de inserção de elementos.
3. Clique em Elementos da Plataforma e depois em Plataforma de Vendas.
4. Clique agora em Inicio da condição de itens adicionados - Existe
5. Agora, coloque o cursor imediatamente a seguir ao final da span </span> e através do modal de inserção de elementos, coloque a tag Fim da condição de itens adicionados - Existe
6. Finalmente, selecione o número de produtos que o template mostra no carrinho e substitua por Numero de produtos adicionados
No final, o código deverá estar assim:
No template temos como amostra dois itens no carrinho ( <div class="cart-item"> ). Vamos eliminar um e deixar o outro para servir como estrutura, para que o CMS a utilize para repetir os produtos.