Sablon fájl szerkesztő - Szabja testre webáruháza megjelenését, készítsen új modulokat vagy építsen teljesen új designt

Sablon fájl szerkesztő - Szabja testre webáruháza megjelenését, készítsen új modulokat vagy építsen teljesen új designt

“Mutasd meg a webáruházad és én megmondom ki vagy” – gondolhatja rólunk egy látogató, amikor a webáruházunkba érkezik.

Egy webáruház megjelenése, elrendezése legalább annyira meghatározza, mennyien vásárolnak, mint az, hogy hogyan működik. Sőt…

A látogató az oldalnak sokkal hamarabb látja a küllemét és az elrendezettségét, mint azt, hogy van-e benne szűrési rendszer, vagy, hogy jó-e a kategória elrendezés, netán megnyerők-e a termékleírások. Így elengedhetetlen, hogy az áruház megjelenésével is foglalkozzunk.

Ugyanakkor a bérlős webáruház rendszerek egyik jellemzője, hogy bár korlátozottan van lehetőségünk testre szabni webáruházunkat (a ShopRenter esetén CSS tudással még komolyabb módosításokat is végezni), de a sablon fájlokhoz nem igen volt lehetőségünk hozzáférni.

Így, ha valami igazán egyedi webshopot szerettünk volna, akkor meg kellett vásárolnunk az egyedi design szolgáltatást, vagy lefejleszteni súlyos összegekért egy teljesen egyedi webáruházat, kiszolgáltatva magunkat egy külsős fejlesztő cégnek.

De ennek most vége!

A ShopRenter azt a célt tűzte ki, hogy ledönti azokat a korlátokat, amelyekről eddig azt gondoltuk, hogy a bérlős webáruház rendszerek természetes velejárója.

A mai napon kikerült a Sablon fájl szerkesztő a Labor menüpontba, így már kipróbálható az a funkció, amely megnyitja a kaput a ShopRenteres felhasználók előtt, hogy a jövőben komoly összegek kifizetése nélkül is kitűnhessen webáruházuk a tömegből, azaz lehetőségük van egy igazán egyedi megjelenést adni a boltnak.

Ehhez kellő technikai tudásra is szükségünk lesz, de ha nem rendelkezünk ezzel, akkor sem kell megijedni, mert ezentúl könnyebb lesz külső szakértő segítségét kérni, és a ShopRenter Akadémián is rendszeresen készülnek majd tippek és technikai leírások a sablon fájl szerkesztőhöz.

Nézzük a részleteket!

Pontosan mi is az a Sablon fájl szerkesztő?

A Sablon fájl szerkesztő egy olyan új eszköz a ShopRenterben, amellyel lehetőség nyílik a sablonokhoz tartozó valamennyi fájl módosítására, amelyeket mostantól egyszerűen és gyorsan végezhet el az új HTML editorban, ezáltal minden eddiginél nagyobb szabadság áll rendelkezésre az áruház testreszabásában.

Tegyük fel, hogy a fejlécben szeretne elhelyezni egy ingyenes szállítás szöveget.

Erre korábban a rendszer nem adott lehetőséget viszont most – a megfelelő technikai tudással – ez kivitelezhető, itt azonban nem kell megállnia, akár mélyebbre is mehet és teljesen egyedi szerkezetet és külsőt adhat a sablonjának.

A Sablon fájl szerkesztő a webáruház admin felületén a Beállítások> Megjelenés> Sablon kiválasztás menüpontban a Műveletek gombra kattintva érhető el.

Sablon fájl szerkesztő

A sablon fájlok HTML, CSS, JavaScript, JSON és Twig kódokat tartalmaznak, az ezekhez való hozzáféréssel ezentúl bárki saját ízlése szerint módosíthatja sablonját.

Fontos: A Sablon fájl szerkesztő a Tokyo és az ezután kiadott sablonjainknál lesz elérhető és használható!

Mielőtt rátérnénk a funkcionalitásra, meg kell jegyeznünk, hogy a szerkesztőhöz haladóbb informatikai tudásra lesz szükségünk, így ha ezzel nem rendelkezünk, akkor célszerű szakemberrel végezni a módosításokat.

Ugyanakkor míg korábban technikai és biztonsági okokból csak a ShopRenter fejlesztői tudták ezeket a fájlokat módosítani, mostantól kezdve bárki, akinek hozzáférése van a webáruház adminisztrációs felületéhez.

A jövőben pedig a ShopRenter részletes leírásokat biztosít majd az egyes funkciók megvalósításához, sőt lesznek olyan modulok, amelyet már ezzel a szerkesztővel valósítunk meg, így várhatóan az új fejlesztések is gyorsabb ütemben készülnek majd el.

