Ecommerce em 2024

Nessa aula eu vou ensinar pra vocês a criar a base das páginas de categorias e coleções mas vou deixar elas em branco, então fica de desafio vocês fazerem o design, filtros e amostra de produtos do zero.

Veja algumas inspirações para criar o design dessa página de categoria no site Tailwind UI.

Explicando de forma rápida, uma categoria é um grupo de produtos que são a mesma coisa (exemplo: tênis, camisetas, jaquetas). Uma uma coleção é um grupo de produtos que fazem parte do mesmo conjunto (exemplo: coleção de verão, coleção gamer, etc).

Criando as páginas de coleção e categoria em branco

Dentro da pasta pages vamos criar uma pasta chamada categorias e outra pasta chamada colecoes.

Dentro de cada pasta vamos criar um arquivo chamado index.vue que vai ser a página que mostra todas as categorias/coleções. E outro arquivo chamado [...id].vue para mostrar todos os produtos de uma categoria/coleção específica.

Dentro dos arquivos categorias/index.vue e colecoes/index.vue cole o seguinte código:

<script setup lang="ts">
// integre aqui com a api de categorias/colecoes
// api de categorias: https://docs.medusajs.com/api/store#product-categories_getproductcategories
// api de colecoes: https://docs.medusajs.com/api/store#product-collections_getcollections
</script>

<template>
  Categorias / Coleções
  <div>
    Essa é uma página que deve mostrar todas as categorias/coleções da loja disponíveis
  </div>
</template>

Agora dentro dos arquivos categorias/[...id].vue e colecoes/[...id].vue cole o seguinte código:

<template>
  <div>
    ID da categoria: {{ $route.params.id }}
  </div>
</template>

Para te ajudar a integrar com a api do medusajs e mostrar as categorias e coleções da sua loja, entre nesse link aqui para ver como listar as categorias e nesse link aqui para ver como listar as coleções.