Kódy do šablon

E-shopům a partnerům umožňujeme vkládání vlastních HTML bloků. Mezi typická využití této možnosti patří například vlastní grafické úpravy, marketingové a měřící kódy a mnoho dalších.

Typy vkládaných kódů

V ekosystému Shoptet rozeznáváme tři typy vkládaných kódů: Kódy v e-shopu, kódy spravované přes API endpointy, a kódy doplňku vkládané v partnerské administraci doplňku.

Ve všech případech je možné vložit maximálně 8192 znaků do jednoho umístění. Je však možné vložit soubor pomocí <SCRIPT src="...js"> nebo <LINK rel="stylesheet" type="text/css" href="...css">.

1. kódy v e-shopu

Bloky kódu se zadávají v administraci e-shopu. Zásadní rozdíl oproti kódům zadávaným na úrovni doplňku je, že kódy specifické pro e-shop ovlivní vždy pouze konkrétní obchod, nejsou tedy efektivní za účelem sdíleného kódu napříč více obchody. Více informací o projektových kódech lze najít v tomto článku na webu podpory.

2. kódy spravované přes API endpointy

S kódy lze pracovat přes API endpoint /template-include. Více informací na webu API dokumentace.

3. kódy vkládané v administraci doplňků

Vkládané HTML kódy lze v administraci vyplnit/upravit na stránce detailu doplňku, v záložce Kódy.

Kód vložený v administraci doplňku je vložen do všech eshopů, které mají tento doplněk nainstalovaný.


obr. 1: sekce pro editaci kódů v detailu služby

Umístění vkládaných kódů

Existují tři umístění vkládaných html kódů v závislosti na tom v jaké části stránky / fázi objednávky se do html vloží: (Záhlaví, Zápatí a Dokončená objednávka).

Záhlaví každé stránky

Kód v poli záhlaví bude vložen do každé stránky eshopu před uzavřením párového tagu <HEAD />. Toto pole tedy není vhodné pro přímé vizuální úpravy typu výměna loga. Typické využití jsou naopak měřící kódy, odkazy na vlastní CSS soubory anebo vlastní meta tagy. U úprav tohoto pole se doporučuje zvýšená opatrnost, může totiž při nesprávném využití negativně ovlivnit např. pozice obchodu ve vyhledávačích.

Zápatí každé stránky

Kód v poli zápatí bude vložen do každé stránky eshopu před uzavřením tagu <BODY />. Lze jej tedy využít jak k includování vlastních skriptů ve fázi načteného dokumentu, tak i k drobným vizuálním prvkům – ikonkám, odkazům a widgetům, které se zobrazí v patičce vygenerované stránky.

Dokončená objednávka

Kód v tomto poli se zpracuje pouze na stránce „Děkujeme“, která se zákazníkovi zobrazí při úspěšném dokončení objednávky. V dokumentu se takový blok vygeneruje uvnitř těla zmíněné stránky.

Pravidla a pokyny pro vkládané kódy

Pravidla se vztahují zejména na kódy vkládané na úrovni doplňku, ať už v administraci, či přes API endpoint.

Pravidla

Doporučení

Takhle ne!

Pořadí vypsání doplňků ve vygenerované stránce

Vkládané kódy se do výsledné stránky vygenerují dle typu v následujícím pořadí:

  1. Kódy doplňku vkládané přes API pomocí endpointů template-include. Je-li takových kódů více z několika doplňků, na pořadí vložení nelze spoléhat.
  2. Kódy z doplňku (z administrace doplňku). Je-li takových kódů více z několika doplňků, na pořadí vložení nelze spoléhat.
  3. Kódy z administrace eshopu

V rámci více bloků kódu jednoho typu (např. více různých doplňků na jednom e-shopu) není pevné pořadí garantováno.

Dynamicky vkládané hodnoty

Platí pouze pro kódy vkládané v administraci doplňku!

Pro přizpůsobení zpracování bloku kódu vlastnostem konkrétního obchodu lze v administraci doplňku – použít následující značky, které budou při vykreslení stránky nahrazeny hodnotami z prostředí:

#HOST# -> například fenix.myshopet.com
#PROJECT_ID# -> například 159834
#TEMPLATE# -> například Step, Classic, Techno
#LANGUAGE# -> například cs, sk

Příklad ukazuje jakým způsobem je možné přizpůsobit JS i CSS kód pro konkrétní e-shop.

<script type="text/javascript">
    var demoPartner = { 'host': '#HOST#', 'projectId': #PROJECT_ID#, 'template': '#TEMPLATE#', 'lang': '#LANGUAGE#' };
</script>
<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" />
Facebook
Twitter