Adicionar produto no carrinho

Para adicionar produtos no carrinho de compras o arquivo **src/routes/produtos/[id].svelte" foi alterado e ficou com o seguinte conteúdo:

<script>
  import {page} from '$app/stores';
  import { carrinho } from '../../stores/carrinho';
  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;
    }
  }
  async function adicionarCarrinho(product) {
    // criando um novo carrinho com os valores antigos adicionados do novo producID
    $carrinho = [...$carrinho, product];
    alert('Adicionado ao carrinho com sucesso!');
  }

  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/>
  <button
    on:click={() => adicionarCarrinho(product)}
  >Adicionar no carrinho</button>

{/if}

Repare que foi importado a store carrinho:

import { carrinho } from '../../stores/carrinho';

E que a função adicionarCarrinho(product) recebe um produto e adiciona na store do carrinho com o comando:

$carrinho = [...$carrinho, product];

Simples assim. Esse comando altera a store do carrinho adicionando mais um produto no array e o menu da loja, que está implementado no layout e mostra o total de itens do carrinho, já deve reagir e exibir o novo total caso for adicionado um produto novo nessa store.

Repare que nessa página também foi adicionado um botão que chama a função adicionarCarrinho passando o produto que está sendo visualizado:

<button
    on:click={() => adicionarCarrinho(product)}
  >Adicionar no carrinho</button>

O resultado da página de detalhar produto (/produto/1 por exemplo) deve ficar assim quando se pressiona o botão "Adicionar no carrinho":

Logo depois a contagem de itens no carrinho deve mudar para "1" no menu, assim: