apps/storefront-template

Del clone al storefront
en 1 día

Skeleton Next.js 15 consumiendo las 8 libs. Fork, configure 3 env vars, personalice logo + color — está al aire.

Empezar → Quiero white-label

Qué viene dentro

Todo lo que una tienda real necesita, listo para personalizar.

Home

Hero carousel + featured products + CTA

Listado con filtros facetados

Filtros por categoría, brand, precio, tag

Detalle de producto

Galería, variantes, precio por lista, add to cart

Carrito persistente

UUID + expiry, sync con Odoo cuando logueado

Wishlist completa

FAB, drawer, badge en header, sync logueado

Auth Supabase

Login email/contraseña + social, recuperación, perfil

Checkout completo

Direcciones, envíos, métodos de pago, NF-e

Dashboard cliente

Pedidos, descargas, direcciones, datos personales

Getting started

5 pasos del clone a la personalización.

1

Clone e instale

Fork el monorepo, instale dependencias con pnpm. Todo listo para typecheck y tests verdes.

git clone git@github.com:kmee/k-shop-libs.git
cd k-shop-libs
pnpm install
pnpm typecheck    # verde
pnpm test         # verde
2

Configure el template

Edite .env.local con URLs de su Odoo, Elasticsearch y Supabase. Sin secreto, son 3 backends.

# Odoo / Shopinvader
NEXT_PUBLIC_ODOO_BASE_URL=https://shop.example.com/shop

# Elasticsearch (server-side)
ELASTICSEARCH_URL=https://elastic.example.com
ELASTICSEARCH_API_KEY=YOUR-KEY
ELASTICSEARCH_PRODUCT_INDEX=products

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://YOUR.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR-ANON-KEY
3

Suba el dev server

Hero carousel default, listado de featured products de su Elasticsearch, header con search/wishlist/cart, footer.

pnpm --filter storefront-template dev
# → http://localhost:3000
4

Personalice el branding

Logo, colores vía tokens HSL, footer. Toda la UI sigue automáticamente.

/* app/globals.css */
@import "@kmee/shop-ui/tokens.css";

@layer base {
  :root {
    --primary: 25 100% 50%;          /* su color */
    --primary-foreground: 0 0% 100%;
    --radius: 0.75rem;
  }
}
5

Personalice páginas y flujos

Sobrescriba páginas que necesite. Agregue nuevos componentes consumiendo los providers del shop-react.

// app/producto-customizado/page.tsx
"use client"
import { useCart } from "@kmee/shop-react"
import { ProductCard } from "@kmee/shop-ui"

export default function Page() {
  const { addToCart } = useCart()
  // ...
}

Cuán profundo se puede personalizar

Del branding superficial al adapter customizado.

Branding visual

1 día

Colores, fuente, radio, logo, footer. Sin tocar código TypeScript — solo CSS vars.

Contenido de las páginas

2–5 días

Textos, imágenes, banners del hero, links del footer, FAQ. JSX directo, fácil de modificar.

Nuevos flujos de checkout

1–4 semanas

Cotización B2B, aprobación por jerarquía, pago customizado. Componga con providers existentes.

Integración con gateway/ERP terceiro

1–3 semanas

Adapter customizado enchufando como subclass de OdooHttpClient o ProductService.

¿Quiere un template white-label customizado?

KMEE entrega el template ya con su identidad visual, flujos B2B/B2C ajustados e integración con su Odoo. Lo recibe listo para deploy.

Volver al K-Shop → Solicitar white-label