Loja on-line - lista de produtos

Até agora você criou um layout que já tem um link para a lista de produtos ("/produtos") mas essa página ainda não está criada e se você acessar esse link nesse momento obterá um resultado como o abaixo:

Acesse http://localhost:5000/produtos

Veja que o layout até foi exibido, mas o a página que seria renderizada no lugar da tag <slot /> foi um erro 404, ou seja, a página não foi encontrada. Isso é esperado já que ela não existe ainda.

Para criar uma página que representa a rota "/produtos" é super fácil, vamos ver como.

Poderíamos simplesmente criar um arquivo chamado produtos.svelte dentro de src/routes, porém vamos fazer de uma segunda maneira:

Primeiro, crie uma PASTA chamada src/routes/produtos que será responsável por todas as rotas que iniciam com "/produtos", mas não temos nenhum arquivo dentro dela ainda.

Iremos agora criar um arquivo chamado "index.svelte" dentro da pasta src/routes/produtos. Esse arquivo, por ter o nome "index.svelte" será a página "padrão" da pasta, ou seja, se a rota "/produtos" for acessada, é ele que será renderizado.

Crie o arquivo chamado **src/routes/produtos/index.svelte" que mencionamos e coloque o seguinte conteúdo nele:

<script>
  let products = [];

  async function loadProducts() {
    const res = await fetch('http://localhost:3000/api/products/search');
    if (res.ok) {
      const json = await res.json()
      products = json.products;
    } else {
      products = [];
    }
  }
  loadProducts();

</script>

<style>
  .produto {
    border: 2px solid #ddd;
    margin: 10px;
    height: 100px;
    display: flex;
  }
  .produto .info {
    display: flex;
    flex-direction: column;
    margin: 10px;
  }
  .produto .detalhe {
    margin-left: auto;
    margin-top: 20px;
  }
  .produto .detalhe a {
    background-color: cadetblue;
    color: white;
    font-weight: bold;
    text-decoration: none;
    padding: 5px;
  }

</style>

<h1>Produtos</h1>

<div>
  {#each products as product}
    <div class="produto">
      <div class="image">
        <img width="100px" alt="imagem do produto" src="http://localhost:3000/images/{product.photo}" />  
      </div>
      <div class="info">
        <div class="nome">
          {product.name}
        </div>
        <div class="descricao">
          {product.description}
        </div>
        <div class="categoria">
          Categoria:
          {product.categoryName || 'Sem Categoria'}<br/>
        </div>
      </div>

      <div class="detalhe">
        <a href="/produtos/{product.id}">Detalhar produto</a>
      </div>
    </div>
  {/each}

</div>

Esse arquivo lista os produtos da loja, buscando os dados na API do projeto admin. Então é importante você tenha o projeto admin rodando na sua máquina (lembre que na porta 3000) para que a API esteja disponível para a loja on-line.

Ao salvar o arquivo src/routes/produtos/index.svelte que criamos, e com a API rodando como mencionado, você deve acessar http://localhost:5000/produtos e obter um resultado como o da imagem abaixo:

Legal né? Temos um projeto administrativo (admin) com uma API servindo conteúdo para a nossa loja on-line que os exibe em um projeto diferente utilizando outras tecnologias.

O conteúdo do arquivo src/routes/produtos/index.svelte é composto por três partes. A primeira é um script que tem uma única variável de estado chamada producs, que é iniciada com um array vazio e uma função chamada "loadProducts()" que carrega a lista de produtos utilizando o fetch da nossa api no endereço ''http://localhost:3000/api/products/search'' e colocar o resultado (res.products) no nosso array declarado.

A segunda parte é simplesmente um estilo mínimo para página na tab <style>.

A terceira parte é um HTML simples utilizando a linguagem de template do Svelte para exibir o conteúdo do array "products" usando o comando {#each products as product} e a cada iteração ele cria um block de HTML com a imagem, nome, descrição e categoria do produto, além de um link para detalhar o produto por id: <a href="/produtos/{product.id}>Detalhar produto</a>