Живой просмотр

Страницы

Каждая страница — настоящий интерактивный предпросмотр, корзина общая для всех.

Что внутри

• Редакционный дизайн: serif-шрифт, прямые углы, терракотовый акцент
• Светлая тема по умолчанию и тёмная с переключателем
• Отдельная страница корзины с подарочной запиской
• Быстрый выбор размера в сетке + горизонтальные фильтры
• Лукбук с интерактивными точками
• 10 секций в разделе «Секции → E-commerce»

Установка и использование

1. Установите пакет

   bash Copy

   npm install astro-component-kit

   npm install astro-component-kit

2. Создайте по странице Astro для каждой страницы шаблона

   src/pages/index.astro

   astro Copy

   ---
   import { EditorialHomePage } from 'astro-component-kit/templates/ecommerce-editorial';
   ---
   
   <EditorialHomePage theme="light" />

   --- import { EditorialHomePage } from 'astro-component-kit/templates/ecommerce-editorial'; --- <EditorialHomePage theme="light" />

   src/pages/shop.astro

   astro Copy

   ---
   import { EditorialShopPage } from 'astro-component-kit/templates/ecommerce-editorial';
   ---
   
   <EditorialShopPage />

   --- import { EditorialShopPage } from 'astro-component-kit/templates/ecommerce-editorial'; --- <EditorialShopPage />

   src/pages/product/[slug].astro

   astro Copy

   ---
   import { EditorialProductPage, formaStore } from 'astro-component-kit/templates/ecommerce-editorial';
   
   export function getStaticPaths() {
     return formaStore.products.map((p) => ({ params: { slug: p.slug } }));
   }
   ---
   
   <EditorialProductPage slug={Astro.params.slug} />

   --- import { EditorialProductPage, formaStore } from 'astro-component-kit/templates/ecommerce-editorial'; export function getStaticPaths() { return formaStore.products.map((p) => ({ params: { slug: p.slug } })); } --- <EditorialProductPage slug={Astro.params.slug} />

   src/pages/bag.astro

   astro Copy

   ---
   import { EditorialBagPage } from 'astro-component-kit/templates/ecommerce-editorial';
   ---
   
   <EditorialBagPage />

   --- import { EditorialBagPage } from 'astro-component-kit/templates/ecommerce-editorial'; --- <EditorialBagPage />

   src/pages/checkout.astro

   astro Copy

   ---
   import { EditorialCheckoutPage } from 'astro-component-kit/templates/ecommerce-editorial';
   ---
   
   <EditorialCheckoutPage />

   --- import { EditorialCheckoutPage } from 'astro-component-kit/templates/ecommerce-editorial'; --- <EditorialCheckoutPage />

3. Подключите свой каталог, валюту и маршруты

   Возьмите демо-магазин за основу и замените нужное. Товары принимают реальное фото или одну из 16 встроенных иллюстраций.

   astro Copy

   ---
   // src/pages/index.astro — same store + routes on every page
   import { EditorialHomePage, formaStore, type EditorialStore } from 'astro-component-kit/templates/ecommerce-editorial';
   
   const store: EditorialStore = {
     ...formaStore,
     name: 'Atelier',
     currency: 'USD',
     locale: 'en-US',
     cartKey: 'atelier-bag',
   };
   ---
   
   <EditorialHomePage
     store={store}
     theme="auto"
     routes={{ home: '/', shop: '/shop/', product: '/product/', bag: '/bag/', checkout: '/checkout/' }}
   />

   --- // src/pages/index.astro — same store + routes on every page import { EditorialHomePage, formaStore, type EditorialStore } from 'astro-component-kit/templates/ecommerce-editorial'; const store: EditorialStore = { ...formaStore, name: 'Atelier', currency: 'USD', locale: 'en-US', cartKey: 'atelier-bag', }; --- <EditorialHomePage store={store} theme="auto" routes={{ home: '/', shop: '/shop/', product: '/product/', bag: '/bag/', checkout: '/checkout/' }} />

Новые секции 10

Полноширинные блоки шаблона из раздела «Секции». Откройте любую, чтобы увидеть её отдельно вместе с кодом.

Новые e-commerce компоненты 3

Созданы для этого шаблона и доступны в библиотеке по отдельности.

Повторно используемые компоненты

Существующие компоненты, из которых собран шаблон.

• 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