Vista previa en vivo

Páginas

Cada página es una vista previa real e interactiva: el carrito se comparte entre todas.

Qué incluye

• Diseño editorial: tipografía serif, esquinas rectas y acento terracota
• Modo claro por defecto y modo oscuro con selector
• Página de bolsa con nota de regalo y progreso a envío gratis
• Añadir tallas desde la cuadrícula + barra de filtros horizontal
• Lookbook comprable con puntos interactivos
• 10 secciones reutilizables en Secciones → E-commerce

Instalar y usar

1. Instala el paquete

   bashCopy

   npm install react-component-kit-ui

2. Crea una ruta por cada página de la plantilla

   app/page.tsx

   tsxCopy

   import { EditorialHomePage } from 'react-component-kit-ui/templates/ecommerce-editorial';
   
   export default function Page() {
     return <EditorialHomePage theme="light" />;
   }

   app/shop/page.tsx

   tsxCopy

   import { EditorialShopPage } from 'react-component-kit-ui/templates/ecommerce-editorial';
   
   export default function Page() {
     return <EditorialShopPage />;
   }

   app/product/[slug]/page.tsx

   tsxCopy

   import { EditorialProductPage, formaStore } from 'react-component-kit-ui/templates/ecommerce-editorial';
   
   export const generateStaticParams = () => formaStore.products.map((p) => ({ slug: p.slug }));
   
   export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
     const { slug } = await params;
     return <EditorialProductPage slug={slug} />;
   }

   app/bag/page.tsx

   tsxCopy

   import { EditorialBagPage } from 'react-component-kit-ui/templates/ecommerce-editorial';
   
   export default function Page() {
     return <EditorialBagPage />;
   }

   app/checkout/page.tsx

   tsxCopy

   import { EditorialCheckoutPage } from 'react-component-kit-ui/templates/ecommerce-editorial';
   
   export default function Page() {
     return <EditorialCheckoutPage />;
   }

3. Usa tu propio catálogo, moneda y rutas

   Parte de la tienda demo y reemplaza lo que necesites. Los productos aceptan una imagen real o una de las 16 ilustraciones incluidas.

   tsxCopy

   import { EditorialHomePage, formaStore, type EditorialStore } from 'react-component-kit-ui/templates/ecommerce-editorial';
   
   const store: EditorialStore = {
     ...formaStore,
     name: 'Atelier',
     currency: 'USD',
     locale: 'en-US',
     cartKey: 'atelier-bag',
   };
   
   export default function Page() {
     return <EditorialHomePage store={store} theme="auto" routes={{ home: '/', shop: '/shop/', product: '/product/', bag: '/bag/', checkout: '/checkout/' }} />;
   }

Secciones nuevas 10

Bloques a todo el ancho de esta plantilla, disponibles en Secciones. Abre cualquiera para verla en su página con el código.

Componentes e-commerce nuevos 3

Creados para esta plantilla y disponibles por separado en la librería.

Componentes de la librería reutilizados

Componentes existentes con los que se monta la plantilla.

• Cart Store
• Cart Toast
• Product Media
• Product Rating
• Variant Picker
• Stock Indicator
• Checkout Form
• Order Summary
• Animated Input
• Modern Select
• Custom Radio Group
• Success Checkmark
• Badge