# Sablonok és témák felkészítése

> Mit kell tennie egy WooCommerce-témának, hogy több nyelvű és több pénznemes boltban is jól működjön.

Ez a fejezet témafejlesztőknek szól: mire kell figyelni, hogy a téma több nyelvű és több pénznemes WooCommerce-boltban is hibátlanul jelenjen meg.

## Hogyan működik a több nyelvű bolt

- Minden tartalomnak (termék, kategória, címke) saját nyelve van.
- A fordítások külön termékként, külön bejegyzésként tárolódnak az adatbázisban, és a WPML nyelvi táblája köti őket össze.
- A lefordított termékek ugyanazokat a képeket használják, de a szöveges mezőik saját nyelvűek.
- A szerkesztő a termékfordítási táblában dolgozik, és nem kell azzal törődnie, hogyan tárolódnak a fordítások.

Mivel a fordítások külön vannak tárolva, a megjelenítés egyszerű. Ha a téma a WordPress és a WooCommerce függvényeit használja, valószínűleg már most is felkészült a több nyelvre. Egy kis teszttel és néhány módosítással teljes lesz a kompatibilitás.

## Szükséges bővítmények

- WooCommerce.
- A WPML főbővítmény, a String Translation és a Media Translation kiegészítővel.
- A WPML Multilingual & Multicurrency for WooCommerce.

## Fordítható, fix szövegek a sablonokban

A sablonfájlok a termékadatok mellett fix szövegeket is kiírnak (például a „Vásárlás” gomb). A termék neve az adatbázisból jön, azzal nincs teendő. A fix szövegeket viszont mindig gettext-hívásba kell tenni, a téma saját szövegtartományával (textdomain).

Jó:

```php
<p><?php _e('Similar products:', 'my-textdomain') ?></p>
<input type="button" name="buy-button" value="<?php esc_attr_e('Buy now!', 'my-textdomain') ?>" />
```

Rossz, a szövegek nincsenek gettext-hívásban:

```php
<p><?php echo 'Similar products:'; ?></p>
<input type="button" name="buy-button" value="Buy now!" />
```

## Fix hivatkozások a WooCommerce-oldalakra

Sok téma minden oldalon hivatkozik a Kosár vagy a Fiókom oldalra. Ha ezeket WordPress-menüből adod meg, nincs teendő: a WPML nyelvenként külön menüt jelenít meg, így a hivatkozások is nyelvenként mások.

Ha a hivatkozás a sablonfájlban van, a WordPress-függvényeket és a WooCommerce oldalazonosítóit használd. A bővítmény szűri a `get_option()` hívásokat a WooCommerce-oldalak azonosítóira, és az aktuális nyelvű oldal azonosítóját adja vissza.

Jó:

```php
<a href="<?php echo get_permalink(get_option('woocommerce_shop_page_id')) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>
```

```php
<a href="<?php echo get_permalink(wc_get_page_id('shop')) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>
```

Rossz:

```php
<a href="<?php echo get_permalink(5) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>
```

Itt az azonosító be van égetve, pedig oldalanként és nyelvenként más.

```php
<a href="/shop"><?php _e('Shop page', 'my-textdomain') ?></a>
```

Itt az URL van beégetve, pedig nyelvenként más.

## Terméklisták

Ha a WooCommerce shortcode-jaival jelenítesz meg terméklistát, nincs további teendő: a WooCommerce a megfelelő nyelvű termékeket tölti be.

Ha saját kóddal töltöd be a termékeket, a WordPress vagy a WooCommerce függvényeit használd. Ha közvetlenül az adatbázist kérdezed le, a WPML nem szűr, és minden nyelv termékei összekeveredve jönnek.

Jó:

```php
<?php $products = get_posts(array('post_type' => 'product', 'suppress_filters' => 0)); ?>
```

```php
<?php
$args = array(
    'post_type'      => 'product',
    'posts_per_page' => 10,
);
$products = new WP_Query( $args );
?>
```

Rossz:

```php
<?php $products = get_posts(array('post_type' => 'product')); ?>
```

A `get_posts()` alapból `suppress_filters` = igaz értékkel fut, ezért kimarad a nyelvi szűrés.

```php
$products = $wpdb->get_results($wpdb->prepare("SELECT * FROM {$wpdb->posts} WHERE post_type='product' ORDER BY ID DESC LIMIT %d", 10));
```

A WPML az alacsony szintű SQL-lekérdezéseket nem szűri, ezért minden nyelv termékei visszajönnek.

Ha a megfelelő termékeket töltötted be, a megjelenítéskor már nem kell a nyelvvel foglalkoznod: minden termék a saját, helyes nyelvű mezőit hozza.

## Termékoldali sablonok

Egy termék megjelenítése külön teendő nélkül működik, mert a fordítások önálló termékek.

## Pénznemváltó a témában

Több pénznemes boltban a témának érdemes opcionális pénznemváltót adnia, hogy a vásárlók válthassanak pénznemet. A pénznemváltót PHP-hívással vagy shortcode-dal jelenítheted meg:

```php
<?php do_action('currency_switcher', array('format' => '%name (%symbol)')); ?>
```

```text
[currency_switcher]
```

A pénznemváltót a frontenden csak akkor látod, ha a boltban több pénznem van beállítva. A beállításokról a [Pénznemváltó](https://hub.hellowp.io/hu/plugins/woocommerce-multilingual/penznemvalto/) fejezetben olvashatsz.

## Jobbról balra író nyelvek (RTL)

A WooCommerce-témáknak ugyanazokat az RTL-irányelveket kell követniük, mint bármelyik WordPress-témának: készíts `rtl.css` fájlt a jobbról balra megjelenítés CSS-szabályaival.

## Különböző szöveghosszak kezelése

Egy szöveg az egyik nyelven hosszabb, a másikon rövidebb. Előfordul, hogy nem is tudod letesztelni, mert a felhasználók maguk fordítanak. Ha a termékblokk CSS-e a rövid angol szövegre van méretezve, a hosszabb (például spanyol) szöveg kilóg a helyéből.

Ökölszabály: teszteld a témát a szöveg kétszeres hosszával és a felére rövidítve. A legjobb megoldás a fluid (rugalmas) elrendezés, amelyben az elemek átméreteződnek és elfoglalják a szükséges helyet, így a szöveg sorról sorra tördelődik, és nincs megjelenítési hiba. Az elegáns, rugalmas sablon elkészítése nem triviális, de megspórol sok vizuális hibát.