Avançar para o conteúdo principal

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.

image-1641989081318.png

Em primeiro lugar, identificamos o código deste menu.

image-1641988959134.png

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.

image-1641989431311.png
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.

image-1641989604197.jpg
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:

image-1641989747173.png

As categorias criadas já deverão aparecer no menu drop-down do Header.

2. Carrinho de compras

 

3. Favoritos