# Kereső a fejlécben és saját keresőűrlap

> Az Ajax Search beillesztése a fejlécbe Elementorban, a blokkszerkesztőben és Bricksben, saját keresőűrlap összeállítása, a helykitöltő szöveg átírása.

Ez a fejezet három gyakori feladatot mutat be: a keresőt a fejlécbe teszed, saját keresőűrlapot állítasz össze kategórialistával, és átírod a mező helykitöltő szövegét.

## A kereső beillesztése a fejlécbe

A fejlécet a JetThemeCore (Elementorban és a blokkszerkesztőben) vagy a Bricks sablonkezelője adja. Elementor esetén az ingyenes Elementor is elég.

### Elementor

1. Nyisd meg a **Crocoblock → Theme Builder** oldalt.
2. Szerkeszd a meglévő fejlécet a **Edit content** gombbal, vagy készíts újat.
3. A szerkesztőben keresd meg az **Ajax Search** widgetet, és húzd a kívánt szekcióba.
4. A **Tartalom** fülön állítsd be a szakaszokat (**Search Form**, **Search Query**, **Results Area**, **Custom Fields**, **Search Suggestions**, **Notifications**). A beállítások jelentése az [áttekintésben](https://hub.hellowp.io/hu/plugins/jet-search/elso-lepesek-attekintes/) olvasható.
5. A **Stílus** fülön alakítsd a megjelenést a weboldalad arculatához.
6. Kattints a **Frissítés** gombra.

### Blokkszerkesztő

1. Szerkeszd a blokkszerkesztővel készült fejlécet.
2. Kattints a blokk hozzáadása gombra, és keresd meg az **Ajax Search** blokkot.
3. A **Blokk** fülön ugyanazokat a beállításokat találod, mint Elementorban.
4. A blokk megjelenéséhez használd a JetStyleManager bővítményt: a szerkesztő jobb felső sarkában a **Block Style** gombbal stílusozhatod.
5. Mentsd a fejlécet.

![Az Ajax Search blokk a szerkesztőben](./kepek/blokk-szerkeszto.webp)

*Az Ajax Search blokk a szerkesztőben* (https://minta-bolt.hu/wp-admin/post.php?post=9&action=edit)

A jobb oldali sávban a **Blokk** fülön látszanak a szakaszok.

Végül ellenőrizd, hogy a fejléc feltételei be vannak állítva (a fejléc jelenjen meg az oldalakon), és nézd meg a fejlécet a weboldalon.

### Bricks

A Bricksben az Ajax Search bármelyik sablonba beilleszthető; itt a fejléc példáját követjük. A JetPlugins és a Bricks együttműködéséhez a Bricks sablonkezelője kell.

1. Nyisd meg a **Bricks → Templates** oldalt, és kattints az **Add New Template** gombra.
2. A **Template type** listában válaszd a **Header** típust.
3. Add meg a sablon címét, és kattints az **EDIT WITH BRICKS** gombra.
4. Tervezd meg a fejlécet, majd a kereső elemek között keresd meg az **Ajax Search** elemet, és húzd a kívánt helyre.
5. A **CONTENT** fül **SEARCH FORM** szakaszában kapcsold be a **Show Categories List** kapcsolót, és a **Taxonomy** listában válaszd ki az osztályozást.
6. A találati terület szakaszban válaszd ki a találatokhoz használt listázósablont (**Listing**).
7. A jobb felső sarokban kattints a **Save** ikonra.
8. Rendeld a fejlécet egy oldalhoz, és nézd meg a weboldalon: három karakter beírása után megjelennek a találatok. Ha bekapcsoltad a kategórialistát, a kategória kiválasztásával a találatok a kategóriára szűkíthetők.

## Saját keresőűrlap összeállítása

Az alábbi példában az egész webhelyen keresel, a mező mellett kategórialista áll, és a keresés az osztályozások kifejezéseire is kiterjed. Az Elementor, a blokkszerkesztő és a Bricks mind használható.

Szükséges: a JetSearch aktív, és ha saját osztályozást használsz, a JetEngine is aktív az egyéni bejegyzéstípussal és osztályozással. Egy előre létrehozott oldalra vagy bejegyzésre is szükség van.

### 1. A globális beállítások

1. Nyisd meg a **Crocoblock → JetPlugins Settings → JetSearch → Ajax Search Settings** oldalt.
2. Kapcsold be a **Kategórialista megjelenítése** kapcsolót, és a **Taxonomy** listában hagyd meg az alapértelmezett „Categories” értéket.
3. Hagyd üresen a **Forrás** mezőt, hogy a keresés az egész webhelyen történjen.
4. Kapcsold be a **Kifejezés szerinti keresés** és a **Keresés az osztályozás (taxonomy) kifejezéseiben** kapcsolót.
5. Az osztályozások listájában válaszd ki a kívánt osztályozást (például az „Ingatlan típusa”).
6. Hagyd meg az **Eredmények sorrendjének alapja** mezőben a **Relevancia**, az **Eredmények sorrendje** mezőben a **Növekvő** értéket.
7. Kattints az **Opciók mentése** gombra.

### 2. Az Ajax Search hozzáadása

Nyiss meg egy oldalt vagy bejegyzést, keresd meg az **Ajax Search** widgetet (blokkot, elemet), és húzd az oldalra.

### 3. A keresőűrlap testreszabása

Nyisd ki a widget beállításait, és menj a **Tartalom → Search Form** szakaszra.

1. Az **Input Icon** mezőben válassz ikont a médiatárból.
2. A **Placeholder Text** mezőbe írd a mező szövegét, például „Írd be, mit keresel”, az alapértelmezett „Search ...” helyett.
3. A **Minimal Quantity of Symbols for Search** értékét állítsd 3-ra (alapérték: 2).
4. Kapcsold be a **Show Submit Button** kapcsolót, a **Submit Button Label** mezőbe írd például: „Keresés”, majd a **Submit Button Icon** mezőben válaszd ki a gomb ikonját.
5. Kapcsold be a **Show Categories List** kapcsolót, a **Taxonomy** listában válaszd ki az osztályozást, a **Select Placeholder** mezőbe pedig írd a lista alapszövegét, például „Minden típus”.
6. Kapcsold be a **Responsive Form on Mobile** kapcsolót.
7. Mentsd az oldalt (**Közzététel** vagy **Frissítés**).

### 4. Az eredmény ellenőrzése

Nyisd meg az oldalt a weboldalon. Mivel három karakter a minimum, annyit kell beírnod, hogy a találatok megjelenjenek. Ha a kategórialistából kiválasztasz egy kategóriát, a találatok arra szűkülnek. A küldés gombra kattintva megnyílik a teljes eredményoldal.

![Az elkészült kereső élő találatokkal](./kepek/elso-lepesek-egyedi-kereso.webp)

*Az elkészült kereső élő találatokkal* (https://minta-bolt.hu/kereses/)

A képen a kereső háromnál több karakter beírása után két találatot mutat, a találatok alatt az összes találat hivatkozásával.

## A helykitöltő szöveg átírása és formázása

### Elementor

1. Nyisd meg az oldalt, amelyen a keresőt használni szeretnéd, és add hozzá az **Ajax Search** widgetet.
2. A **Tartalom** fülön nyisd ki a **Search Form** szakaszt.
3. A **Placeholder Text** mezőbe írd az új szöveget.
4. Ha az **Input Icon** mezőben ikont választasz az ikonkönyvtárból vagy feltöltesz egy SVG-t, az ikon a szöveg előtt jelenik meg.
5. A **Stílus** fülön az **Input Field** szakaszban a helykitöltő betűtípusa, mérete és színe is állítható.

### Blokkszerkesztő

1. Add hozzá az **Ajax Search** blokkot.
2. A **Blokk** fülön, a **Search Input** szakaszban írd át a **Placeholder** szöveget.
3. A blokkszerkesztőnek nincs stílusfüle. A JetStyleManager bővítménnyel a **Block Style** gombra kattintva, az **Input Field** szakaszban formázhatod a helykitöltő szöveget.