Funkcionalitás

A felület

A sablon szerkesztő felülete két fő részből áll.

1. Bal oldalon a fájl listát láthatjuk, amiből a sablon áll.

Itt mappákba rendezve az elérhető összes sablon fájlt láthatjuk.  A fájl listában megtalálhatók sablon fájlok, stíluslapok és konfigurációs fájlok is. A listában a módosított fájlok kiemelve (félkövér stílusban) jelennek meg.

Sablon fájlok

Például tegyük fel, hogy a főoldali bannerkezelő modult szeretnénk módosítani. Ezt a module mappában tehetjük meg, azon belül is a bannerscroller.tpl fájlban. Ezt kikereshetjük az adott almappában vagy a kereső funkciót használva a gyorsabb elérés érdekében!

2. Jobb oldalon egy szerkesztő felületen keresztül végezhetjük a tényleges munkát. Itt látható a szerkesztésre kiválasztott fájl.

Ebben az ablakban tudjuk szerkeszteni a sablon fájlokat, a szerkesztő felület jobb felső sarkában található Mentés gomb segítségével tudjuk elmenteni a változtatásainkat, vagy pedig a CTRL + S billentyű kombinációval is tudunk menteni.

A szerkesztő felületen több fájl is megnyitható, amelyek között a navigálást egy tab-os választó segíti.

A szerkesztési előzményeket a Korábbi verziók gombra kattintva megjelenő lenyíló menüből választhatjuk ki dátum/sorszám szerint. Erről a funkcióról a későbbiekben részletesen írunk.

Korábbi verziók

További hasznos funkció az elmaradhatatlan kereső funkció, hogy ne vesszünk el a sorok rengetegében. A CTRL + F / CMD + F billentyűkombinációval tudunk keresni a fájlok tartalmában.

Ha a felugró keresőbe begépeljük a keresett kulcsszót és entert nyomunk, akkor az adott találatra ugrik. Több találat esetén az F3-mal a következő találatra, SHIFT + F3-mal az előzőre tudunk ugrani.

Hasznos billentyűkombináció még a CTRL + G, amivel az adott sorra tudunk ugrani a sablon fájlban. A teljes képernyős szerkesztőt az F11 billentyű lenyomásával érhetjük el.

Keresés a sablon fájlokban

A fájl lista felett található a kereső, melynek segítségével a sablon fájlokban kereshetünk, így szűkítve a listát, hogy gyorsabban megtaláljuk a szerkeszteni kívánt fájlt.

Gépelést követően csak azok a fájlok maradnak láthatók, amelyek nevében szerepel a beírt kifejezés. Nem szükséges entert ütni vagy a keresés gombra kattintani, a leszűrt fájlok elérhetőek maradnak mindaddig, amíg a beírt kifejezést nem töröljük.

Keresés a sablon fájlokban

Sablon beállítások szerkesztése

A config mappában lehet elérni a settings.json fájlt, amelyben a sablonhoz tartozó beállításokat lehet szerkeszteni.

Ebben a leíró fájlban lehet módosítani, hogy az adott aloldalhoz milyen layout legyen használva, illetve itt lehet új modul pozíciókat felvenni vagy a meglévő modul pozíciókat módosítani.

Sablon beállítások szerkesztése

Sablon fájlok verziókövetése

Gyakori félelem ügyfeleink körében, amikor egy új funkciót kipróbálnak, hogy valamit elrontanak a webáruházban. A Sablon fájl szerkesztővel ez nem fordulhat elő, köszönhetően ennek a funkciónak.

Bármely fájlt szerkesztjük, visszaállítható a korábbi, valamint az eredeti verzió is, ezáltal kockázat nélkül lehet kísérletezni, nem kell félnünk, hogy elrontunk valamit.

A verziókat a szerkesztő felett elhelyezkedő linken keresztül érjük el, erre kattintva egy lenyíló menüből választhatjuk ki a kívánt verziót. A lenyíló menüben az utolsó 1000 módosítás kerül kilistázásra.

Sablon fájlok verziókövetése

Sablon fájlok verziókövetése

Tegyük fel, hogy több módosítást végeztünk az adott sablon fájlban és valamilyen oknál fogva szeretnénk visszatérni a ShopRenter által biztosított eredeti verziójára a fájlnak.

Ilyenkor a verzió listából ki tudjuk választani a legalsó Eredeti verziót, ami mindig a ShopRenterben lévő legújabb változata az adott sablon fájlnak.

Ha kiválasztottuk az Eredetit, akkor a fájl szerkesztőbe betöltődik a tartalma, majd ha rákattintunk a Mentés gombra, akkor egy új verzióként kerül elmentésre, de már a rendszerben lévő legújabb tartalommal.

