Webáruház menedzselés

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

9 perc olvasási idő Újdonság: 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.

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.

Fontos figyelmeztetés: ha módosítjuk a szerkesztőben egy sablon fájlait, akkor az olyan rendszerfrissítések, amelyek érintik a korábban egyedileg módosított sablon fájlokat, nem kerülnek be majd automatikusan a boltjába. Ilyen esetekben a régi működés és megjelenés marad mindaddig, amíg el nem végzi a szükséges módosításokat a sablon fájlokban.

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.

Szeretnéd webáruházad egyedi designját szakértőkre bízni?
Mi a Shoprenternél az egyedi design szolgáltatásunk keretében használhatósági tesztelést is végzünk webáruházadon. Ha érdekelnek a részletek, igényelj ingyenes konzultációt szakértőnkkel!

Egyedi design

Legfrissebb bejegyzések

Előző bejegyzés:
Lyamar.hu esettanulmány
Hogyan növelte 17-szeresére bevételeit a Lyamar.hu webáruház a SEO segítségével

Sokan álmodoznak arról, hogy önmaguk főnökeként otthonról építenek majd fel egy sikeres vállalkozást, így ...Elolvasom

Close