# Sablonfájlok

> A CheckoutWC sablonjainak mappaszerkezete, a sablonfájlok szerepe, felülírásuk a témában és az eszközök lefordítása.

A CheckoutWC sablonjai a bővítmény `templates` mappájában vannak, sablononként egy-egy almappában.

```text
templates/
  sablon-neve/
    assets/
    build/
    src/
    content.php
    footer.php
    header.php
    screenshot.png
    style.css   (csak a név és a képességek megadására szolgál, ne tegyél bele stílust)
```

## A sablon fájljai

| Fájl | Mit tartalmaz |
| --- | --- |
| `content.php` | A pénztároldal sablonjának nagy része: minden, ami a fejléc (lényegében a címsor) és a lábléc (jogi szöveg) között van. |
| `header.php` | A fejléc: az oldal neve vagy logója. |
| `footer.php` | A lábléc: a szerzői jogi szöveg és a beállításokban megadott egyedi szöveg. |

## A mappák

- **`assets/`**: statikus fájlok, például képek.
- **`src/`**: a sablon eszközeinek forrása: TypeScript és Sass fájlok.
- **`build/`**: a lefordított eszközök (CSS, JS stb.).

## Sablonfájlok szerkesztése

A sablonfájlokat soha ne szerkeszd közvetlenül, mert a bővítmény minden frissítése lecseréli őket. Felülírni a témádban tudod őket:

1. Hozz létre egy `checkout-wc` nevű mappát a témádban vagy a gyermektémádban.
2. Másold bele a módosítani kívánt sablont.
3. Módosítsd a másolatot.

Például ha a Storefront témát és a Futurist sablont használod, és a fő tartalomsablont szeretnéd felülírni, a `plugins/checkout-for-woocommerce/templates/futurist` mappát másold a `themes/storefront/checkout-wc/` mappába, és a `content.php` fájlt módosítsd ott.

## Az eszközök fordítása

Ha a `src/` mappában lévő TypeScript vagy Sass fájlokat módosítod, le kell futtatnod néhány parancsot a terminálban. Feltételezi az npm és a webpack alapszintű ismeretét.

1. Nyiss terminált, és lépj a sablon mappájába (`cd`).
2. Az első módosítás előtt futtasd: `npm install`.
3. Utána a webpack ezekkel a parancsokkal indítható:
   - `npm run start`: figyeli a forrásmappát, és lefordítja a fejlesztői változatot.
   - `npm run build`: elkészíti az éles változatot a TypeScript és Sass fájlokból.