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