> ## Documentation Index
> Fetch the complete documentation index at: https://andcze.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Strona jako kod

> Strona Twojego sklepu to projekt z plikami TSX, CSS i HTML — wersjonowany, budowany i publikowany przez ItemShop.

W ItemShop 3.0 strona, którą widzi gracz, to **projekt z kodem** — tak jak strona zrobiona w generatorze stron, tylko podpięta do Twojego sklepu. Nie musisz programować: zaczynasz od szablonu i zmieniasz go rozmową z AI. Jeśli programujesz — masz pełną kontrolę nad każdym plikiem.

## Trzy drogi do strony

> **[Szablon](https://andcze.mintlify.site/pl/site/templates.md)**
>
> Wybierz gotowy szablon open source (MIT) i zmień logo, kolory, teksty.

> **[AI edytor](https://andcze.mintlify.site/pl/site/ai-editor.md)**
>
> Opisz zmianę słowami. AI edytuje pliki, buduje podgląd, Ty publikujesz.

> **[Własny kod](https://andcze.mintlify.site/pl/site/custom-code.md)**
>
> Wgraj zip, folder albo użyj `itemshop deploy` z terminala.

Drogi można łączyć: wybierasz szablon, poprawiasz go z AI, a potem ściągasz projekt przez [CLI](https://andcze.mintlify.site/pl/site/cli.md) i dalej rozwijasz u siebie.

## Jak to działa

```mermaid theme={null}
%%{init: {'theme':'base','themeVariables':{'primaryColor':'#fbf0ee','primaryBorderColor':'#d0423a','primaryTextColor':'#121212','lineColor':'#8b8b85','fontFamily':'Bricolage Grotesque, sans-serif'}}}%%
flowchart TB
  A[Pliki projektu] -->|zatwierdzenie| B[Rewizja]
  B -->|build| C[Statyczne pliki]
  C -->|wdrożenie| D[Podgląd]
  D -->|Opublikuj| E[Produkcja: Twoja domena]
```

| Pojęcie | Co to jest |
| - | - |
| **Strona (Site)** | Projekt strony sklepu. Jeden sklep ma jedną stronę. |
| **Szkic (draft)** | Robocze zmiany — tu pracuje AI edytor i edytor plików. Nie są widoczne dla graczy. |
| **Rewizja** | Niezmienny zapis wszystkich plików po zatwierdzeniu szkicu. Autor: Ty, AI, upload albo CLI. |
| **Build** | Zamiana rewizji na statyczne pliki (HTML, CSS, JS) w izolowanym środowisku. |
| **Wdrożenie** | Opublikowany build: **podgląd** (prywatny adres) albo **produkcja** (Twoja domena). |

Więcej o budowaniu, adresach podglądu i wycofywaniu zmian: [Build i hosting](https://andcze.mintlify.site/pl/site/build-hosting.md).

## Plik `itemshop.site.json`

W katalogu głównym projektu leży manifest, który mówi ItemShop, jak zbudować stronę:

```json itemshop.site.json theme={null}
{
  "$schema": "https://itemshop.pl/schema/site.json",
  "name": "bento",
  "framework": "vite-react",
  "build": { "command": "npm run build", "output": "dist" },
  "template": { "id": "bento", "version": "1.0.0" }
}
```

| Pole | Znaczenie |
| - | - |
| `framework` | `vite-react` (TSX + CSS, domyślny dla szablonów i AI) albo `static` (czysty HTML/CSS/JS, bez builda). |
| `build.command` | Komenda budowania. Dla `static` pomijana. |
| `build.output` | Katalog z gotowymi plikami po buildzie. |
| `template` | Z jakiego szablonu i wersji powstał projekt (informacyjnie). |

> [!TIP]
>
> Brak manifestu, ale jest `index.html` w katalogu głównym? ItemShop potraktuje projekt jako `static` — zwykła strona HTML zadziała od razu.

## Istniejące sklepy

Sklep zbudowany w konfiguratorze bloków działa bez zmian, dopóki nie opublikujesz pierwszej strony z kodu: do tego czasu graczy obsługuje dotychczasowa strona sklepu. Pierwsza **produkcja** nowej strony przełącza ten sam adres (i Twoją domenę) na projekt z kodem. Zobacz [Migracja z konfiguratora](https://andcze.mintlify.site/pl/site/migration.md).

## Skąd strona bierze dane

Strona działa wyłącznie po stronie przeglądarki — nie ma własnego serwera. Produkty, ceny, metody płatności i widżety pobiera z publicznego [Storefront API](https://andcze.mintlify.site/pl/developers/storefront-api.md) przez `@itemshop/sdk`. Płatność zawsze obsługuje kasa ItemShop: strona tworzy zamówienie i przekierowuje gracza do bramki.

```tsx theme={null}
import { createStorefront } from "@itemshop/sdk";

const sf = createStorefront(); // shopId i adres API z window.__ITEMSHOP__
const { products } = await sf.products.list();
```

> **[Szablony](https://andcze.mintlify.site/pl/site/templates.md)**
>
> Galeria i co możesz zmienić bez kodu.

> **[Limity](https://andcze.mintlify.site/pl/site/limits.md)**
>
> Rozmiary, czas builda, limity AI.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.