Loja on-line - Detalhar produto

Por enquanto se você clicar em "Detalhar produto" irá se deparar com uma mensagem de erro 404 pois a rota "/produto/ID_DO_PRODUTO" ainda não existe. Essa rota será uma rota dinâmica, ou seja, o ID_DO_PRODUTO pode mudar, mas exibiremos a mesma página sempre, porém com um parâmetro que será o ID do produto para cada visita.

Para se criar essa rota dinâmica no SvelteKit basta criar um arquivo chamado src/routes/produtos/[id].svelte (o nome do arquivo é esse mesmo, com esses colchetes: "[id].svelte") com o seguinte conteúdo:

<script>
  import {page} from '$app/stores';
  const productId = $page.params.id;
  let product;
  async function loadProduct() {
    const res = await fetch(`http://localhost:3000/api/products/${productId}`);
    if (res.ok) {
      const json = await res.json();;
      product = json.product;
    }
  }

  loadProduct();

</script>

<a href="/produtos">Voltar</a>

{#if product}
  Nome: {product.name}

  {product.name}<br/>
  {product.description}<br/>
  <img width="100px" alt="imagem do produto" src="http://localhost:3000/images/{product.photo}" />
  {product.categoryName || 'Sem Categoria'}<br/>
  Link para Adicionar no carrinho não implementado ainda

{/if}

Você deve obter um resultado similar a esse:

Repare que no exemplo da imagem estamos visitando http://localhost:5000/produtos/4, ou seja, visitando o produto com id=4. No seu banco de dados esse link pode ser diferente, com outro id, dependendo do produto que você clicar no link de detalhar, mas o resultado deve ser similar, mudando somente o conteúdo, claro.

O arquivo "[id].svelte" é bem simples, tem um script com uma variável de estado chamada productId, que é inicializado com o ID do produto passado como parâmetro da rota dinâmica. Esse ID é obtido através de uma store especiao do SvetlteKit chamada "page".

Stores no Svelte e no SvelteKit são objetos especiais que guardam dados que podem ser compartilhados entre componentes e páginas.

Veja mais sobre stores no Svelte em: https://svelte.dev/docs#svelte_store

Veja mais sobre as stores que o SvelteKit já traz prontas em: https://kit.svelte.dev/docs#modules-$app-stores

A store "page" é uma uma store especial do SvelteKit onde você pode acessar informações como: host, path, params e query do requisição atual para a página.

Para acessar valores de stores é necessário usar o "$" na frente do nome da store, a não ser que ela esteja sendo usada dentro da função "load" que é um recurso do SvelteKit que não estaremos usando nessa aula, mas que você pode aprender mais na documentação já mencionada.

Então em resumo para se obter o id do produto nessa nossa página basta importar a store "page" com o comando import {page} from '$app/stores'; e depois pegar o parâmetro "id" e colocar em uma variável com o comando const productId = $page.params.id;

A outra variável que existe nessa página é "product" que guardará o objeto com o produto que vem da API, mas que na sua declaração "let product;" não tem nada ainda.

Existe também uma função chamada loadProduct() que carrega o produto com o ID obtido do parâmetro da página (exemplo /produto/4 torna o $page.params.id igual 4).

E mais abaixo ele executa loadProduct(); logo depois de sua declaração, já iniciando o processo de se obter o produto da api com a função fetch.

A parte do HTML da página iniciar verificando se o produto já está definido com o comando {#if product} e, caso esteja, é exibido um HTML utilizando a linguagem de template do Svelte com o nome, descrição, categoria e imagem do produto.

O interessante dessa abordagem é que assim que a página é exibida o produto é indefinido e nenhum conteúdo é criado, mas assim que os dados retornam da API, e produto é definido no comando "product = json.product;" e o Svelte reage, exibindo os dados do produto.

Repare que existe no HTML um espaço para um botão de adicionar no carrinho, mas iremos criar esse botão somente na próxima aula.

Existe nessa página também um link para "Voltar" para a lista de produtos.