Kereső mező megjelenítése a fejlécben

A legújabb cikkünkben tovább alakítjuk a Tokyo sablon fejlécét. Bemutatjuk, hogy az előző tippünk után keletkezett üres helyet hogyan is hasznosíthatjuk illetve hogyan alakíthatjuk át a Tokyo sablon egyedi keresőjét.

Miről lesz szó a cikkben?

  1. Tokyo-s kereső popup kiiktatása a rendszerből
  2. Keresőmező megjelenítése a fejlécben
  3. Tokyo-s kereső popup kiiktatása a CSS-ből
  4. Kereső kinézetének stílusbeli átalakítása
  5. Lenyíló kereső finomhangolása
  6. Mobilon való megjelenés optimalizálása
  7. Tesztelés

 

1. Tokyo-s kereső popup kiiktatása a rendszerből

Első lépésként menjünk az áruházunk admin felületén belül a Beállítások / Megjelenés / Sablon fájl szerkesztő menüpontra.
Két dolgot kell kitörölnünk a footer.tpl fájlból. Itt a bal oszlop tetején található kereső mezőbe írjuk be a footer.tpl fájl nevet a gyorsabb navigálás érdekében.

 A 76. sorban kezdődik egy kód sorozat, ami egészen a 97. sorig tart. Az alábbi képen látható tartományt tehát jelöljük ki, és töröljük egész egyszerűen a kódunkból.

Ke_pernyo_foto__2019-04-25_-_12.14.36.png 

Második lépésként pedig ugyanígy a footer.tpl-ben lévő JavaScript-et is törölnünk kell. A törlendő kód a 88-94. sorok között található. Az alábbi képen pedig láthatjuk is:

Ke_pernyo_foto__2019-04-25_-_12.25.31.png

Ha kitöröltük a 2 kódrészt, nincs más dolgunk mint a Mentés gombra kattintani!

2. Keresőmező megjelenítése a fejlécben

Következőben a header.tpl fájlban kell dolgoznunk. Nyissuk meg ezt a fájlt és keressük meg a CTRL+F kereső funkció segítségével a következő a header-col-search class-t.

Ebből csak 1 találatunk lesz, ha nincs egyedi módosítás a .tpl fájlban. A class a 48. sor környékén lesz megtalálható.

Ke_pernyo_foto__2019-04-25_-_12.30.50.png

A header-col-search class-al ‹div› -nek a tartalmát kell cserélnünk. Jelöljük ki a 49. sor tartalmát és töröljük ki.

Ke_pernyo_foto__2019-04-25_-_12.33.33.png

Ezután pedig a helyére illesszük be a következő kódot:

{{ viewHelper.loadModule('module/search') }}

Ke_pernyo_foto__2019-04-25_-_12.34.01.png 

A fenti képen látható az eredmény, ami után már csak a Mentés gombra kell kattintanunk!

 

3. Tokyo-s kereső popup kiiktatása a CSS-ből

Ahogy azt a fejezet címből ki lehet következtetni, CSS fájlt fogunk módosítani. Éppen ezért menjünk az style.scss fájlba. Itt a következő kifejezésre keressünk rá:

/* search-popup */

Ke_pernyo_foto__2019-04-30_-_14.22.10.png 

A keresés a 14530. sor körülre dob bennünket. Innentől kezdve kell törölnünk a kódból egészen a 14596. sor körülig.
Itt található ugyanis a törlendő rész vége amit a következő kifejezés jelöl:

/* /search-popup */

Ke_pernyo_foto__2019-04-30_-_14.22.27.png 

Tehát a 14530-14596. sorok közötti részt kell törölnünk. Ha mindent megfelelően csináltunk úgy ellenőrizhetjük a munkánkat, hogy a következő kommenteket (/* /pathway */ és /* search module */ ) egymás alatt kell látnunk.

Ke_pernyo_foto__2019-04-30_-_14.24.09.png

Ha leellenőriztük magunkat, nyomjunk a mentés gombra!

4. Kereső kinézetének stílusbeli átalakítása

Most már csak pár dolog van hátra, ezek közül először pár stílus formázást kell elvégeznünk. Ezek elvégzéséhez továbbra is a style.scss fájlban kell módosítanunk a kódban. Lesznek szabályok, amelyeket módosítani kell, de lesznek olyanok is, amelyeket újonnan kell felvennünk!

Az első módosítást a 14537. sor körül kell elvégeznünk. A szabályok mindegyike .search-module szelektor alatt lesz megtalálható!

Ke_pernyo_foto__2019-04-30_-_14.26.13.png

A képen jól látszik, hogy az alábbi két szabály helyett:

border: 0;
border-bottom: 1px solid $input-border-color;

A következőt kell megadnunk:

border: 1px solid $input-border-color;

Az új kódrész pedig így néz ki:

Ke_pernyo_foto__2019-04-30_-_14.26.35.png

A .form-control -nál a magasságot és a betűméretet vegyük kisebbre, a szebb megjelenésért.

Ke_pernyo_foto__2019-04-30_-_14.29.55.png

Az új értékek a következők lesznek:

height: 36px;
line-height: 36px;
font-size: 1.5rem;

Ke_pernyo_foto__2019-04-30_-_14.30.31.png

Végezetül pedig a gombot ( .btn ) is igazítsuk a fenti módosításokhoz! A következő szabályoknál kell módosítanunk az értékeken:

Ke_pernyo_foto__2019-04-30_-_14.33.20.png

Az értékek az alábbiak lesznek:

font-size: 2rem;
width: 28px;
height: 28px;
line-height: 28px;

Ke_pernyo_foto__2019-04-30_-_14.34.03.png

