# Termékváltozat-minták

> A termékattribútumok opcióinak megjelenítése szín-, kép- vagy címkeminták formájában a Kosárba teszem elemben: bekapcsolás, attribútumtípus, tartalékérték, tagonkénti érték, stílus és letiltott opciók.

A termékváltozat-minták azt szabályozzák, hogyan jelenjenek meg a termékattribútumok opciói (szín, méret, mintázat) a látogatói oldalon. A legördülő menük helyett a termékváltozatokat színmintaként, képes gombként vagy egyéni címkeként mutathatod, ami szemléletesebb vásárlói élményt ad.

A funkció a **Kosárba teszem** elembe épül be, így a mintákat kiegészítő bővítmény nélkül, pontosan úgy stílusozhatod, ahogy szeretnéd.

## A termékváltozat-minták bekapcsolása

1. Nyisd meg a **Bricks → Beállítások → WooCommerce** oldalt.
2. Kapcsold be a **Termékváltozat-minták bekapcsolása** kapcsolót.
3. Kattints a **Beállítások mentése** gombra.

![A Bricks WooCommerce beállításai bekapcsolt Termékváltozat-minták kapcsolóval](./kepek/woocommerce-beallitasok.webp)

*A Bricks WooCommerce beállításai bekapcsolt Termékváltozat-minták kapcsolóval* (https://minta-bolt.hu/wp-admin/admin.php?page=bricks-settings)

A képen a **Termékváltozat-minták bekapcsolása** kapcsoló látszik az **Egyéb** csoportban: „Alakítsd a változati legördülő menüket szín-/kép-/címke-mintákká a kosárba helyezés elemen.”

Bekapcsolás után a mintákat közvetlenül a termékattribútum beállításainál szabhatod testre.

## Mintatípus hozzárendelése az attribútumokhoz

1. Nyisd meg a **Termékek → Attribútumok** oldalt.
2. Kattints a **Szerkesztés** hivatkozásra egy meglévő attribútumnál, vagy hozz létre újat.
3. A **Minta típusa** beállításban válaszd ki a megfelelő típust.

![Egy attribútum szerkesztése: a Minta típusa Szín értékre állítva, és megjelenik a Tartalék szín](./kepek/woocommerce-attributum-minta-tipus.webp)

*Egy attribútum szerkesztése: a Minta típusa Szín értékre állítva, és megjelenik a Tartalék szín* (https://minta-bolt.hu/wp-admin/edit.php?post_type=product&page=product_attributes&edit=1)

A képen a **Minta típusa** választó **Szín** értéke látszik, alatta pedig a hozzá tartozó **Tartalék szín** mező.

A típusok:

| Típus | Mit csinál |
|---|---|
| **Nincs** (alapértelmezett) | A WooCommerce szokásos viselkedése: legördülő menük. |
| **Szín** | A mintákat színértékekkel jeleníti meg. |
| **Címke** | Egyéni szöveges címkét mutat minden kifejezéshez. |
| **Kép** | A médiatárból származó képekkel jeleníti meg a mintákat. |

Például a **Szín** típussal piros és kék színes dobozokat mutathatsz, a **Címke** típust pedig méretopciókhoz használhatod: S, M, L.

### Tartalékérték megadása (nem kötelező)

Az attribútum szerkesztésekor tartalékértéket is megadhatsz: színnél a **Tartalék szín** mezőt a **Válassz színt** gombbal, képnél helyettesítő képet. A tartalékérték akkor érvényesül, ha egy adott kifejezésnek nincs saját mintaértéke.

Képmintáknál a Bricks ebben a sorrendben nézi a képeket:

1. a kifejezéshez rendelt kép,
2. az egyező termékváltozat képe, ha az attribútumnál be van kapcsolva a **Termékváltozat képének használata**,
3. az attribútum helyettesítő képe.

## Mintaértékek rendelése az egyes kifejezésekhez

1. Az éppen beállított attribútumnál kattints a **Értékek felvitele** hivatkozásra.
2. Egy kifejezésnél (például „Piros” vagy „Nagy”) kattints a **Szerkesztés** hivatkozásra.
3. Az új beviteli mező a mintatípusnak megfelelő:
   - **Szín:** válaszd ki a színt,
   - **Kép:** válassz ki vagy tölts fel egy képet,
   - **Címke:** írd be az egyéni szöveget.
4. Mentsd a kifejezést.

Ezek az értékek jelennek meg a látogatói oldalon a **Kosárba teszem** elemben.

## A minták stílusozása a Kosárba teszem elemben

A változatmintákat a **Kosárba teszem** elem jeleníti meg, ha a termék olyan attribútumokat használ, amelyeknek van mintatípusa. A stílusozáshoz:

1. Jelöld ki a **Kosárba teszem** elemet (például az egyedi termék sablonjában).
2. Nyisd meg az elembeállítások új **Variációs minták** csoportját.

Itt állíthatod a méretet, a térközt, a szegélyeket, az aktív állapotokat, a súgóbuborékokat és más részleteket.

## Nem elérhető változatopciók

A Bricks a rejtett WooCommerce-változat legördülő menü elérhetőségi állapotát követi. Ha a WooCommerce az aktuális attribútum-kombinációnál letilt egy opciót, a Bricks a megfelelő mintára felteszi a `disabled` osztályt és az `aria-disabled="true"` attribútumot.

A nem elérhető mintákat egyéni CSS-sel stílusozhatod:

```css
.bricks-variation-swatches li.disabled,
.bricks-variation-swatches li[aria-disabled="true"] {
  opacity: 0.45;
  text-decoration: line-through;
}
```

Nincs külön Bricks-beállítás, amely minden készlethiányos opciót elrejtene vagy letiltana. Ha egy minta nem kapja meg a letiltott állapotot, először a termék készletbeállításait és az adott változat-kombinációt nézd meg a WooCommerce-ben.