Dôležité: táto stránka je určená používateľom, ktorí majú skúsenosti s tvorbou webových stránok a ovládajú HTML, CSS, prípadne Javascript. Pokiaľ nastaveniam nerozumiete, môžete vašimi úpravami narušiť chod e-shopu. Napríklad vložením jQuery zrušiť fungovanie každého jQuery pluginu, prípadne načítanie vašich JavaScriptov na stránkach.
Editácia HTML kódu sa nachádza v umiestení Vzhľadu a Obsah → Editor → HTML kód.
Do sekcie Záhlavia (pred koncovým tagom HEAD) sa vkladajú meta tagy, odkazy na CSS, JavaScript a pod. Tagy vložené na tomto mieste sa zobrazia v kóde medzi značkami <head></head>
. Úpravu v tejto sekcii dobre zvážte, aby ste do kódu nevložili nejakú funkcionalitu, ktorá by vám mohla uškodiť. Do sekcie Pätička (pred koncovým tagom BODY) môžete vkladať niektoré JavaScripty a pod.
Pokiaľ chcete editovať vzhľad záhlavia na vašom e-shope (tj. logo, obrázok), pozrite sa do článku Záhlavie webu. Do pätičky je potom možné vložiť Ikonky a Odkazy.
Sekcia Dokončená objednávka sa používa pre sledovanie konverzií. Kódy sa uplatňujú iba na ďakovnej stránke objednávkového procesu. Odporúčame namiesto tejto možnosti použiť Google Tag Manager, ktorý vám umožní spracovať informácie o objednávke.
Do sekcie robots.txt sa obvykle vkladajú direktívy, ktorými zamedzíte robotom vyhľadávačom prístup k vybraným stránkam vášho e-shopu. Vložený text sa pridá na koniec súboru robots.txt.
Do každej zo štyroch sekcií (Záhlavie, Pätička, Dokončená objednávka a robots.txt) môžete vložiť platný HTML kód v maximálnej dĺžke 8192 znakov. Po dosiahnutí limitu nie je možné vykonané zmeny uložiť.
Pokiaľ chcete vložiť dlhší kód, je potrebné nahrať súbor s kódom cez FTP klienta a na príslušnú časť kódov odkázať. Viac o informácií o tomto spôsobe nahrávania v článku FTP.
Odkaz na súbor s dlhším kódom môže vyzerať v prípade JavaScriptu takto: <script src="/user/documents/modification.js" type="text/javascript"></script>
alebo v prípade CSS takto: <link href="/user/documents/style.css" rel="stylesheet" />
.
Pri editácii súboru, ktorý chcete nahrať a odkazovať naň, sa uistite, že máte nastavené vo vašom editore kódovanie UTF-8. Zabránite tak, aby sa slovenské znaky zmenili na �.
Pridaním ?v=CISLO_VERZE
za cestu k súboru sa vynúti načítanie aktuálneho súboru. Napríklad pre štvrtú verziu aktuálneho JavaScriptu napíšete odkaz takto: <script src="/user/documents/modification.js?v4" type="text/javascript"></script>
. V žiadnom prípade nepoužívajte timestampy.
Ďalšou možnosťou je použiť pri ladení nového CSS alebo JavaScriptu placeholder DEBUG_TIMESTAMP
, ktorým vynútite načítanie aktuálneho súboru pri každom obnovení stránky:
<script src="/user/documents/modification.js?v=#DEBUG_TIMESTAMP#"></script>
Aby DEBUG_TIMESTAMP
fungoval, je potrebné vytvoriť cookie debugTimestamp
a byť prihlásený pod administrátorským účtom. V konzole zadajte:
shoptet.cookie.create('debugTimestamp', 1, {days: 1});
V súbore JavaScriptu nepoužívajte značku document.write()
, ktorá blokuje hladké načítanie scriptov. Pokiaľ CSS alebo JS súbor generujete na serveri (napr. PHP scriptom), odporúčame súbor generovať s predstihom a uložiť na disk, aby sa pri vybavovaní požiadaviek rovno servíroval uložený script (štýl) a obsluha požiadavky sa nezdržovala generovaním.
Pri vkladaní súboru JavaScriptu (JS), smie byť v súbore len samotný JavaScript. Teda iba to, čo sa nachádza medzi značkami <script>
</script>
. Tieto značky samotné ani HTML komentáre do súboru nepatria.
Nepoužívajte obfuskované JavaScripty. Google e-shopy s týmito kódmi považuje za podozrivé a neodkazuje na nich v reklamách.
Pre rýchlejšie načítanie z FTP úložiska odporúčame URL adresy vypisovať vrátane CDN prefixu.
<script src="https://cdn.myshoptet.com/usr/www.domena-eshopu.sk/user/documents/common.js" type="text/javascript"></script>
<link href="https://cdn.myshoptet.com/usr/www.domena-eshopu.sk/user/documents/style.css?v=1" rel="stylesheet" />
Kóderom z radov partnerov odporúčame ako úložisko súborov CSS a JS použiť FTP /user/documents/
na ich vlastnom partnerskom e-shope. Zaistíte tak optimálnu rýchlosť doručenia súboru, avšak zároveň zamedzíte závislosti na ďalšom hosting providerovi. Odporúčame použiť URL vrátane CDN prefixu, ktorý zaistí, že nedôjde k problému kvôli CORS.
<script src="https://cdn.myshoptet.com/usr/demo-partner.myshoptet.com/user/documents/addon_1/common.js" type="text/javascript"></script>
<link href="https://cdn.myshoptet.com/usr/demo-partner.myshoptet.com/user/documents/addon_1/#TEMPLATE#.css" rel="stylesheet" />
<link href="https://cdn.myshoptet.com/usr/demo-partner.myshoptet.com/user/documents/addon_1/#HOST#/style.css?v=1" rel="stylesheet" />
Aby bol váš HTML kód prehľadný, odporúčame vkladať do neho poznámky s informáciami. Tieto poznámky vkladajte iba do HTML editora v administrácii. Poznámky nepoužívajte vo vložených súboroch CSS a JS (JavaScript).
Vďaka poznámke sa tak ľahšie vyznáte v tom, k čomu daná časť kódu slúži, kde kód začína a končí atď. Tieto poznámky bude prehliadač ignorovať, uvidí ich teda len ten, kto kód edituje. Takúto poznámku vložíte tagom <!--
-->
.
Teda napríklad:
<!-- Váš názov kódu Štart -->
<!-- Váš názov kódu Koniec -->