# Fejlesztőknek: az elem osztálya és alapadatai

> A BaseElement osztály, a get_data() és get_layout() metódus, és az elemek mezőtípusai.

Az elem PHP-oldali osztálya a YayMail `\YayMail\Abstracts\BaseElement` osztályából öröklődik.

## Az alapváz

```php
class NewElement extends \YayMail\Abstracts\BaseElement {
    protected static $type = 'new_element'; // ezzel ismeri fel a JavaScript
    private static $instance;
    public $available_email_ids = [ YAYMAIL_ALL_EMAILS ];

    public static function instance() {
        if ( null === static::$instance ) {
            static::$instance = new static();
        }
        return static::$instance;
    }

    public static function get_data( $attributes = [], $folder_parent = null ) { /* adatok */ }
    public static function get_layout( $element_data, $args ) { /* megjelenítés */ }
}
```

- `$type`: az elem azonosítója. Ugyanezt add meg a szerkesztő oldali `registerElement()` hívásban.
- `$available_email_ids`: mely e-mail sablonokban érhető el az elem. A `YAYMAIL_ALL_EMAILS` minden sablont jelent.

## A get_data(): az alapértelmezett adatok

A metódus egy tömböt ad vissza az elem alapadataival:

| Kulcs | Jelentés |
|---|---|
| `id` | Egyedi azonosító (`uniqid()`). |
| `type` | Az elem típusa (`self::$type`). |
| `name` | Az elem neve az elempanelen. |
| `icon` | Az elem ikonja (`self::$icon`). |
| `group` | Melyik csoportban jelenik meg az elempanelen (például `woocommerce`, vagy saját csoport). |
| `available` | Elérhető-e az elem (`true`). |
| `integration` | `default` a beépített, `3rd` a külső elemeknél. |
| `position` | A sorrend az elempanelen. |
| `data` | Az elem szerkeszthető tulajdonságai. |

A `data` minden tulajdonsága egy tömb ezekkel a kulcsokkal: `value_path` (hol tárolódik az érték), `component` (milyen szerkesztőmezővel állítható), `title` (a mező felirata), `default_value` (alapérték), és ha kell, `extras_data` (például `min`, `max`, `unit`, `options`).

## Mezőtípusok (component)

| Component | Mire használd | Alapérték formája |
|---|---|---|
| `Spacing` | Térköz (`padding`) vagy lekerekítés (`border_radius`) | `top`, `right`, `bottom`, `left` (lekerekítésnél `top_left`, `top_right`, `bottom_right`, `bottom_left`) |
| `Align` | Igazítás | például `center` |
| `Dimension` | Szélesség, magasság, ikonméret | szám; `extras_data`: `min`, `max`, `unit` |
| `NumberInput` | Szám, például szegélyvastagság | szám; `min`, `max` |
| `Color` | Szín (szöveg, háttér, szegély, cím, gomb) | színkód; beépített alapértékek: `YAYMAIL_COLOR_TEXT_DEFAULT`, `YAYMAIL_COLOR_BACKGROUND_DEFAULT`, `YAYMAIL_COLOR_BORDER_DEFAULT`, `YAYMAIL_COLOR_WC_DEFAULT` |
| `BackgroundImage` | Háttérkép | `url`, `position`, `x_position`, `y_position`, `repeat`, `size` |
| `FontFamilySelector` | Betűcsalád | `YAYMAIL_DEFAULT_FAMILY` |
| `Selector` | Legördülő választó | `extras_data.options`: `label` és `value` párok (például a szegélystílus: solid, double, dotted, dashed) |
| `TextInput` | Egysoros szöveg (cím, URL, gombszöveg) | szöveg |
| `RichTextEditor` | Formázható szöveg, shortcode-okkal | HTML vagy szöveg, például `[saját_shortcode]` |
| `Dimensions` | Tartalom szélessége | szám |
| `DividerTypeSelector` | Elválasztó vonal típusa | solid, double, dotted, dashed |
| `SocialIconThemeSelector` | Közösségi ikonok témája | például `Colorful` |
| `SocialList` | Közösségi ikonok listája | `icon` és `url` párok |
| `ImageBox` | Kép és szöveg két oszlopban | `column_1` (kép, szélesség, igazítás, URL, térköz), `column_2` (szöveg, betűcsalád, térköz) |
| `ImageList` | Három képoszlop | oszloponként `align`, `padding`, `image`, `width`, `background_color`, `url` |

Az alapértelmezett gombszöveg például `ORDER NOW`, az URL-ek alapértéke `#`.

## A get_layout(): a megjelenítés

A metódus megmondja, melyik PHP-sablon rajzolja ki az elemet az e-mailben. A sablon útvonalát a `yaymail_get_content()` függvénynek adod át:

```php
public static function get_layout( $element_data, $args ) {
    $path = __DIR__ . '/views/new-element.php';
    return yaymail_get_content( $path, array_merge( [ 'element' => $element_data ], $args ) );
}
```

A `yaymail_get_content()` három paramétert fogad: `$path` (kötelező, a sablon útvonala), `$args` (alapból üres, a sablonnak átadott adatok) és `$root` (alapból a YayMail bővítmény útvonala). A sablon tartalmát az [Az elem megjelenítése az e-mailben](https://hub.hellowp.io/hu/plugins/email-customizer-for-woocommerce/fejlesztoknek-elem-megjelenites/) fejezet írja le.