Ecommerce em 2024
O jeito mais moderno de criar um ecommerce
Para começar a fazer as páginas vamos criar dois layouts, um layout que terá o cabeçalho e o rodapé como todo site hoje em dia e mais um layout com tudo em branco.
Você pode criar quantos layouts quiser, desde que siga as regras da documentação do Nuxt.
Salvando algumas imagens necessárias para o projeto
Abra essa imagem, baixe e renomeie para hero.png, depois disso salve dentro da pasta ecommerce-storefront/public.
Agora abra essa logo, baixe e renomeie para logo.svg, depois disso salve também dentro da pasta ecommerce-storefront/public.
Fique à vontade para usar uma outra logo no projeto, encontre logos gratuitas aqui.
Criando o componente de rodapé
Dentro da pasta medusa-storefront/components crie um arquivo chamado Footer.vue e cole o seguinte código:
<script setup lang="ts">
const client = useMedusaClient();
const { product_categories } = await client.productCategories.list();
const { collections } = await client.collections.list();
</script>
<template>
<footer class="bg-zinc-50">
<div class="container py-20 mt-20 grid grid-cols-[repeat(auto-fill,_minmax(280px,_1fr))] gap-4 gap-y-10">
<div>
<img src="/logo.svg" height="20" class="h-[20px] w-auto pr-4" />
</div>
<div class="text-sm space-y-4">
<div class="font-medium">
Categorias
</div>
<div v-for="category in product_categories" :key="category.id">
<nuxt-link :to="`/categorias/${category.id}`" class="hover:underline text-zinc-500 hover:text-zinc-900 transition">
{{ category.name }}
</nuxt-link>
</div>
</div>
<div class="text-sm space-y-4">
<div class="font-medium">
Coleções
</div>
<div v-for="collection in collections" :key="collection.id">
<nuxt-link :to="`/colecoes/${collection.id}`" class="hover:underline text-zinc-500 hover:text-zinc-900 transition">
{{ collection.title }}
</nuxt-link>
</div>
</div>
</div>
</footer>
</template>
Para entender um pouquinho mais, nós só estamos buscando as categorias da nossa loja com a função client.productCategories.list() e as coleções com a função client.collections.list().
Essas funções são do Medusa Client para deixar todas as requisições fortemente tipadas.
Com os dados retornados da api nós estamos estilizando o rodapé com tailwind e fazendo um v-for para listar todas as coleções e categorias da loja.
Criando o layout com cabeçalho e rodapé
Na raiz do projeto medusa-storefront crie uma pasta chamada layouts e dentro dela crie um arquivo default.vue. Dentro desse arquivo cole o seguinte código:
<template>
<main>
<div class="flex items-center justify-center py-3 px-4 fixed top-0 left-0 w-full pointer-events-none z-10">
<div class="rounded-full py-2 px-6 bg-white border border-zinc-200 shadow-sm flex items-center gap-2 pointer-events-auto">
<img src="/logo.svg" height="20" class="h-[20px] w-auto pr-4" />
<nuxt-link to="/" active-class="[&>*]:font-bold">
<Button variant="ghost" size="sm">
Início
</Button>
</nuxt-link>
<nuxt-link to="/categorias" active-class="[&>*]:font-bold">
<Button variant="ghost" size="sm">
Categorias
</Button>
</nuxt-link>
<nuxt-link to="/carrinho" active-class="[&>*]:font-bold">
<Button variant="ghost" size="sm">
Carrinho
</Button>
</nuxt-link>
</div>
</div>
<slot />
<Footer />
</main>
</template>
Nesse código nós adicionamos a parte do cabeçalho que mostra três itens no menu: "Início", "Categorias" e "Carrinho".
Criando o layout em branco
Agora dentro da pasta layouts, crie um arquivo blank.vue e cole o seguinte código:
<template>
<main>
<slot />
</main>
</template>
Esse layout será utilizado para as páginas que não precisam de cabeçalho e rodapé, como a página de checkout.
Atualizando o arquivo raiz do projeto nuxt
Vá no arquivo app.vue dentro da pasta medusa-storefront e atualize com o seguinte código:
<template>
<NuxtLayout class="text-zinc-950 bg-white">
<NuxtPage />
</NuxtLayout>
</template>
Nesse código a gente só preparou o projeto Nuxt para começar a aceitar os arquivos de layout que adicionamos anteriormente.