# Sablonok felülírása és mezőosztályok

> A mezők HTML-sablonjának cseréje a sablonban, CSS-osztályok csoportokhoz, mezőkhöz és képmintákhoz, valamint a kiegészítő képek mérete.

## A mezősablonok felülírása

A bővítmény minden mezőtípushoz külön PHP-sablont használ a termékoldalon. Ezek a bővítmény `templates/frontend` mappájában vannak (például `text.php`, `products.php`, `checkbox-group.php`, `image-swatch.php`). A sablonod vagy gyermeksablonod mappájából felülírhatod őket, a bővítmény fájljainak módosítása nélkül, így a frissítés nem törli a változtatásaidat.

1. Keresd meg a módosítandó mező sablonját a `templates/frontend` mappában.
2. Másold ki a fájlt.
3. Az aktív sablonod (lehetőleg a gyermeksablonod) mappájában hozz létre egy `product-extras` nevű mappát.
4. Másold a fájlt ebbe a mappába, és itt szerkeszd.

A bővítmény először a gyermeksablon `product-extras` mappájában keres, utána a szülősablonéban, és csak ha ott nincs meg a fájl, használja a saját alapértelmezett sablonját. Elég tehát csak azokat a fájlokat bemásolni, amelyeket módosítani akarsz.

```text
wp-content/themes/sablonom-child/
  product-extras/
    text.php
    checkbox-group.php
```

Néhány gyakori példa arra, mit érdemes átalakítani:

- **Szövegmező:** a felirat és a beviteli mező kimenete (a mező `pewc-form-field` osztályt kap), például táblázatos elrendezésre cserélve.
- **Termékek mező:** a gyermektermékek listája táblázatban, bélyegképpel, jelölőnégyzettel, névvel, cikkszámmal és árral. A sablon ellenőrzi, hogy a gyermektermék megvásárolható és raktáron van-e, kezelt készletnél kiírja a mennyiséget, „független” mennyiségnél pedig mennyiségmezőt tesz minden termék mellé. Ehhez a **Termékek mennyisége** beállításnak **Csak egy** értéken kell állnia.
- **Jelölőnégyzet-csoport:** végigmegy a mező opcióin, és minden opcióhoz jelölőnégyzetet és feliratot ír ki. Kezeli a fix és a százalékos árat is.

A jelölőnégyzet-csoport sablonjában van egy kikommentezett szűrő, a `pewc_filter_checkbox_group_field`, amelyet bekapcsolhatsz, ha kell.

## CSS-osztályok csoportokhoz, mezőkhöz és opciókhoz

Egyedi CSS-osztály háromféle helyen adható meg.

| Hová | Hol adod meg | Mire kerül |
| --- | --- | --- |
| Csoport | a csoport **Csoport CSS-osztálya** beállítása | a csoport burkoló eleme |
| Mező | a mező **Megjelenítés** fülén a **Mező CSS-osztálya** | a mező elemére |
| Képminta opció | kódból (lásd lent) | az adott opció burkolójára |

A mezők osztályait kódból is módosíthatod a `pewc_filter_single_product_classes` szűrővel. Két paramétert kap: az osztályok tömbjét és a mezőt (`$item`), így például a mező azonosítója alapján feltételesen is hozzáadhatsz osztályt.

```php
function sajat_mezo_osztalyok( $classes, $item ) {
    $classes[] = 'sajat-mezo';
    return $classes;
}
add_filter( 'pewc_filter_single_product_classes', 'sajat_mezo_osztalyok', 10, 2 );
```

A képminta opcióihoz külön osztályt három kampóval adhatsz:

- `pewc_after_option_params` (művelet, 20-as prioritás, 5 paraméter): minden opciósorba egy szöveges mezőt tesz az osztálynak,
- `pewc_after_option_params_titles` (művelet, 20-as prioritás, 3 paraméter): az **Osztály** oszlopfejlécet írja ki,
- `pewc_swatch_wrapper_classes` (szűrő, 10-es prioritás, 5 paraméter): a megadott osztályt hozzáadja az opció burkolójához.

A kód beillesztése után a képminta mező opcióinál megjelenik az új osztálymező, és a beírt osztály csak arra az opcióra vonatkozik.

## A kiegészítő képek mérete

A mezőkhöz feltöltött képek a sablon „thumbnail” (bélyegkép) méretét használják. Ezt két szűrővel cserélheted:

- `pewc_filter_field_image_size`: a hagyományos mezőképek méretét adja meg; egy paramétert kap (`$size`), és egy WordPress-képméret nevét kell visszaadnia;
- `pewc_image_swatch_thumbnail_size`: a képminta mezők képeinek mérete; két paramétert kap (`$size`, `$item`), és szintén képméretnevet ad vissza.

```php
add_filter( 'pewc_filter_field_image_size', function ( $size ) {
    return 'medium_large';
} );

add_filter( 'pewc_image_swatch_thumbnail_size', function ( $size, $item ) {
    return 'medium';
}, 10, 2 );
```

A kódrészleteket gyermeksablon `functions.php` fájljába vagy egy kódrészlet-bővítménybe tedd.