Šablony vzhledu aplikace Shopsun

(Provoz aplikace Shopsun)

Základní informace

 

Systém šablon pro eshop je postaven na principu HTML a její tvorba není nijak složitá. Základem je vytvořit si vlastní rozložení (layout) a vzhled, do kterého pak pomocí speciálních tagů vložíte sekce (bloky) eshopu. Díky tomuto jednoduchému principu lze vytvářet šablony pomocí HTML editorů jako například Microsoft Frontpage, Macromedia Dreamveawer atd.

Popis tagů

 

Jednotlivé tagy udávají kde a na jakém místě se má ve Vaší šabloně vykreslit blok (kategorie eshopu) nebo vypsat hodnotu proměnné (např. název eshopu). Všechny tagy musí být ve složených závorkách, musí začínat hs: a musí být dodržena malá / velká písmena. V případě, že je nalezen neexistující tag, je jeho funkce ignorována a šablona se vykreslí aniž by tento tag byl v daném místě uveden.

Tagy reprezentující proměnné

Název tagu Popis tagu Hodnota
{hs:name} Název eshopu / stránky Hodnota této proměnné je název eshopu (administrace -> nastavení -> nastavení eshopu)
{hs:keywords} Klíčová slova Hodnota této proměnné je název eshopu (administrace -> nastavení -> nastavení eshopu)
{hs:description} Popis eshopu / stránky Hodnota této proměnné je název eshopu (administrace -> nastavení -> nastavení eshopu)
{hs:baseUrl} URL eshopu / stránky Hodnota této proměnné je primární adresa e-shopu / stránek. Automaticky doména na které je eshop instalován, nebo dle nastavení (administrace -> nastavení -> nastavení eshopu -> parametry a loga)
{hs:shopUrl} URL eshopu / stránky (stejné jako baseUrl) Hodnota této proměnné je primární adresa e-shopu / stránek. Automaticky doména na které je eshop instalován, nebo dle nastavení (administrace -> nastavení -> nastavení eshopu -> parametry a loga)
{hs:catalogUrl} URL katalogu Hodnota této proměnné je adresa do katalogu (administrace -> nastavení -> obsah stránek)
{hs:tplPath} Cesta do adresáře s šablonou  
{hs:email} Emailová adresa eshopu (převzato z nastavení) Hodnota této proměnné je emailová adresa (administrace -> nastavení -> nastavení eshopu)
{hs:phone} Telefon eshopu (převzato z nastavení) Hodnota této proměnné je telefonní číslo (administrace -> nastavení -> nastavení eshopu)
{hs:gsm} Mobilní telefon eshopu (převzato z nastavení) Hodnota této proměnné je telefonní číslo (administrace -> nastavení -> nastavení eshopu)
{hs:text1} Modifikovatelný text 1 (lze definovat v nastavení eshopu) Hodnota této proměnné je Vámi definovaný libovolný text (administrace -> nastavení -> nastavení vzhledu)
{hs:text2} Modifikovatelný text 2 (lze definovat v nastavení eshopu) Hodnota této proměnné je Vámi definovaný libovolný text (administrace -> nastavení -> nastavení vzhledu)
{hs:text3} Modifikovatelný text 3 (lze definovat v nastavení eshopu) Hodnota této proměnné je Vámi definovaný libovolný text (administrace -> nastavení -> nastavení vzhledu)
{hs:text4} Modifikovatelný text 4 (lze definovat v nastavení eshopu) Hodnota této proměnné je Vámi definovaný libovolný text (administrace -> nastavení -> nastavení vzhledu)
{hs:text5} Modifikovatelný text 5 (lze definovat v nastavení eshopu) Hodnota této proměnné je Vámi definovaný libovolný text (administrace -> nastavení -> nastavení vzhledu)
{hs:text6} Modifikovatelný text 6 (lze definovat v nastavení eshopu) Hodnota této proměnné je Vámi definovaný libovolný text (administrace -> nastavení -> nastavení vzhledu)
{hs:specialText1} Speciální text 1 (lze definovat v nastavení eshopu, může být blok, reklama, obrázek atd...) Hodnota této proměnné je Vámi definovaný text (administrace -> nastavení -> speciální text)
{hs:specialText2} Speciální text 2 (lze definovat v nastavení eshopu, může být blok, reklama, obrázek atd...) Hodnota této proměnné je Vámi definovaný text (administrace -> nastavení -> speciální text)
{hs:h1} Nadpis H1 Hodnota této proměnné je automaticky generována dle toho kde se zákazník nachází (název zboží, kategorie, název e-shopu atd)
{hs:h2} Nadpis H2 Hodnota této proměnné je automaticky generována dle toho kde se zákazník nachází (název sekce, kategorie, název zboží atd)
{hs:h3} Nadpis H3 Hodnota této proměnné je automaticky generována (název bloku)
{hs:h4} Nadpis H4 Hodnota této proměnné je automaticky generována (název bloku)
{hs:h5} Nadpis H5 Hodnota této proměnné je automaticky generována (název bloku)
{hs:h6} Nadpis H6 Hodnota této proměnné je automaticky generována (název bloku)
{hs:textMainMenu} Vloží nadpis "Hlavní menu" (pokud není hodnota textu již přepsána v administraci) Hodnota této proměné je text dle vybrané lokalizace

