HTML kódy

Důležité: tato funkce je určena uživatelům, kteří mají zkušenosti s tvorbou webových stránek a ovládají HTML, CSS, případně Javascript. Pokud nastavení nerozumíte, můžete vašimi úpravami narušit chod e-shopu. Například vložením jQuery zrušit fungování každého jQuery pluginu, případně načítání všech JavaScriptů na stránkách.

Pokud chcete či potřebujete ve svém obchodě provést úpravy pomocí vlatních HTML kódů, a HTML, CSS a Javascript neovládáte, můžete se s poptávkou obrátit na někoho z našich partnerů.

Editace HTML kódu

Editace HTML kódu se nachází v umístění Vzhled a Obsah → Editor → HTML kód.

Do sekce Záhlaví (před koncovým tagem HEAD) se vkládají meta tagy, odkazy na CSS, JavaScripty apod. Tagy vložené na tomto místě se zobrazí v kódu mezi značkami <head></head>. Úpravu v této sekci dobře zvažte, abyste do kódu nevložili nějakou funkcionalitu, která by vám mohla uškodit. Do sekce Zápatí (před koncovým tagem BODY) můžete vkládat některé JavaScripty apod.

Pokud chcete editovat vzhled záhlaví na vašem e-shopu (tj. logo, obrázek), podívejte se na nápovědu Záhlaví webu. Do zápatí lze pak vložit Ikonky a Odkazy.

Sekce Dokončená objednávka se používá pro sledování konverzí. Kódy se uplatní pouze na děkovací stránce objednávkového procesu. Doporučujeme místo této možnosti použit Google Tag Manager, který vám umožní zpracovat informace o objednávce.

Do sekce Robots.txt se obvykle vkládají direktivy, kterými zamezíte robotům vyhledávačů přístup k vybraným stránkám vašeho e-shopu. Vložený text se přidá na konec souboru robots.txt.

Délka HTML kódu

Do každé ze čtyř sekcí (Záhlaví, Zápatí, Dokončená objednávka a Robots.txt) můžete vložit validní HTML kód o maximální délce 8192 znaků. Po dosažení limitu není možné provedené změny uložit.

Pokud chcete vložit delší kód, je třeba nahrát soubor s kódem přes FTP klienta a na příslušnou část kódu odkázat. Více o informací o tomto způsobu nahrávání v článku FTP.

Pravidla vkládání souborů s kódem

Obecné pokyny

Odkaz na soubor s delším kódem může vypadat v případě JavaScriptu takto: <script src="/user/documents/modification.js" type="text/javascript"></script> nebo v případě CSS takto: <link href="/user/documents/style.css" rel="stylesheet" />.

Při editaci souboru, který chcete nahrát a odkazovat na něj, se ujistěte, že máte nastaveno ve vašem editoru kódování UTF-8. Zabráníte tak, aby se české znaky změnily na �.

Verze souboru

Přidáním ?v=CISLO_VERZE za cestu k souboru se vynutí načtení aktuálního souboru. Například pro čtvrtou verzi aktuálního JavaScriptu napíšete odkaz takto: <script src="/user/documents/modification.js?v4" type="text/javascript"></script>. V žádném případě nepoužívejte timestampy.

Další možností je použít při ladění nového CSS nebo JavaScriptu placeholder DEBUG_TIMESTAMP, kterým vynutíte načtení aktuálního souboru při každém obnovení stránky:

 <script src="/user/documents/modification.js?v=#DEBUG_TIMESTAMP#"></script>

Aby DEBUG_TIMESTAMP fungoval, je potřeba vytvořit cookie debugTimestamp a být přihlášený pod administrátorským účtem. V konzoli zadejte:

 shoptet.cookie.create('debugTimestamp', 1, {days: 1});

Soubory JS

V soubor JavaScriptu nepoužívejte značku document.write(), která blokuje hladké načítání scriptů. Pokud CSS nebo JS soubor generujete na serveru (např. PHP scriptem), doporučujeme soubor generovat s předstihem a uložit na disk, aby se při vyřizování požadavku rovnou servíroval uložený script (styl) a obsluha požadavku se nezdržovala generováním.

Při vkládání souboru JavaScriptu (JS), smí být v souboru jen samotný JavaScript. Tedy jen to, co se nachází mezi značkami <script> </script>. Tyto značky samotné ani HTML komentáře do souboru nepatří.

Nepoužívejte obfuskované JavaScripty. Google e-shopy s těmito kódy považuje za podezřelé a neodkazuje na ně v reklamách.

Doporučení pro rychlé načítání

Pro rychlejší načítání z FTP úložiště doporučujeme URL adresy vypisovat včetně CDN prefixu.

<script src="https://cdn.myshoptet.com/usr/www.domena-eshopu.cz/user/documents/common.js" type="text/javascript"></script>  
<link href="https://cdn.myshoptet.com/usr/www.domena-eshopu.cz/user/documents/style.css?v=1" rel="stylesheet" />

Doporučení pro rychlé načítání (určeno partnerům)

Kodérům z řad partnerů doporučujeme jako úložiště souborů CSS a JS použít FTP /user/documents/ na jejich vlastním partnerském e-shopu. Zajistíte tak optimální rychlost doručení souboru, avšak zároveň zamezíte závislosti na dalším hosting providerovi. Doporučujeme použít URL včetně CDN prefixu, který zajistí, že nedojde 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" />

Poznámka v kódu

Aby byl váš HTML kód přehledný, doporučujeme vkládat do něj poznámky s informacemi. Tyto poznámky vkládejte jen do HTML editoru v administraci. Poznámky nepoužívejte ve vložených souborech CSS a JS (JavaScript).

Díky poznámce se tak snáze vyznáte v tom, k čemu daná část kódu slouží, kde kód začíná a končí atp. Tyto poznámky bude prohlížeč ignorovat, uvidí je tedy jen ten, kdo kód edituje. Takovou poznámku vložíte tagem .

Tedy například:

<!-- Váš název kódu Start -->  
<!-- Váš název kódu Konec -->

Obsah článku