Új fájlok létrehozása

A fájl listában lehetőségünk van új fájlokat is létrehozni, ennek köszönhetően kiemelhetők a közös részek, átláthatóbb kódot írhatunk. A korábban megszokott felületen történik itt is a szerkesztés.

Például szeretnénk egy SVG ikont több helyen is használni a boltunkban, ekkor megtehetjük azt, hogy egy új fájlba beletesszük ezt az ikont, majd azokban a fájlokban, ahol ezt az ikont használni szeretnénk, az {% include “mappa/fajl %} segítségével behúzzuk azt.

Így nem szükséges feleslegesen sokszor megírni ugyanazt a kódot, elegendő egyszer, majd ezt tetszőlegesen bárhol felhasználhatjuk.

Dinamikus modulok létrehozása

Itt elérkeztünk ahhoz a funkcióhoz, ami a jövőben az egyik legnagyobb hasznunkra válhat.

A Sablon fájl szerkesztő segítségével a ShopRenter fejlesztő csapata – de ugyanúgy külsős fejlesztők is – olyan modulokat hozhatnak létre a webáruház tulajdonosoknak, amelyek használatához már nem szükséges fejlesztői ismeretekkel rendelkezniük.

Mostantól egy új sablon fájl létrehozásával egy új modul is létrehozható, amely a modul lista oldalon jelenik meg.

A modul beállításait – hogy milyen UI elemek jelenjenek meg benne, összefoglaló néven milyen schema-ja legyen – az új sablon fájlban tudjuk megadni, json formátumban.

Ennek a használatával nem kell többé HTML kódban szerkeszteni az egyedi tartalmunkat, könnyen használható új modulokat kapunk, ami nagyban meggyorsítja a későbbi webshop menedzselési munkákat.

Tegyük fel, hogy korábban a főoldalon egy egyedi HTML modult használtunk az erősségeink megjelenítésére. Szerkesztése bonyolultabb, hiszen ha át kellett írni egy szöveget, vagy új ikont/képet szerettünk volna használni, akkor forráskód nézetben ki kellett cserélnünk ezeket ügyelve, hogy a HTML szerkezetet ne rontsuk el.

A dinamikus modul segítségével ehelyett egy olyan modult készíthetünk, ahol nem szükséges forráskód nézetben turkálni, egyszerűen betallózhatjuk az új ikont/képet, illetve egy input mezőben átírhatjuk akár a szövegeket is. Ezáltal sokkal egyszerűbb és gyorsabb a szerkesztés. 

Példaként a Tokyo sablonban látható Topline modul-t szeretnénk bemutatni:

A Tokyo sablonnál használtuk először a dinamikus modul funkciót. Az alábbi modult valósítottuk meg ezzel a megoldással (a modul a tokyo.shoprenter.hu oldalon megtekinthető):

Kedvezmény sáv fejlécben

Ennek a modulnak az admin felülete a következőképpen néz ki:

Top line modul Tokyo sablonban

Korábban egy ilyen modult egyedi HTML modullal lehetett csupán megoldani, amelynek szerkesztése komplikált és bonyolult volt egy laikus számára forráskód nézeten keresztül.

A dinamikus modulok segítségével a megfelelő szakmai tudással rendelkező partnerek olyan modulokat készíthetnek a webáruház tulajdonosok számára, amelyek a későbbiekben könnyedén menedzselhetők lesznek bárki számára.
Mivel egy hosszabb kódról van szó, így ezt nem mutatnánk be képernyőfotó formájában, hanem javasoljuk megtekinteni a Sablon fájl szerkesztőben az alábbi fájlt: sections/topline.tpl

Sablon stílusának szerkesztése

A sablonhoz tartozó stíluslap az assets/style.scss, ami SCSS előfeldolgozóban íródott, amelybe CSS szabályokat is írhatunk.

Ha szeretnénk design módosítást végezni, vagy akár teljesen egyedi designt készíteni, ebben a fájlban tehetjük ezt meg.

Így már nem kell felülírnunk az alapértelmezett sablonhoz tartozó CSS szabályokat a már jól ismert helyen, hanem közvetlenül az eredeti CSS fájlokat szerkeszthetjük. Ennek több előnye is van:

  • a betöltődési sebesség csökken,
  • átláthatóbb lesz a kód,
  • egyszerűbb kódolást tesz lehetővé (például, amit eddig 3 szabályból oldhattunk meg, ezentúl egy szabállyal is megoldható).

Természetesen a sablon stílusában található színek változtathatók/bővíthetők.

A bolt adminisztrátora a Sablon testreszabás oldalon a Sablon színek fülön tudja a színeket kicserélni. Azonban, hogyan lehet ide új színeket felvenni vagy módosítani a kezdeti értékét egy színnek?

