Az OpenCart Theme Editorával (sablonszerkesztőjével) közvetlenül az adminból módosíthatod a bolt sablonjait, és ha a Yaplet kódot a lábléc sablonjához adod, a chat minden oldalon megjelenik. Kimásolsz egy kódrészletet a Yapletből, beilleszted a láblécbe, és megjelenik a chat gomb a boltodban. Nem kell hozzá bővítmény vagy FTP-hozzáférés.
Ezek a lépések az OpenCart 4.1-es és újabb verzióira vonatkoznak. Az OpenCart 4.0 és 3.x Theme Editora másképp néz ki; az ezekre vonatkozó lépéseket a cikk végén találod. Az admin menüpontjait és gombjait angolul írjuk, ahogy az OpenCart angol nyelvű adminjában látod őket, zárójelben magyar fordítással; magyar nyelvi csomaggal a nevük eltérhet.
1. Másold ki a Yaplet kódodat
A Yaplet bal oldali menüjében menj a Márka → (a márkád) → Chat widget → Telepítés útvonalra. Ha a fül megkérdezi, min fut a weboldalad, válaszd a Más weboldal lehetőséget. Másold ki a kódot a kódblokk másolás gombjával.
A lábléc sablonja HTML, ezért a kódnak egy <script> és egy </script> sor között kell lennie. Ha a Más weboldal lehetőséget választottad, a kódban már benne vannak ezek a sorok. Ha a fül nem kérdezett rá, a kód sima JavaScript, amely így kezdődik: !function (Yaplet, és a 3. lépésben adod hozzá a sorokat.
2. Nyisd meg a lábléc sablonját
- Az OpenCart adminban menj a Design → Theme Editor (Dizájn → Sablonszerkesztő) menüpontra. Ha a listában már szerepel a common/footer, azt szerkeszd, ne adj hozzá újat, és folytasd a 3. lépéssel.
- Kattints az Add New (Új hozzáadása) gombra (a plusz jel).
- A Store (Bolt) mezőben válaszd a Default (Alapértelmezett) lehetőséget, vagy azt a boltot, ahol chatet szeretnél.
- A Choose Template (Sablon kiválasztása) mezőben válaszd a common/footer sablont. A szerkesztő betölti a lábléc mostani kódját.
3. Add hozzá a Yaplet kódot
- Görgess a kód végére, és keresd meg ezt a sort:
</body></html>. A kód többi részét hagyd úgy, ahogy van: amit itt elmentesz, az a teljes lábléc sablont lecseréli. - Kezdj egy új sort közvetlenül a
</body></html>fölött. - Illeszd be a Yaplet kódot az új sorba. A kódnak egy
<script>sorral kell kezdődnie, és egy</script>sorral kell végződnie. Ha a kimásolt kód ehelyett így kezdődik:!function (Yaplet, írd elé egy új sorba, hogy<script>, utána pedig egy új sorba, hogy</script>. - Kapcsold be a Status (Állapot) kapcsolót.
- Kattints a Save (Mentés) gombra (a floppy ikon fent).
4. Nézd meg a boltodat
Nyisd meg a boltodat egy új böngészőfülön, és frissítsd az oldalt a Ctrl+F5 billentyűkkel. A Yaplet chat gombja megjelenik a jobb alsó sarokban. Kattints rá, és nézd meg, hogy megnyílik-e a chat.
A teljes ellenőrzőlistát itt találod: Telepítés ellenőrzése.
OpenCart 4.0 és 3.x
Menj a Design → Theme Editor menüpontra, és a Choose your store (Válaszd ki a boltodat) résznél válaszd ki a boltodat. A Choose a template (Válassz sablont) résznél nyisd meg a common mappát, és kattints a footer.twig fájlra. Add hozzá a kódot egy új sorban a </body></html> fölé ugyanúgy, mint a 3. lépésben, majd kattints a Save (Mentés) gombra.
Ha nem jelenik meg a chat
- A lábléc módosítása ki van kapcsolva. A kikapcsolt bejegyzés szürkén látszik a Theme Editor listájában. Szerkeszd, kapcsold be a Status kapcsolót, és mentsd.
- Másik boltot választottál. Egy bejegyzés csak a benne kiválasztott boltot módosítja. Ha több boltod van, mindegyikhez add hozzá a kódot.
- A kód szövegként látszik az oldalak alján. Hiányoznak a
<script>tagek. Szerkeszd a láblécet, írd a kód elé egy új sorba, hogy<script>, a kód után egy új sorba, hogy</script>, majd mentsd. - Mentés után üres oldalt vagy hibát mutat a bolt. A lábléc sablonjának egy része véletlenül megváltozott. Szerkeszd a bejegyzést, és kapcsold ki a Status kapcsolót, hogy visszakapd az eredeti láblécet, majd próbáld újra.
- A boltod egy másik fejlesztő sablonját használja. Lehet, hogy a sablonnak saját lábléce van, ezért a módosításnak nincs hatása. Kérdezd meg a sablon fejlesztőjét, hová tehetsz szkriptet.
- A böngésző az oldal egy régi változatát mutatja. Frissíts a Ctrl+F5 billentyűkkel, vagy nyisd meg a boltot egy privát böngészőablakban.
Mi a következő lépés?
Ha meg szeretnéd tudni, mit csinál a kód, és hol találod a widget azonosítóját, olvasd el ezt: A Yaplet telepítése.