Интернет-магазин на Astro: E-commerce гайд 2026

shop/
├── src/
│   ├── content/
│   │   └── products/          # MDX-карточки товаров
│   ├── stores/
│   │   └── cart.ts            # Nanostores — корзина
│   ├── components/
│   │   ├── ProductCard.astro
│   │   ├── CartButton.tsx     # Кнопка с кол-вом (Preact-остров)
│   │   ├── CartDrawer.tsx     # Корзина-шторка (Preact-остров)
│   │   └── AddToCart.tsx      # Кнопка "В корзину" (Preact-остров)
│   └── pages/
│       ├── index.astro         # Главная
│       ├── catalog/
│       │   ├── index.astro    # Каталог с фильтрами
│       │   └── [slug].astro   # Страница товара
│       └── checkout.astro     # Оформление заказа

// src/content.config.ts
const products = defineCollection({
  loader: glob({ pattern: '**/*.mdx', base: './src/content/products' }),
  schema: ({ image }) =>
    z.object({
      title: z.string(),
      description: z.string(),
      price: z.number(), // В копейках/центах
      comparePrice: z.number().optional(), // Зачёркнутая цена
      sku: z.string(), // Артикул
      category: z.string(),
      tags: z.array(z.string()).default([]),
      images: z.array(image()), // Галерея
      inStock: z.boolean().default(true),
      featured: z.boolean().default(false),
      stripeProductId: z.string().optional(), // Stripe Product ID
    }),
});

---
title: 'Кресло-мешок Comfort Pro XL'
description: 'Мягкое кресло из экокожи. 120 кг нагрузки, чехол стирается'
price: 590000 # 5900 руб в копейках
comparePrice: 790000
sku: 'CHAIR-CP-XL'
category: 'Мебель'
tags: ['Кресла', 'Домашний офис', 'XL']
inStock: true
featured: true
stripeProductId: 'prod_xxxxx'
---

## О товаре

Кресло-мешок **Comfort Pro XL** создано для тех, кто проводит за работой...

## Характеристики

| Параметр | Значение     |
| -------- | ------------ |
| Нагрузка | до 120 кг    |
| Размер   | 100×80×80 см |
| Материал | Экокожа      |

npm install nanostores @nanostores/preact

// src/stores/cart.ts
import { atom, computed } from 'nanostores';

export interface CartItem {
  sku: string;
  title: string;
  price: number;
  quantity: number;
  image?: string;
}

// Основное хранилище
export const cartItems = atom<CartItem[]>([]);

// Производные значения
export const cartCount = computed(cartItems, (items) =>
  items.reduce((sum, item) => sum + item.quantity, 0),
);

export const cartTotal = computed(cartItems, (items) =>
  items.reduce((sum, item) => sum + item.price * item.quantity, 0),
);

// Действия
export function addToCart(item: Omit<CartItem, 'quantity'>) {
  const current = cartItems.get();
  const existing = current.find((i) => i.sku === item.sku);
  if (existing) {
    cartItems.set(
      current.map((i) => (i.sku === item.sku ? { ...i, quantity: i.quantity + 1 } : i)),
    );
  } else {
    cartItems.set([...current, { ...item, quantity: 1 }]);
  }
  // Сохранение в localStorage
  localStorage.setItem('cart', JSON.stringify(cartItems.get()));
}

export function removeFromCart(sku: string) {
  cartItems.set(cartItems.get().filter((i) => i.sku !== sku));
}

// Восстановление корзины при загрузке
if (typeof window !== 'undefined') {
  const saved = localStorage.getItem('cart');
  if (saved) cartItems.set(JSON.parse(saved));
}

// src/components/AddToCart.tsx
import { addToCart } from '../stores/cart';

interface Props {
  sku: string;
  title: string;
  price: number;
  image?: string;
}

export default function AddToCart({ sku, title, price, image }: Props) {
  return (
    <button
      class="btn btn--primary"
      onClick={() => addToCart({ sku, title, price, image })}
    >
      В корзину
    </button>
  );
}

---
import AddToCart from '../../components/AddToCart.tsx';
const { product } = Astro.props;
---

<AddToCart
  client:load
  sku={product.data.sku}
  title={product.data.title}
  price={product.data.price}
/>

// src/pages/api/checkout.ts
import Stripe from 'stripe';

const stripe = new Stripe(import.meta.env.STRIPE_SECRET_KEY);

export async function POST({ request }) {
  const { items } = await request.json();

  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: items.map((item) => ({
      price_data: {
        currency: 'rub',
        product_data: { name: item.title },
        unit_amount: item.price,
      },
      quantity: item.quantity,
    })),
    mode: 'payment',
    success_url: `${import.meta.env.PUBLIC_SITE_URL}/success`,
    cancel_url: `${import.meta.env.PUBLIC_SITE_URL}/checkout`,
  });

  return new Response(JSON.stringify({ url: session.url }));
}

// src/pages/api/yukassa-checkout.ts
// Аналогично через API ЮKassa — см. официальную документацию
// https://yookassa.ru/developers/api

---
const productSchema = {
  '@context': 'https://schema.org',
  '@type': 'Product',
  name: product.data.title,
  description: product.data.description,
  sku: product.data.sku,
  offers: {
    '@type': 'Offer',
    price: (product.data.price / 100).toFixed(2),
    priceCurrency: 'RUB',
    availability: product.data.inStock
      ? 'https://schema.org/InStock'
      : 'https://schema.org/OutOfStock',
    url: Astro.url.href,
  },
};
---

<script type="application/ld+json" set:html={JSON.stringify(productSchema)} />