Ezt a feladatot egy komolyabb szakmai ismeretekkel rendelkező felhasználó a config/config.data.json fájl segítségével tudja elvégezni, ez a fájl írja le a sablon szín változóit.

Ha ide felveszünk új változókat, az meg fog jelenni a sablon színek között, ha használjuk őket a style.scss-ben.

Például ezt látjuk a config.data.json fájlban:

config.data.json fájl

A body-background a webáruház háttérszínét adja meg, amelyet a style.scss-ben így tudunk felhasználni:

style.scss fájl

Sablon másolása

Lehetőségünk van sablon másolásra, ami olyan esetben lehet hasznos, ha szeretnénk készíteni egyedi designt, de nem a gyári Tokyo sablont szeretnénk felülírni.

Ezzel a lehetőséggel készíthetünk évszakokra, ünnepekre optimalizált designt is, de ha csak kipróbálnánk valamit, akkor is érdemes azt egy másolatban csinálni, mint az eredeti sablont szerkeszteni.

A sablon másolás a Beállítások> Megjelenés> Sablon kiválasztás menüpontban, a Műveletek gombra kattintva érhető el.

Miután rákattintottunk a Sablon másolása pontra, egy felugró ablakban nevezhetjük el a másolatot:

Sablon másolása

Gyakorlati példák

Végül szeretnénk bemutatni 3 gyakorlati példán keresztül, hogy mire is lehet használni többek között a Sablon fájl szerkesztőt.

Bizonyos részei a példáknak komolyabb, technikai hangvételű részek lehetnek, ezzel is mutatva, hogy megfelelő tudást igényel a funkció használata. Ez természetesen lehet saját, illetve külső segítség is.

“Kosárba rakom” gomb áthelyezése

Ebben példában a termék oldalon szeretnénk elérni, hogy az ár és a kosárba rakom gomb egymás mellett legyen.

Leírás: ShopRenter Akadémia

Előtte:

Eredeti termékoldal

Utána:

"Kosárba rakom" gomb áthelyezése

Termékajánlóban szereplő termékkártyák számának megváltoztatása

Korábban nagyon sokszor tapasztaltuk, hogy ügyfeleink szerették volna az egyszerre megjelenő termékkártyák számát a webáruházhoz igazítani. Nekik segít most ez a leírás.

Leírás: ShopRenter Akadéma

Előtte:

Legújabb termékek

Utána:

Termékajánlóban szereplő termékkártyák számának megváltoztatása

Tokyo sablon alap betűtípusának megváltoztatása

Amikor szeretnénk egyedi betűtípust webáruházunkba, ezt a Beállítások> Megjelenés> Sablon testreszabás> Sablon CSS lehetőségnél is meg lehet tenni, viszont csak úgy, ha az alap betűtípus benne marad a rendszerben.

Viszont minél több betűtípus van betöltve a webáruházba, annál lassabb lesz az oldal betöltődés, így ha nem szeretnénk, hogy egy nem használt betűtípus lassítsa az oldalt, a Sablon fájl szerkesztő erre is megoldást nyújt.

Leírás: ShopRenter Akadémia

Mi következik ezután?

Láthatjuk, hogy a Sablon fájl szerkesztővel új lehetőségek egész tárháza nyílik meg a hozzáértők előtt.

“Szeretnék változtatni valamit a webáruház megjelenésén, amiről úgy gondolom, növelné webáruházam hatékonyságát, megvalósítható ez a ShopRenterrel?”

A Sablon fájl szerkesztővel az volt a célunk, hogy erre a kérdésre egyre kevesebbszer hangozzon el válaszként az, hogy “nem”.

A szerkesztő nagyobb szabadságot ad a bolt tulajdonosoknak, hogy célközönségük igényeire szabhassák webáruházukat. Amennyiben ehhez külső szakértő segítségét szeretnék igénybe venni, de nem tudják, kihez forduljanak, keressenek nyugodtan a ShopRenter ügyfélkapcsolatát és segítünk a preferenciájuknak megfelelő partnert találni.

A projekt fejlesztő csapata hónapokig dolgozott azon, hogy elérhetővé váljon a Sablon fájl szerkesztő a felhasználók számára, és az elkövetkező hónapokban is az új funkció tökéletesítésén fog munkálkodni ügyfeleink visszajelzései alapján.

Miközben arra is szeretnénk fókuszt helyezni, hogy a dinamikus modulok segítségével számos új funkció készüljön el a ShopRenterben.

Célunk pedig nem más, mint hogy a közeljövőben megvalósuljon az, amire minden bérlős webáruház tulajdonos vágyik, egy felhasználóbarát webáruház korlátok nélkül.