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

Страницы

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

Что внутри

• Сохраняемая корзина с панелью и живым счётчиком
• Мгновенные фильтры: категория, цена, цвет, рейтинг, наличие
• Оформление заказа с доставкой, налогом и промокодами
• Без runtime-зависимостей, WCAG AA, mobile-first
• Иллюстрации товаров в комплекте — изображения не нужны
• Светлая и тёмная тема с переключателем
• Живые уведомления: корзина, обратный отсчёт, малый остаток и недавние покупки

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

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

   bash Copy

   npm install astro-component-kit

   npm install astro-component-kit

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

   src/pages/index.astro

   astro Copy

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

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

   src/pages/shop.astro

   astro Copy

   ---
   import { StoreCategoryPage } from 'astro-component-kit/templates/ecommerce';
   ---
   
   <!-- Category links use /shop/?category=audio -->
   <StoreCategoryPage />

   --- import { StoreCategoryPage } from 'astro-component-kit/templates/ecommerce'; --- <!-- Category links use /shop/?category=audio --> <StoreCategoryPage />

   src/pages/product/[slug].astro

   astro Copy

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

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

   src/pages/checkout.astro

   astro Copy

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

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

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

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

   astro Copy

   ---
   // src/pages/index.astro — same store + routes on every page
   import { StoreHomePage, demoStore, type StoreConfig } from 'astro-component-kit/templates/ecommerce';
   
   const store: StoreConfig = {
     ...demoStore,
     name: 'My Shop',
     currency: 'EUR',
     locale: 'es-ES',
     cartKey: 'my-shop-cart',
     products: [
       {
         slug: 'linen-shirt',
         name: 'Linen Shirt',
         price: 59,
         category: 'apparel',
         image: '/products/linen-shirt.webp', // or icon: 'shirt'
         sizes: ['S', 'M', 'L'],
         rating: 4.7,
         reviews: 40,
       },
     ],
   };
   ---
   
   <StoreHomePage store={store} routes={{ home: '/', shop: '/shop/', product: '/product/', checkout: '/checkout/' }} />

   --- // src/pages/index.astro — same store + routes on every page import { StoreHomePage, demoStore, type StoreConfig } from 'astro-component-kit/templates/ecommerce'; const store: StoreConfig = { ...demoStore, name: 'My Shop', currency: 'EUR', locale: 'es-ES', cartKey: 'my-shop-cart', products: [ { slug: 'linen-shirt', name: 'Linen Shirt', price: 59, category: 'apparel', image: '/products/linen-shirt.webp', // or icon: 'shirt' sizes: ['S', 'M', 'L'], rating: 4.7, reviews: 40, }, ], }; --- <StoreHomePage store={store} routes={{ home: '/', shop: '/shop/', product: '/product/', checkout: '/checkout/' }} />

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

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

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

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

• Badge
• Numeric Stepper
• Animated Input
• Modern Select
• Custom Radio Group
• Success Checkmark
• Step Breadcrumb Bar
• Footer Mega Section
• Logo Cloud Section
• CTA Newsletter Section