Kategória menü áthelyezés Tokyo sablonban

A cikksorozatunk első részében azt fogjuk bemutatni, hogyan lehet átalakítani a Tokyo sablon fejlécét, és hogyan helyezhetjük át a kategória menüt annak érdekében, hogy több kategóriával rendelező boltunk megjelenése megnyerő és ízléses maradjon!

Miről lesz szó a cikkben?

  1. Sok kategóriával rendelkező boltok problémája
  2. Kategóriák áthelyezése
  3. Kategória menü magasságának csökkentése
  4. Kategóriák középre rendezése
  5. Kategóriák elhelyezése oldal tetején maradó fejlécben
  6. Utolsó simítások
  7. Tesztelés

1. Sok kategóriával rendelkező boltok problémája

A Tokyo sablont olyan webáruházaknak készítettük elsősorban akik kevés kategóriával dolgoznak, szám szerint 4-5 fő kategóriával. Ettől függetlenül, ha a sablon elnyeri valakinek a tetszését használni fogja. A kategóriák számára rendelkezésre álló hely azonban fix méretű.

Mit tehet egy alap CSS tudással rendelkező bolt tulajdonos, ha 5-nél több kategóriája van?

  • Csökkenti a betűméretet
  • Csökkent a menüpontok / kategóriák távolságán

Ezek azonban nem túl elegánsak és nem is mindig működnek.

Screenshot_from_2019-04-09_14-18-01.png

Ha a fenti elrendezéssel Ön is minden nap találkozik, akkor szeretnék egy elegánsabb megoldását mutatni.
Részletesen bemutatjuk, hogyan lehet a vízszintes kategória menüt a logó és a kereső közül kivenni és a fejléc alá elhelyezni az oldaltörzs szélességében.

Fontos! A következőkben a Sablon fájl szerkesztőben sorszámokra is hivatkozunk a könnyebb navigáció miatt, azonban az általunk említett a sorszámok csak akkor egyeznek meg a boltban lévő sorok számával ha az adott template (.tpl) fájlban nem történt módosítás! 

2. Kategóriák áthelyezése

Először is a Sablon fájl szerkesztővel átalakítjuk a fejlécet. Nyissuk meg a Sablon fájl szerkesztőt és válasszuk ki a common mappában lévő header.tpl -t.

Screenshot_from_2019-04-09_14-21-44.png

Görgessünk a 47. sorhoz, vagy keressük meg a header-categories class-al rendelkező div elemet:

Screenshot_from_2019-04-09_14-22-20.png

Jelöljük ki a kódot a 47-49. sorig bezárólag, és vágjuk ki (CTRL + X) azt a vágólapra.a

Ha ezt megtettük, menjünk a kódban a 61. sorban lévő header bottom class-t záró </div> tag-jéhez. Ebből itt 4 darabot is látunk egymás alatt, és nekünk az utolsó (tehát a 61. sorban lévő) </div> fog kelleni.

Másoljuk be a kivágott kódot a 61. sor alá.

A következő képen látható a beillesztés utáni állapot:

Ke_pernyo_foto__2019-04-16_-_10.42.17.png

A kódunk sajnos így még nem teljes, a 62. sor után ( <div class="header-categories hidden-xs hidden-sm"> ) üssünk egy entert egy új sor megkezdése érdekében és illesszük be a következő 2 sornyi kódot:

<div class="container">
<div class="header-container header-container-category">

Illetve ezeket a tag-eket zárjuk le a 64. sor után az alábbi módon:

       </div>
</div>

Egy rövid magyarázat. A container class-al szerepe itt az lesz, hogy a kategória menü az oldal törzséhez illeszkedjen. A másik div pedig a header-container és header-container-category class-okat kapják meg. Ez a könnyebb formázhatóság miatt fog kelleni. Az eredmény pedig így fog kinézni a kódunkban:

Screenshot_from_2019-04-09_14-41-37.png

Ha minden lépést elvégeztünk a fentiek közül, kattintsunk a Mentés gombra.

3. Kategória menü magasságának csökkentése

Ha megnézzük a Tokyo sablon kategória menü részét, jól láthatjuk elég magas. Ha ezt kihelyezzük egy külön sorba, arányaiban nem szép összképet kapunk, hiszen egyértelmű nagyobb-kisebb viszony nem alakul ki az új kategória sáv és a felette lévő rész között. Ezért javasoljuk ezt a magasságot csökkenteni az alábbiak alapján.

