# JavaScript-horgok az eseménylista foglalási űrlapján

> Az eseménylista foglalási űrlap frontend-eseményeire reagáló JavaScript-horgok: betöltés, eseményválasztás, jegylista rendezése, egyéni ellenőrzés, foglalás előtt és után.

Az Amelia JavaScript-horgaival az esemény-foglalási folyamat lépéseire is reagálhatsz a frontenden: követheted a látogatók műveleteit, ellenőrizheted a megadott adatokat, vagy egyedi logikát futtathatsz, az Amelia magkódjának módosítása nélkül. A szerkezet és a közös paraméterek megegyeznek a [foglalási űrlapok horgaival](https://hub.hellowp.io/hu/plugins/ameliabooking/fejlesztoknek-js-horgok-foglalasi-urlap/).

A horgok használatához programozási ismeret kell, a támogatás csak általános útmutatásra terjed ki.

Ezek a horgok csak az eseménylista foglalási űrlapján futnak: `[ameliaeventslistbooking]`.

## A horgok paraméterei

| Paraméter | Leírás |
|---|---|
| `success` | Visszahívó függvény a folyamat folytatásához. Csak a `beforeBooking` horognál használatos. |
| `error` | Visszahívó függvény a folyamat leállításához. Csak a `beforeBooking` horognál használatos. |
| `data` | Az aktuális lépéshez tartozó esemény- és foglalási adatokat tartalmazó objektum. |

A horgokat a `window.ameliaActions` objektumban kell megadnod, a horog nevével egyező kulccsal.

## A horgok listája

| Horog | Mikor fut le |
|---|---|
| `ViewContent` | Miután az esemény-foglalási űrlap betöltődött. |
| `SelectEvent` | Amikor az űrlapon kiválasztanak vagy módosítanak egy eseményt. |
| `EventTickets` | Amikor az esemény jegyei megjelennek az űrlapon. |
| `InitInfoStep` | Amikor a vásárlói adatok lépése betöltődik. |
| `customValidation` | A vásárlói adatok lépésének ellenőrzésekor, a fizetési lépés betöltése előtt. |
| `InitiateCheckout` | Amikor a fizetési lépés betöltődik. |
| `beforeBooking` | A megerősítő gomb megnyomásakor, a foglalás véglegesítése előtt. |
| `Schedule` | Helyszíni fizetésű foglalás befejezése után, a köszönő lépés betöltése előtt. |
| `Purchase` | Online fizetésű foglalás befejezése után, a köszönő lépés betöltése előtt. |

Az egyszerű horgok (`ViewContent`, `SelectEvent`, `InitInfoStep`, `InitiateCheckout`, `Schedule`, `Purchase`) ugyanígy néznek ki, csak a névben különböznek. Példa a `ViewContent` horogra:

```javascript
window.ameliaActions = {
  ViewContent: function (success = null, error = null, data) {
    console.log('ViewContent HOOK')
    console.log(data)
  }
}
```

## A jegylista testreszabása

Az `EventTickets` horog akkor fut le, amikor az esemény jegyei megjelennek az űrlapon. Használhatod a jegyek átrendezésére, a lista módosítására vagy egyedi logikára a megjelenítés előtt. A jegyek az `data.event.customTickets` tömbben vannak, a módosított listát a `data.setTickets()` függvénnyel add vissza.

Az alábbi példa név szerint növekvő sorrendbe rendezi a jegyeket. Más rendezéshez cseréld le a rendezőfüggvényt:

| Rendezés | Rendezőfüggvény |
|---|---|
| Név szerint növekvő | `a.name.localeCompare(b.name, undefined, {sensitivity: 'base'})` |
| Név szerint csökkenő | `b.name.localeCompare(a.name, undefined, {sensitivity: 'base'})` |
| Azonosító szerint növekvő | `a.id - b.id` |
| Azonosító szerint csökkenő | `b.id - a.id` |
| Ár szerint növekvő | `a.price - b.price` |
| Ár szerint csökkenő | `b.price - a.price` |

```javascript
window.ameliaActions = {
  EventTickets: function (success = null, error = null, data) {
    let tickets = data.event.customTickets

    tickets = tickets.sort((a, b) =>
      a.name.localeCompare(b.name, undefined, { sensitivity: 'base' })
    )

    data.setTickets(tickets)
  }
}
```

## Egyéni ellenőrzés a fizetés előtt

A `customValidation` horog a vásárlói adatok lépésének ellenőrzésekor fut le. A `data.rules` objektumhoz saját szabályt adhatsz egy mezőre: az e-mail-mezőhöz a `data.rules.email`, egy egyéni mezőhöz a `data.rules['cf' + azonosito]` tömbbe.

```javascript
window.ameliaActions = {
  customValidation: function (success = null, error = null, data) {
    const customValidator = (rule, value, callback) => {
      if (value.includes('SOME_REGEX')) {
        callback(new Error())
      } else {
        callback()
      }
    }

    // az e-mail-mező ellenőrzése
    data.rules.email.push({ message: 'Egyéni hibaüzenet', validator: customValidator })

    // egy egyéni mező ellenőrzése (itt a 2-es azonosítójú mező)
    var customFieldId = 2
    data.rules['cf' + customFieldId].push({ message: 'Egyéni hibaüzenet', validator: customValidator })
  }
}
```

## Logika a foglalás létrehozása előtt

A `beforeBooking` horog a megerősítő gomb megnyomásakor fut le, még a foglalás véglegesítése előtt. A foglalás csak akkor folytatódik, ha meghívod a `success()` függvényt; ha le akarod állítani, hívd az `error()` függvényt.

Ez a horog Mollie és WooCommerce fizetésnél nem érhető el.

```javascript
window.ameliaActions = {
  beforeBooking: function (success = null, error = null, data) {
    console.log('Az esemény foglalásának létrehozása előtt')
    console.log(data)

    // a success() meghívásával engedélyezed a foglalás befejezését
    success()
  }
}
```