Ha mindezekkel megvagyunk, csak el kell mentenünk a módosításokat.

5. Lenyíló kereső finomhangolása

Végezetül pedig a keresési találatok esetén megjelenő lenyíló menüt kell a keresőhöz igazítanunk. Ehhez továbbra is a style.scss fájlban kell módosítanunk.

 

Először is keressük meg a .search-module selector-t. A 14620. sor körül kell a következő szabályt kitörölnünk:

.search-module {
       position: static !important;
}

Ke_pernyo_foto__2019-05-02_-_14.12.53.png

Második lépésben keressük meg ugyanebben a fájlban a .search-results selector alatt background szabályt.

Ke_pernyo_foto__2019-05-02_-_14.14.51.png

A képen jól láthatjuk, hogy a background szabálynál jelenleg egy átlátszó vagyis transparent szabály van megadva.

Ezt módosítsuk a következőre:

background: $white;

Harmadik lépésben pedig egy új szabályt kell beillesztenünk. Az új szabályt érdemes a 7923. sor után beilleszteni. E sor előtt ugyanis található már egy általunk beillesztett szabály. Keressük meg a .header-bottom selectort és a korábban említett sorszám után üssünk pár enter-t. Ez után pedig illesszük be a következő kódot:

.header-bottom .header-container {
   z-index: 1902;
}

A végeredmény pedig valahogy így fog kinézni:

Ke_pernyo_foto__2019-05-02_-_14.19.05.png 

A képen kijelölt rész amit mi illesztettünk be, előtte pedig a szabály ami után javasoljuk ezt megtenni. Ha mindhárom lépéssel megvagyunk, csupán a mentés gombra kell kattintanunk és elkészültünk minden módosítással!

 

6. Mobilon való megjelenés optimalizálása

Fontos, hogy mobilon is jól nézzen ki az új megoldásunk ezért a következő 3 teendőt még el kell végezzük.

1. Menjünk a header.tpl fájlba és keressük meg a "header-col-search hidden-sm hidden-xs" class-t ahonnan is ki kell törölnünk a hidden-sm hidden-xs classokat. A 48. sor környékén fogjuk megtalálni. Ha a lenti képeken látható módon módosítottuk a fájlunkat, kattintsunk a mentés gombra!

Ke_pernyo_foto__2019-05-06_-_14.34.54.png

Ke_pernyo_foto__2019-05-06_-_14.35.02.png

2. A mobile_menu.tpl fájlban kell ezután módosítanunk. A 3. sorban lévő kódot...

{% block mobileSearchLinkTarget %}#search-popup-wrapper{% endblock %}

 

Ke_pernyo_foto__2019-05-06_-_14.37.32.png

...a következőre kell módosítanunk:

{% block mobileSearchLinkTarget %}#search{% endblock %}

Ke_pernyo_foto__2019-05-06_-_14.37.44.png

Ha a fenti képeken látható módon módosítottuk a fájlunkat, kattintsunk a mentés gombra!

3. Utolsó lépésként pedig a style.scss fájlban kell módosítanunk. A következő media query-re keressünk rá:

@media screen and (max-width: $screen-sm-max)

A 14670. sor körül lévő szabályokat kell kiegészítenünk jó pár szabállyal.

Ke_pernyo_foto__2019-05-06_-_14.43.53.png

Az alábbi szabályokat szúrjuk be a 14689. sor után (tehát a .search-popup-content záró '{' -ja után).

.search-module {
position: fixed;
top: 0;
left: 0;
width: 100%;
transition: $transition-base;
background: $white;
z-index: -1;
opacity: 0;

.search-results {
width: 100%;
}

&.collapse.in {
top: $responsive-menu-height;
z-index: 99999;
opacity: 1;
}
}

.search-dropdown-btn {
display: none;
}

Ke_pernyo_foto__2019-05-06_-_14.54.08.png

Ez után szintén csak mentenünk kell a módosítainkat. Ha precízen dolgoztunk, a keresőnknek az alábbi képen látható kinézetet kell megkapnia:

Ke_pernyo_foto__2019-05-03_-_10.19.50.png

 

7. Tesztelés

Rendkívül fontos, hogy módosításokat mindig ellenőrizzük le közvetlenül a lépések / módosítások után. Éppen ezért érdemes a fejlécre/keresőre vonatkozó teszteléseket elvégezni. Mik ezek?

  • Nézzük meg, hogy a fejléc görgetés során az oldal tetején marad-e? Mindez jól néz-e ki illetve minden funkció rendeltetésszerűen működik-e?
  • Kattintható-e a kereső modul? Megfelelő találatokat dob-e ki?
  • Minden nézeten végezzük el a fenti pontokat! (Mobil, táblagép stb.)

Ha nem működne bármelyik funkció a fentiek közül, akkor érdemes újra megnézni minden lépést részletesen, mert gyakran előfordulnak elírások az ilyen munkák során.

Fontos kiemelni, hogy ezek a módosítások akkor érvényesek, ha még nem lett a fejléc változtatva, más fejlesztő által készített css kód befolyásolhatja a megjelenést! Azonban a sablon is folyamatos fejlesztés alatt van, így előfordulhat, hogy a jelzett sorszámok eltérhetnek, ilyenkor érdemes a selectorok alapján megkeresni a megfelelő helyet.

A következő tippünk során azt mutatjuk majd be, hogyan is lehet átrendezni a fejlécet egy-egy elem áthelyezésével, ezzel teljesen új struktúrát kialakítani ott!






Van még kérdése? Kérelem beküldése

0 Megjegyzések

Cikk zárolt megjegyzésekkel szemben.