Nyissuk meg a Sablon fájl szerkesztőben az assets mappából a style.scss -t, majd keressünk rá a ‘header-container’ kulcsszóra a (CTRL+F majd Enter) billentyűkombináció segítségével. Erre azért van szükség, mert a header-container’ -re vonatkozóan kell elhelyeznünk egy új szabályt. Éppen ezért 8005. sor körül javasoljuk elhelyezni a következő kódot:

.header-container-category {
         padding: 5px 0;
}

Természetesen ha mindent leellenőriztünk és megfelelően szúrtuk be a kódot, nyomjunk a Mentés gombra.

4. Kategóriák középre rendezése


Továbbra is a style.scss fájlt szerkesztjük, a 8041. sor körül javasoljuk elhelyezni a következő szabályt, ami a kategóriák középre rendezéséért fog felelni.

.header-container-category {
           justify-content: center;
}

Mi ezt a képen látható kódok közé szúrtuk be:

Ke_pernyo_foto__2019-04-16_-_11.17.31.png

Ha mindent leellenőriztünk és megfelelően szúrtuk be a kódot, nyomjunk a Mentés gombra.

 

5. Kategóriák elhelyezése oldal tetején maradó fejlécben

Sokaknak ismerős lehet az oldal tetején maradó fejléc, vagy másnéven sticky header.Jelenleg sajnos a kategória sávunk ebben az új megjelenésben nem marad a fejléc tetején. Módosítsuk a kódot, hogy ez megtörténjen a következő módon.

Menjünk a header.tpl fájlra és keressük meg a sticky-head szöveget (CTRL + F gomb kombináció után be kell írnunk a sticky-head szöveget).
Ez lesz az az úgynevezett class, ami megmondja mi legyen az oldal tetejéhez “ragasztva”, ha görgetünk.

Screenshot_from_2019-04-09_15-00-32.png

A 43. sorban a sticky-head szöveget másoljuk ki, majd töröljük innen és helyezzük a header html elemhez a class attribútumon belülre.

A 11. sorban kell ezt konkrétan keresnünk. Az alábbi kép szolgál segítségül, hogyan fog kinézni a beillesztés után helyesen a 11. sor:

Screenshot_from_2019-04-09_14-56-17.png

Mentés után a webáruház így fog kinézni:

Screenshot_from_2019-04-09_15-01-40.png

 

6. Utolsó simítások

a) A kategória menünek is legyen teljes szélességben háttérszíne

b) A legfelső sávnak (ahol a zászlók, telefonszám, szöveges menüpontok vannak) el kellene tűnnie sticky fejlécnél

 

a) A kategória menünek is legyen teljes szélességben háttérszíne

Váltsunk vissza a style.scss fájlra és keressük meg a header-categories szabályból a lenti képen láthatót:

Screenshot_from_2019-04-09_15-04-29.png

A margin-right: auto szabályra már nincs szükségünk az átalakítás miatt.
Ezt írjuk át arra, hogy

background-color: $white;

Screenshot_from_2019-04-09_15-06-47.png

Természetesen, ha az áruházban a fejlécnek más színe van, a megfelelő színre egészen nyugodtan cserélhető az áruházban használtra. Ha sikeresen cseréltük, kattintsunk a Mentés gombra.

 

b) A legfelső sávnak (ahol a zászlók, telefonszám, szöveges menüpontok vannak) el kellene tűnnie sticky fejlécnél

Nézzük meg, hogyan tudjuk elrejteni a sticky fejlécből a felső sávot. Továbbra is a style.scss-ben kell dolgoznunk. Keressük meg a sticky-head-active kulcsszóval a css szabályt:

Screenshot_from_2019-04-09_15-09-15.png

A fenti képen látható kódrészlet kell nekünk, ami a második találat a style.scss-ben.
Ezt a részt keressük meg és illesszük be a következő szabályt a .sticky-head-active szabály után az alábbi módon:

.sticky-head-active nav {
        display: none;
}

Screenshot_from_2019-04-09_15-11-56.png

Ha az instrukciókat pedig precízen követtük, ez a végeredmény fogad bennünket az áruházunkban:

download.png

 

7. Tesztelés

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

  • Nézzük meg, hogy a kategória menü görgetés során az oldal tetején marad-e? Mindez jól néz-e ki?
  • Kattinthatók-e a kategóriáink és el tudunk-e navigálni a kívánt kategória oldalára?
  • A lenyíló menük megfelelően működnek-e?

Ha nem működne bármelyik alap 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!

 

A következő tippünk során azt mutatjuk majd be, hogy a Tokyo sablon fejlécében, hogyan lehet a logó és a keresőmező közötti üres területet kitölteni, egészen konkrétan egy keresőmezőt megjeleníteni.

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

0 Megjegyzések

Cikk zárolt megjegyzésekkel szemben.