Šablony vzhledu

(Savana aplikace / Hostshop)

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é

{hs:title} Title stránky
Hodnota této proměnné je složena z názvu sekce (administrace -> nastaven -> nastavení hlavního menu) a název eshopu (administrace -> nastavení -> nastavení eshopu)
<title>{hs:title}</title>
{hs:name} Název eshopu / stránky
Hodnota této proměnné je název eshopu (administrace -> nastavení -> nastavení eshopu)
<h1>{hs:name}</h1>
{hs:keywords} klíčová slova
Hodnota této proměnné jsou klíčová slova (administrace -> nastavení -> nastavení eshopu -> parametry a loga)
<meta name="keywords" content="{hs:keywords}" />
{hs:description} popis eshopu / stránky
Hodnota této proměnné je popis obchodu (administrace -> nastavení -> nastavení eshopu -> parametry a loga)
<meta name="description" content="{hs:description}" />
{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)
<a href="{hs:baseUrl}" title="{hs:title}" />{hs:title}</a>
{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)
<a href="{hs:shopUrl}" title="{hs:title}" />{hs:title}</a>
{hs:catalogUrl} URL katalogu
Hodnota této proměnné je adresa do katalogu (administrace -> nastavení -> obsah stránek)
<a href="{hs:catalogUrl}" title="Přejít do katalogu" />E-shop</a>
{hs:tplPath} cesta do adresáře s šablonou
Hodnota této proměnné je cesta do adresáře s aktuální nastavenou šablonou (cesta je generována automaticky)
<link href="{hs:tplPath}/style/style.css" rel="stylesheet" type="text/css" />
{hs:email} emailová adresa eshopu (převzato z nastavení)
Hodnota této proměnné je emailová adresa (administrace -> nastavení -> nastavení eshopu)
<a href="mailto:{hs:email}" title="Odeslat email na {hs:email}" />{hs:email}</a>
{hs:phone} telefon eshopu (převzato z nastavení) 
Hodnota této proměnné je telefonní číslo (administrace -> nastavení -> nastavení eshopu)
Kontaktujte nás na <span class="telefon">{hs:phone}</span>
{hs:gsm} mobilní telefon eshopu (převzato z nastavení) 
Hodnota této proměnné je telefonní číslo (administrace -> nastavení -> nastavení eshopu)
Objednávejte telefonicky na <span class="gsm">{hs:gsm}</span>
{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)
<span class="text">{hs:text1}</span>
{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)
<span class="text">{hs:text2}</span>
{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)
<span class="text">{hs:text3}</span>
{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)
<span class="text">{hs:text4}</span>
{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)
<span class="text">{hs:text5}</span>
{hs:text1} Modifikovatelný text 6 (lze definovat v nastavení eshopu)
Hodnota této proměnné je Vámi definovaný libovolný text (administrace -> nastavení -> nastavení vzhledu)
<span class="text">{hs:text1}</span>
{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)
<div class="reklama">{hs:specialText1}</div>
{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)
<div class="reklama">{hs:specialText2}</div>
{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)
<h1>{hs:h1}</h1>
{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)
<h2>{hs:h2}</h2>
{hs:h3} nadpis H3
Hodnota této proměnné je automaticky generována (název bloku)
<h3>{hs:h3}</h3>
{hs:h4} nadpis H4
Hodnota této proměnné je automaticky generována (název bloku)
<h4>{hs:h4}</h4>
{hs:h5} nadpis H5
Hodnota této proměnné je automaticky generována (název bloku)
<h5>{hs:h5}</h5>
{hs:h6} nadpis H6
Hodnota této proměnné je automaticky generována (název bloku)
<h6>{hs:h6}</h6>
{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
<div id="mainMenu">    
  <p>{hs:textMainMenu}</p>
  <ul class="odkazy">
  .
  .
  .    
  </ul>  
</div>

Tagy reprezentující funkce

{hs:mainMenu} vloží hlavní menu
Tato funkce vkládá hlavní menu e-shopu (administrace -> nastavení -> položky hlavního menu)
<div id="mainMenu">    
  {hs:menu}
</div>
{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)
<div id="mainMenu">    
  <ul class="odkazy">    
    {hs:menuItems}
  </ul>  
</div>
{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)
<div id="mainMenu">    
  {hs:menu:1}
</div>
.
.
.  
<div id="secondaryMenu">    
  {hs:menu:2}
</div>
{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)
<ul id="leftMenu">    
  {hs:menu:item10}
</ul>
.
.
.  
<div id="footer">    
  <ul id="leftMenu">    
    {hs:menu:item1}
    {hs:menu:item5}
    {hs:menu:item7}
    {hs:menu:item12}
  </ul>
</div>
{hs:categories} blok kategorií eshopu
Tato funkce vkládá blok s kategoriemi produktů (administrace -> zboží -> kategorie)
<div id="left">    
  {hs:categories}
</div>
{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")
<div id="article">    
  {hs:navigationText}
</div>
{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")
<div id="article">    
  {hs:navigation}
</div>
{hs:content} obsahový blok
Tato funkce vkládá hlavní blok s obsahem stránky (např: Katalog, Kontakty, Nákupní košík atd)
<div id="article">    
  {hs:content}
</div>
{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)
<div id="left">    
  {hs:column}
</div>
{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)
<div id="kosikInfo">    
  {hs:kosik}
</div>
{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)
<div id="kosikInfo">    
  {hs:kosikCena}
</div>
{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)
<div id="kosikInfo">    
  {hs:kosikPolozek}
</div>
{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)
<div id="kosikInfo">    
  {hs:kosikLink:Přejít do košíku}
</div>
{hs:searchForm(.*)} vloží formulář pro vyhledávání v katalogu
Tato funkce vloží hlavičku formuláře s automaticky generovaným ACTION, METHOD atd
<div id="vyhledavani">
  {hs:searchForm:id=search_form,class=testovaciFormular}
    <input type="text" name="istr" id="search_text" placeholder="Zadejte hledaný výraz" autocomplete="off">
    <input type="hidden" name="act" value="srch">
    <input type="submit" value="Hledat" id="SearchButton">
  {hs:searchFormEnd}
</div>
{hs:(.*)FormEnd} ukončuje formulář
Tato funkce ukončí formulář
<div id="vyhledavani">
  {hs:searchForm:id=search_form,class=testovaciFormular}
    <input type="text" name="istr" id="search_text" placeholder="Zadejte hledaný výraz" autocomplete="off">
    <input type="hidden" name="act" value="srch">
    <input type="submit" value="Hledat" id="SearchButton">
  {hs:searchFormEnd}
</div>
{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
<div id="userInfo">    
  {hs:login}
</div>
{hs:loginForm} vloží pouze formulář pro prihlášení uživatele
Tato funkce vkládá formulář pro přihlášení uživatele
<div id="userInfo">    
  {hs:loginForm}
</div>
{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
          <div id="info">
{hs:if:userLoged}
            <div class="nadpis">
              Uživatel
            </div>
            {hs:loginForm:E-mail:Heslo}
{hs:else:userLoged}
            <div class="nadpis">
              Přihlášení
            </div>
            {hs:loginForm:E-mail:Heslo}
            <p>{hs:registraceLink:Nová registrace}</p>
{hs:end:userLoged}
          </div>
{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)
<div id="userInfo">    
  {hs:registrace}
</div>
{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)
<div id="userInfo">    
  {hs:registraceLink:Nová registrace}
</div>
{hs:lastSoldItems} blok s naposledy prodanými položkami
Tato funkce vloží odkazy na napoledy prodané položky
<div id="kosikInfo">    
  {hs:lastSoldItems}
</div>
{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)
<div id="kosikInfo">    
  {hs:topSoldItems}
</div>
{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)
<div id="kosikInfo">    
  {hs:interestItems}
</div>
{hs:rotateBanner} rotující bannerová reklama
Tato funkce vloží rotující reklamu (administrace -> marketing -> reklamní bannery)
<div id="divProSlider">    
  {hs:rotateBanner}
</div>
{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é)
<div id="divProSlider">    
  {hs:slideItems}
</div>
{hs:slideTopSold} rotující nejrpodávanější položky
Tato funkce vloží položky z katalogu nebo zvolené kategorie, které se posouvají doleva nebo doprava (dle prodeje)
<div id="divProSlider">    
  {hs:slideTopSold}
</div>
{hs:functionIcons} ikonky funkcí eshopu (online platby, splátkový prodej atd)
Tato funkce je prozatím nefunkční
{hs:langSelect} vloží pouze 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
<div id="lang">    
  {hs:langSelectText}
</div>
{hs:langFlags} vloží pouze 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
<div id="lang">    
  {hs:langFlagsText}
</div>
{hs:langId} vloží kod zvoleneho jazyka (cz,sk,pl atd)
<img src="vlajka-{hs:langId}.gif" />    
          
{hs:currency} vloží blok s výběrem platebních měn
{hs:currencySelect} vloží pouze 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
<div id="lang">    
  {hs:currencySelectText}
</div>
{hs:currencyFlags} vloží pouze 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
<div id="lang">    
  {hs:currencyFlagsText}
</div>

Podmínky

{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}
<div id="div-pouze-pro-obchodni-podminky">    
  Tento text bude vidět pouze v sekci Obchodní podmínky
</div>
{hs:else:neco}
<div id="div-pro-ostatni-sekce">    
  Tento text bude vidět všude kromě sekce Obchodní podmínky
</div>
{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}
<div id="div-pouze-pro-obchodni-podminky">    
  Tento text bude vidět pouze v sekci Obchodní podmínky
</div>
{hs:else:neco}
<div id="div-pro-ostatni-sekce">    
  Tento text bude vidět všude kromě sekce Obchodní podmínky
</div>
{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}
<div id="div-pouze-pro-obchodni-podminky">    
  Tento text bude vidět pouze v sekci Obchodní podmínky
</div>
{hs:else:neco}
<div id="div-pro-ostatni-sekce">    
  Tento text bude vidět všude kromě sekce Obchodní podmínky
</div>
{hs:end:neco}

Tagy pro podmínky

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}
<div id="div-pouze-pro-cesky-jazyk">    
  Máte zvolen český jazyk
</div>
{hs:else:langCz}
<div id="div-pro-ostatni-jazyky">    
  Nemáte zvolen český jazyk
</div>
{hs:end:langCz}

Příklady

Důležité části příkladů jsou označeny tučným písmem.

Levý sloupec pouze na úvodní straně

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="cs">
  <head>                                                                             
  // Zacatek hlavicky
    <title>{hs:title}</title>                                                  
    // Title stranky
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">              
    // Znakova sada dokumentu
    <base href="{hs:baseUrl}">                                                       
    // Domovska URL dokumentu
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>         
    // Nacteme si javascriptovou knihovnu jQuery
    <meta name="description" content="{hs:description}" />                           
    // Popis stranky
    <meta name="keywords" content="{hs:keywords}" />                                 
    // klicova slova pro vyhledavace a roboty
    <meta name="robots" content="{hs:robots}" />                                     
    // Definice chovani robotu
    <link rel="stylesheet" type="text/css" href="./style/print.css" media="print">   
    // CSS pro tisk
    <link href="{hs:tplPath}/style/style.css" rel="stylesheet" type="text/css" />    
    // CSS soubor s definici stylu a vzhledu stranek
  </head>                                                                            
  // Konec hlavicky
  <body>                                                                              
  // Zacatek tela dokumentu
    <div id="site">                                                                  
    // Hlavni div stranky
      <div id="top">                                                                 
      // Horni cast dokumentu
        <div id="topLeft">                                                           
        // Leva polovina horni casti pro LOGO
          <a href="./">                                                              
          // Odkaz loga
            {hs:logo}                                                                      
            // Obrazek loga
            <h1>{hs:h1}</h1>                                                   
            // Hlavni nadpis (nazev) stranky
          </a>                                                                       
          // Konec odkazu loga
        </div>                                                                       
        // Konec leva polovina horni casti pro LOGO
      </div>                                                                         
      // Konec horni cast dokumentu
      <div id="mid">                                                                 
      // Stredova cast - obsah
        <div id="article">                                                           
        // Blok pro obsah
          {hs:navigation}                                                                  
          // Vlozime navigacni cast (kde jsme)
          {hs:content}                                                                     
          // Vlozime obsah (katalog,detail zbozi,popis dopravy atd)
        </div>                                                                       
        // Konec blok pro obsah

{hs:if:home}                                                                                     
// Podminka - Pokud jsme na uvodni strane
        <div id="left">                                                              
        // Levy blok
          {hs:categories}                                                                  
          // Kategorie zbozi
          {hs:column}                                                                      
          // Ostatni bloky leveho sloupce (vzhledavani, prihlaseni, online platby atd)
        </div>                                                                       
        // Konec levy blok
{hs:else:home}                                                                                   
// V opacnem pripade - pokud nejsme na uvodni strane
{hs:end:home}                                                                                    
// Konec podminky

        <div class="cleaner"> </div>                                      
      </div>                                                                         
      // konec stredova cast - obsah
      <div id="footer">                                                              
      // Paticka
        <img class="logo" src="{hs:logoImage}" alt="{hs:title}" />               
        // Logo do paticky stranky
        <strong> © {hs:name}</strong>                                              
        // Copyright
      </div>                                                                         
      // Konec paticka
    </div>                                                                           
    // Konec hlavni div stranky
  </body>                                                                            
  // Konec tela dokumentu
</html>                                                                              
// Konec HTML dokumentu

Vložit text pouze do sekce nákupního košíku

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="cs">
  <head>                                                                             
  // Zacatek hlavicky
    <title>{hs:title}</title>                                                  
    // Title stranky
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">              
    // Znakova sada dokumentu
    <base href="{hs:baseUrl}">                                                       
    // Domovska URL dokumentu
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>         
    // Nacteme si javascriptovou knihovnu jQuery
    <meta name="description" content="{hs:description}" />                           
    // Popis stranky
    <meta name="keywords" content="{hs:keywords}" />                                 
    // klicova slova pro vyhledavace a roboty
    <meta name="robots" content="{hs:robots}" />                                     
    // Definice chovani robotu
    <link rel="stylesheet" type="text/css" href="./style/print.css" media="print">   
    // CSS pro tisk
    <link href="{hs:tplPath}/style/style.css" rel="stylesheet" type="text/css" />    
    // CSS soubor s definici stylu a vzhledu stranek
  </head>                                                                            
  // Konec hlavicky
  <body>                                                                              
  // Zacatek tela dokumentu
    <div id="site">                                                                  
    // Hlavni div stranky
      <div id="top">                                                                 
      // Horni cast dokumentu
        <div id="topLeft">                                                           
        // Leva polovina horni casti pro LOGO
          <a href="./">                                                              
          // Odkaz loga
            {hs:logo}                                                                      
            // Obrazek loga
            <h1>{hs:h1}</h1>                                                   
            // Hlavni nadpis (nazev) stranky
          </a>                                                                       
          // Konec odkazu loga
        </div>                                                                       
        // Konec leva polovina horni casti pro LOGO
      </div>                                                                         
      // Konec horni cast dokumentu
      <div id="mid">                                                                 
      // Stredova cast - obsah
        <div id="article">                                                           
        // Blok pro obsah
          {hs:navigation}                                                                  
          // Vlozime navigacni cast (kde jsme)

{hs:if:nakupni-kosik}                                                                            
// Podminka - Pokud jsme v sekci nakupni kosik
        <div id="textvkosiku">                                                       
        // Blok textu v kosiku
        .
        .
        .
        .
        .
        .
        .
        .
        </div>                                                                       
        // Konec blok textu v kosiku
{hs:else:nakupni-kosik}                                                                          
// V opacnem pripade - pokud nejsme v sekci nakupni kosik
{hs:end:nakupni-kosik}                                                                           
// Konec podminky

          {hs:content}                                                                     
          // Vlozime obsah (katalog,detail zbozi,popis dopravy atd)
        </div>                                                                       
        // Konec blok pro obsah
{hs:if:home}                                                                                     
// Podminka - Pokud jsme na uvodni strane
        <div id="left">                                                              
        // Levy blok
          {hs:categories}                                                                  
          // Kategorie zbozi
          {hs:column}                                                                      
          // Ostatni bloky leveho sloupce (vzhledavani, prihlaseni, online platby atd)
        </div>                                                                       
        // Konec levy blok
{hs:else:home}                                                                                   
// V opacnem pripade - pokud nejsme na uvodni strane
{hs:end:home}                                                                                    
// Konec podminky
        <div class="cleaner"> </div>                                      
      </div>                                                                         
      // konec stredova cast - obsah
      <div id="footer">                                                              
      // Paticka
        <img class="logo" src="{hs:logoImage}" alt="{hs:title}" />               
        // Logo do paticky stranky
        <strong> © {hs:name}</strong>                                              
        // Copyright
      </div>                                                                         
      // Konec paticka
    </div>                                                                           
    // Konec hlavni div stranky
  </body>                                                                            
  // Konec tela dokumentu
</html>                                                                              
// Konec HTML dokumentu

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 (administrace -> nastavení -> nastavení 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í

Výchozí šablona eshopu

default.zip - Jedná se o základní (výchozí) šablonu pro eshop. Tuto šablonu lze stáhnout a libovolně upravit nebo použít jako testovací šablonu.

Našeptávač vyhledávání

Našeptávač napomáhá uživateli vybrat konkrétní hledanou položku, tím že nabízí rovnou adekvátní zboží vůči hledanému výrazu.

Spárování s polem pro vyhledávání

Přiřazení našeptavače k políčku, provede tak, že dannému inputu nastavíte třídu whisperer nebo whisperer2 (class="whisperer").

<div id="vyhledavani">
  {hs:searchForm:id=search_form,class=testovaciFormular}
    <input type="text" name="istr" id="search_text" placeholder="Zadejte hledaný výraz" class="whisperer" autocomplete="off">
    <input type="hidden" name="act" value="srch">
    <input type="submit" value="Hledat" id="SearchButton">
  {hs:searchFormEnd}
</div>

CSS styly pro našeptávač


.autocomplete-w1 {
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 7px 0 0 6px;
}
.autocomplete {
	border: 5px solid #cacaca;
	border-top: 0px;
	background: #FFF;
	cursor: default;
	text-align: left;
	max-height: 350px;
	overflow: auto;
	margin: -6px 6px 6px -6px;
}
.autocomplete .selected {
	background: #efefef;
}
.autocomplete div {
	line-height: 30px;
	border-top: 1px solid #e8e8e8;
	padding: 2px 5px;
	white-space: nowrap;
	overflow: hidden;
	font-size: 14px;
}
.autocomplete div:first-child {
	border-top: 0px;
}
.autocomplete strong {
	font-weight: normal;
	color: #e50f50;
}
    

 



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.

Komentáře

Nový komentář

(nebude zobrazen)