Tagy reprezentující funkce

Název tagu Popis tagu Bližší popis
{hs:mainMenu} Vloží hlavní menu Tato funkce vkládá hlavní menu e-shopu (administrace -> nastavení -> položky hlavního menu)
{hs:menuItems} Vloží jen položky hlavního menu Tato funkce vkládá pouze položky hlavního menu e-shopu (administrace -> nastavení -> položky hlavního menu)
{hs:menu:X} Vloží nabídku s ID X (pokud X je 1, pak je tato volba stejná jako {hs:mainMenu}) Tato funkce vkládá menu 1 až 9 (administrace -> nastavení -> položky hlavního menu)
{hs:menu:itemX} Vloží konkrétní položku z hlavní nabídky (číslo X udává ID položky) Tato funkce vkládá pouze jednu položku dle ID z menu (administrace -> nastavení -> položky hlavního menu)
{hs:categories} Blok kategorií eshopu Tato funkce vkládá blok s kategoriemi produktů (administrace -> zboží -> kategorie)
{hs:navigationText} Navigační blok s textem Tato funkce vkládá blok s textem a odkazy podle toho kde se nachází návštěvník (např: Domů -> Televize -> LCD -> 23")
{hs:navigation} Navigační blok bez textu Tato funkce vkládá blok (bez textu) jen s odkazy podle toho kde se nachází návštěvník (např: Domů -> Televize -> LCD -> 23")
{hs:content} Obsahový blok Tato funkce vkládá hlavní blok s obsahem stránky (např: Katalog, Kontakty, Nákupní košík atd)
{hs:column} Postranní sloupec s moduly Tato funkce vkládá bloky levého / pravého sloupce (např: Vyhledávání, Přihlášení, Online platby atd)
{hs:kosik} Odkaz pro vstup do košíku Tato funkce vkládá textový odkaz do košíku (URL adresa je generována automaticky dle sekce nákupního košíku)
{hs:kosikCena} Zobrazí hodnotu zboží v košíku Tato funkce generuje odkaz do nákupního košíku a jako text je dosazena hodnota zboží v košíku(URL adresa je generována automaticky dle sekce nákupního košíku)
{hs:kosikPolozek} Zobrazí počet položek v košíku Tato funkce generuje odkaz do nákupního košíku a jako text je dosazen počet položek v košíku(URL adresa je generována automaticky dle sekce nákupního košíku)
{hs:kosikLink:text} Zobrazí odkaz do košíku s Vaším textem Tato funkce generuje odkaz do nákupního košíku a jako text je dosazen Vámi zadaný text(URL adresa je generována automaticky dle sekce nákupního košíku), příklad {hs:kosikLink:Přejít do košíku}
{hs:searchForm(.*)} Vloží formulář pro vyhledávání v katalogu Tato funkce vloží hlavičku formuláře s automaticky generovaným ACTION, METHOD atd
{hs:(.*)FormEnd} Ukončuje formulář Tato funkce ukončí formulář
{hs:login} Blok s přihlášením nebo nastavením uživatele pokud je přihlášen Tato funkce vkládá formulář pro přihlášení nebo odkazy pro uživatele dle potřeby
{hs:loginForm} Vloží pouze formulář pro prihlášení uživatele Tato funkce vkládá formulář pro přihlášení uživatele
{hs:userLoged} Indikuje zda je nebo není uživatel přihlášen Tuto proměnou lze použít pro zjištění stavu přihlášeného uživatele
{hs:registraceLink} Vloží odkaz na registrační formulář Tato funkce vkládá odkaz na registrační formulář(URL adresa je generována automaticky dle sekce nákupního košíku)
{hs:registraceLink:text} Vloží odkaz s Vaším textem na registrační formulář Tato funkce vkládá odkaz na registrační formulář s Vámi zadaným textem(URL adresa je generována automaticky dle sekce nákupního košíku), příklad {hs:registraceLink:Nová registrace}
{hs:lastSoldItems} Blok s naposledy prodanými položkami Tato funkce vloží odkazy na napoledy prodané položky
{hs:topSoldItems} Blok s nejprodávanějšími položkami Tato funkce vloží odkazy na nejprodávanější položky (dle počtu jejich prodeje za 3 měsíce zpět)
{hs:interestItems} Blok s nejzajímavějšími položkami Tato funkce vloží odkazy na nejzajímavější položky v katalogu (dle počtu návštěv, prodeje a oblíbenosti)
{hs:rotateBanner} Rotující bannerová reklama Tato funkce vloží rotující reklamu (administrace -> marketing -> reklamní bannery)
{hs:slideItems} Rotující položky Tato funkce vloží položky z katalogu nebo zvolené kategorie, které se posouvají doleva nebo doprava (náhodně zvolené)
{hs:slideTopSold} Rotující nejprodávanější položky Tato funkce vloží položky z katalogu nebo zvolené kategorie, které se posouvají doleva nebo doprava (dle prodeje)
{hs:functionIcons} Ikonky funkcí eshopu (online platby, splátkový prodej atd)  
{hs:langSelect} Vloží select (rozbalovátko) s výběrem jazyka pro eshop  
{hs:langSelectText} Vloží text (Zvolte jazyk) a select (rozbalovátko) s výběrem jazyka pro eshop  
{hs:langFlags} Vloží grafické vlaječky pro výběr jazyka eshopu  
{hs:langSelectText} Vloží text (Zvolte jazyk) a grafické vlaječky pro výběr jazyka eshopu  
{hs:langId} Vloží kod zvoleneho jazyka (cz,sk,pl atd)  
{hs:currency} Vloží blok s výběrem platebních měn  
{hs:currencySelect} Vloží select (rozbalovátko) s výběrem platebních měn  
{hs:currencySelectText} Vloží text (Zvolte měnu) a select (rozbalovátko) s výběrem platebních měn  
{hs:currencyFlags} Vloží grafické vlaječky pro výběr platebních měn  
{hs:currencyFlagsText} Vloží text (Zvolte měnu) a grafické vlaječky pro výběr platebních měn  

Podmínky

Název tagu Popis tagu Bližší popis
{hs:if:neco} Začátek podmínky (neco reprezentuje SEO URL položky hlavního menu) Jestliže volaná sekce eshopu se rovná hodnotě neco, je vykreslena část šablony mezi {hs:if:neco} a {hs:else:neco}. (například {hs:if:obchodni-podminky} je splněna pokud voláme sekci Obchodní podmínky) {hs:if:neco}
Tento text bude vidět pouze v sekci Obchodní podmínky
{hs:else:neco}
Tento text bude vidět všude kromě sekce Obchodní podmínky
{hs:end:neco}
{hs:else:neco} Opačný význam podmínky (neco reprezentuje SEO URL položky hlavního menu) Pokud podmínka neni splněna, tedy volaná sekce eshopu se nerovná hodnotě neco, je vykreslena část šablony mezi {hs:else:neco} a {hs:end:neco}. (například {hs:else:obchodni-podminky} je splněna pokud voláme sekci Výrobci) {hs:if:neco}
Tento text bude vidět pouze v sekci Obchodní podmínky
{hs:else:neco}
Tento text bude vidět všude kromě sekce Obchodní podmínky
{hs:end:neco}
{hs:end:neco} Ukončuje blok podmínky (neco reprezentuje SEO URL položky hlavního menu) Určuje konec podmínky. {hs:if:neco}
Tento text bude vidět pouze v sekci Obchodní podmínky
{hs:else:neco}

 

Tento text bude vidět všude kromě sekce Obchodní podmínky
{hs:end:neco}

Tagy pro podmínky

Název tagu Popis tagu Bližší popis
{hs:podminka:langCz} Pokud je zvolený český jazyk vykreslí se HTML v tomto bloku (neco reprezentuje SEO URL položky hlavního menu) Jestliže volaná sekce eshopu se rovná hodnotě neco, je vykreslena část šablony mezi {hs:if:neco} a {hs:else:neco}. (například {hs:if:obchodni-podminky} je splněna pokud voláme sekci Obchodní podmínky) {hs:if:langCz}
Máte zvolen český jazyk
{hs:else:langCz}
Nemáte zvolen český jazyk
{hs:end:langCz}
 

Implementace vlastní šablony

Umístit šablonu na FTP

Vlastní šablonu je potřeba umístit do adresáře eshopu "/data/template/". Soubor šablony musí být vždy index.tpl!

Aktivace šablony pro e-shop

V případě, že jste nahráli šablonu do správného adresáře, měla by se Vám automaticky zaktivovat volba "VLASTNÍ VZHLED" v sekci nastavení vzhledu ("Nastavení - Šablony vzhledu"). Vyberte tuto možnost a stiskněte tlačítko uložit. Pokud je vše v pořádku je Vaše šablona načtena a zobrazena.

Ke stažení

 

Vertikální šablona / Horizontální šablona - Jedná se o jednu ze základních šablon pro eshop. Tuto šablonu lze stáhnout a libovolně upravit nebo použít jako testovací šablonu. Tyto šablony se používají v kombinaci nastavením "Vlastní vzhled + výchozí CSS" v administraci eshopu v sekci "Nastavení - Šablony vzhledu".

Upozornění: Nedoporučujeme využívat vlastních vzhledů s výchozím CSS, jelikož mohou být některé prvky změněny v některých z aktualizací a tím by se mohla narušit Vaše vlastní vyvíjená šablona.

Vertikální šablona bez CSS / Horizontální šablona bez CSS - Jedná se o jednu ze základních šablon pro eshop zbavených CSS nastavení (primárně tedy slouží k vytvoření kompletně vlastního vzhledu). Tuto šablonu lze stáhnout a libovolně upravit nebo použít jako testovací šablonu. Tyto šablony se používají v kombinaci nastavením "Vlastní vzhled bez výchozí CSS" v administraci eshopu v sekci "Nastavení - Šablony vzhledu".

 



Zpětná vazba (feedback)

Byl tento článek nesrozumitelný, obsahoval nepřesné informace, nebo v něm nějaké informace chyběly?
Napište nám nebo využijte komentářů níže.

Nový komentář

(nebude zobrazen)