Uživatelské nástroje

Nástroje pro tento web


Sidebar

Obsah manuálu

prirucka_administratora:sprava_motivu_vzhledu

Správa motivů vzhledu

Umístění: Menu » Vzhled, texty » Přehled motivů vzhledu
Oprávnění: Správa motivů vzhledu

Obchod umožňuje komplexní změnu vzhledu, která se provádí pomocí motivů vzhledu. U těch se nemění pouze barevné schéma nebo jednoduché změny pomocí kaskádových stylů, ale je možné vytvořit úplně rozdílné zobrazení. Například jedno, dvou nebo třísloupcový layout. Rozdílný výpis zboží a detail. Motivy jsou omezeny pouze vnitřními principy obchodu. Proto nelze změnit chování obchodu, tj. lze přizpůsobit, jak a kde se co zobrazí, ale nelze doplnit vlastnosti, které neumí vlastní obchod.
Obchod v základu obsahuje několik předdefinovaných (dále systémových) motivů. Ale lze kdykoliv pomocí balíčků doinstalovat další.
Tvorbu balíčků může provádět kdokoliv s dostatečnými technickými znalostmi.

Přehled motivů

V přehledu jsou zobrazeny všechny motivy, které lze použít. Ten, který se zrovna používá, je označen jako aktivní (sloupec Aktivní) a má akci „Deaktivovat“. Pokud není aktivní žádný motiv, tak se na popředí obchodu zobrazuje informační text a obchod nefunguje. Lze tak docílit krátkodobého odstavení obchodu. Aktivace motivu se provádí stejnojmennou akcí. Lze ji provést kdykoliv, ale může dojít k chvilkovému odstavení (nefunkčnosti) obchodu. Pokud je motiv systémový, lze ho obnovit do výchozího stavu, tj. zahodí se veškeré vlastní úpravy. Funkce obnovit se také používá pro novou verzi motivu od dodavatele obchodu.

Vlastní motivy nelze obnovovat přímo. Je nutné je nejprve smazat a pak znovu nahrát balíček s motivem.
Každý motiv lze exportovat v podobě balíčku. Je tedy možné exportovat balíček, ten si nechat upravit a nahrát ho zpátky do systému jako nový motiv.

Vložení nového motivu

Nový motiv se vkládá snadno. V přehledu stačí kliknout na odkaz přidat. Poté se zobrazí formulář, pomocí kterého lze nahrát vybraný balíček na server. Systém zkontroluje integritu balíčku, a pokud vše dobře dopadne, tak se motiv přidá.

Nastavení hlavičky a loga e-shopu

Pokud šablona vzhledu podporuje vložení hlavičky, můžete ji nahrát v levé záložce Nastavení. Zde jsou také uvedeny rozměry, v jakých je potřeba hlavičku vytvořit a následně nahrát do e-shopu. Pokud budete mít hlavičku v jiných rozměrech, nenahraje se. Ve stejném místě také můžete vkládat logo e-shopu.

Úprava motivu

Motiv lze upravovat přímo za běhu systému. Toho lze dosáhnout zvolením akce Upravit v seznamu. Úprava souboru se projeví okamžitě po uložení. Touto funkcionalitou lze jednoduše a rychle doplnit například text nebo reklamní bannery do stránek. Popis editace šablonových souborů (přípona tpl) se nachází v následující kapitole.

Editace – formulář

Formulářový prvek Popisek Příklad
Soubor Roletové menu se seznamem souborů k editaci. Po výběru souboru se jeho obsah nahraje do spodního editoru.
Obsah Editor zdrojového kódu s podbarvením syntaxe.

Informace pro vývojáře

Balíček motivu vzhledu je obyčejný ZIP archiv s přesně danou strukturou. Ta obsahuje obrázky, kaskádové styly, JavaSkriptový kód a hlavně šablonové soubory. Ty jsou postaveny na populárním systému Smarty.

Struktura balíčku je rozepsaná v příloze Povinné soubory v motivu vzhledu. Popsané adresáře a šablony jsou povinné, bez nich se balíček nenainstaluje. Počet obrázků, javasciptových kódů a kaskádových stylu není omezen, také jejich názvy mohou být libovolné. Popsané soubory šablon jsou nutné minimum, ale je možné jich mít více a vkládat je do povinných. Například šablonu layoutu lze fyzicky umístit do více souborů (hlavička, levý sloupec, pravý sloupec, patička) a v souboru layout.tpl jen tyto soubory vložit. Systém, na němž běží všechny e-shopy, rozlišuje velikost písmen v názvech souborů a adresářů.

Tvorba motivu

Nejjednodušší postup při tvorbě motivu je cestou úpravy již existujícího, který odpovídá představám (tj. počet sloupců nebo rozmístění prvků). U takto získaného balíčku je pak nutné zeditovat nebo úplně předělat styly (grafiku). Odkazy na zdroje (obrázky, soubory) je nutné uvádět relativně vůči doméně. Pro zjednodušení se dá všude psát značka:

{$web_path}

Ta se při aktivaci šablony přepíše na cestu k balíčku. A pak lze zapisovat relativní adresy v rámci balíčku. Příklad:
V adresáři „images/background“ je uložen soubor „tabs.png“. Pro načtení tohoto souboru v kaskádových stylech (např. css/web.css) se vloží adresa:

{$web_path}/images/background/tabs.png

neboli jako pravidlo v css:

background-image: url('{$web_path}/images/background/tabs.png')

Pro vlastní tvorbu a editaci šablon lze využít příkazu, který ve zvláštním okně vypíše všechny aktuální proměnné:

{debug}

Tento příkaz zapíná ladící režim, který zobrazí konzoli se všemi dostupnými proměnnými a jejich hodnotami pro danou šablonu. Jejich popis je nad možnostmi této dokumentace. Některé proměnné (ty nejdůležitější) jsou popsány v kapitole Seznam dostupných proměnných. Vlastní upravování je vhodné dělat již na instalovaném balíčku pomocí editace, aby se změna bezprostředně projevila na popředí e-shopu.

Na stránkách se zobrazují náhledy zboží v různých velikostech. Každá šablona ale může mít různé požadavky na velikost těchto náhledů. Například u dvousloupcového detailu bude obrázek velký 300 px, ale u třísloupcového není na tak velký obrázek místo, tak musí mít 200 px. Systém generuje vice druhů obrázků (např. do kontextových boxů, přehledu zboží, detailu nebo náhledů), podle konkrétních potřeb šablony. Stačí do definičního XML souboru do sekce images_size vložit typy náhledů, které layout vyžaduje (přesný popis dále). Každý takovýto rozměr má své jméno. To se vkládá do cesty k obrázku následujícím způsobem:

/data/images/<nazev_rozmeru>/{$item.img_path}/{$item.img_file}

Proměnné v příkladu jsou ilustrativní, v různých sekcích layoutu mohou být jiné. Každý balíček musí obsahovat soubor „layout.xml“, který obsahuje jeho popis (informace o něm). Aktuální verze má následující strukturu:

<?xml version="1.0" encoding="utf-8"?>
<layout>
	<name></name>
	<author></author>
	<date></date>
	<images_size>
		<type name="" width="" height="" method="" />
		...
	</images_size>
	<preview src="" />
</layout>                                             

Význam jednotlivých značek vysvětluje tabulka:

layout Kořenová značka
name Jméno šablony, pod kterým se zobrazí v přehledu.
author Autor šablony.
date Datum vytvoření šablony v ISO formátu (YYYY-MM-DD).
images_size Párová značka obsahující definici rozměrů obrázku. Může obsahovat více značek „type“.
type Značka definující velikost obrázků. Data jsou uložena v atributech:
name – název rozměru, který se používá v cestě pro načtení obrázku. Může obsahovat pouze písmena anglické abecedy a znak „_“.
width – šířka obrázku.
height – výška obrázku.
method – metoda jakým způsobem se má zmenšit obrázek na požadované rozměry.
Možné hodnoty jsou:
cropbox – zmenší originální obrázek na požadovaný největší rozměr, druhý rozměr se ořeže. Obrázek tak není stejný jako originál. Tato metoda se hodí pro generování malých čtvercových obrázků.
box – zmenší obrázek do zvoleného rozměru, podle delší strany. Druhý rozměr se vypočítá podle poměru původních stran.
boxfilled – zmenší obrázek do zvoleného rozměru, ale oproti boxu vrátí přesně zadané rozměry. Zmenšovaný obrázek se nedeformuje, ale zmenší se v poměru na maximální rozměr, který se vejde do rozměru a vystředí se.
preview Nepovinná značka přidávající odkaz na náhled šablony, který se zobrazí v administraci. Přes atribut src se definuje odkaz v rámci balíčku na obrázek náhledu.

Šablonovací systém Smarty

Jazyk systému Smarty je nepsaný standard v šablonových systémech a používají ho i konkurenční řešení. Je tvořen tak, aby byl jednoduše pochopitelný i pro lidi se základní znalostí algoritmizace. Popis včetně dokumentace se nachází na adrese:

Na internetu lze nalézt velké množství návodů v různých jazycích včetně češtiny. Komplexní popis syntaxe je nad možnost této publikace a uvedené zdroje ho plně nahradí. Přesto je v následující tabulce shrnuta základní syntax nejpoužívanějších konstrukcí v motivu a šablonách e-mailu.

Příkaz Popis Příklad
{* komentář *} Blokový komentář, text uzavřen v těchto příkazech se ve výsledném HTML souboru neobjeví. {* libovolný komentář *}
{$promenna} Vypsání proměnné. Pokud je pole, tak jednotlivé úrovně se oddělují tečkou. {$item.id}, {$g_shop_name}
"retezec", 'jiny_zpusob' Řetězce, v šablonách se používají jako klíče pro získání překladu pro zvolený jazyk. 'label_address'
{funkce jmeno_parametru="hodnota"} Zálohování funkce, která může mít libovolný počet parametrů a hodnot. Funkce mohou být blokové, to znamená, že mají uzavírající značku {/funkce} a nějaký obsah mezi těmito značkami (s tímto obsahem funkce pracuje). {boxy name="LinksPartners"}
'retezec'|modifikátor:parametr Modifikátory slouží pro změnu textové hodnoty předané na pravé straně před znakem „|”. V obchodě se nejčastěji používá pro přeložení řetězce nebo ošetření tisknutí nebezpečných znaků. Modifikátory lze používat za sebou (tzv. zřetězovat) 'label_address|T'
{foreach from=pole item=‘nazev_polozky‘ }
Telo opakovani
{/foreach}
Funkce, která pro každou položku v předaném poli provede kód v těle. V těle je dostupná aktuální položka pod názvem "nazev_polozky" (tj. název zadaný parametrem item). V obchodě se používá například pro zobrazení položek v košíku nebo v objednávce. {foreach from=$goods item='item' }
{$item.name}
{/foreach}
{if podmínka}
Tělo pokud je podmínka splněna
{else}
Tělo pokud není podmínka splněna
{/if}
Řídící příkaz, který na základě podmínky zobrazí kód z prvního těla, popřípadě z druhého. Část „else“ není povinná. {if x > 0 }
X je větší než nula
{else}
X není větší než nula
{/if}

Obchod používá pro svoji činnost kromě dodávaných funkcí a modifikátorů také svoje. Jejich popis tak nelze najít ve výše zmíněných manuálech. Proto jejich popis uzavírá tuto kapitolu.

Modifikátory

array
parametry: nejsou
Modifikátor převede text na pole. Jednotlivé položky musí být odděleny znakem „;”.
Příklad:

{'polozka1;polozka2;polozka3'|array} {* pole se třemi položkami*}

base_money

Parametry:

  1. Celočíselné ID měny, který udává v jaké měně je modifikovaná částka zadaná. Pokud se nezadá, bere se aktuální.
  2. Boolean hodnota, zdali se má provést konverze zadané částky pro aktuální jazyk. Výchozí hodnota je FALSE.

Modifikátor zformátuje předané desetinné číslo podle nastavení a přidá kód měny.

boolean
parametry: nejsou
Předanou hodnotu převede Boolean reprezentaci a přeloží na text (podle aktuálního jazyka).

{True|boolean} {*vypíše „Ano“*}

get_host
parametry: nejsou
Předanou IP adresu převede na textovou reprezentaci, pokud je to možné.

headline1
parametry: nejsou
Zadaný text obalí do nadpisu první úrovně (v rámci stránky, nemusí se jednat o HTML H1).

headline2
parametry: nejsou
Zadaný text obalí do nadpisu druhé úrovně (v rámci stránky, nemusí se jednat o HTML H2).

headline3
parametry: nejsou
Zadaný text obalí do nadpisu třetí úrovně (v rámci stránky, nemusí se jednat o HTML H3).

money
Parametry:

  • Boolean hodnota určující, zda se má provést konverze zadané částky pro aktuální jazyk. Výchozí hodnota je FALSE.

Modifikátor zformátuje předané desetinné číslo podle nastavení a přidá kód měny. Zjednodušená verze modifikátoru base_money.

percents
parametry: nejsou
Převede desetinné číslo z rozsahu <0,1> na celé číslo a přidá znak procento.

T
Parametry:

  • řetězec, pro který se v překladech hledá náhrada

Předaný řetězec se snaží přeložit pro aktuální jazyk, tj. použije ho jako klíč do překladové tabulky. Pokud se v ní nenajde, vrátí se předaný text. Tabulka překladu je rozepsaná v kapitole Správa překladu.

Funkce

Za jménem funkce následuje výčet jejich parametrů a stručný popis činnosti.

form

  • from – předání definice formuláře.
  • params – parametry pro formulář.
  • type – typ vykreslení formuláře. Pokud se nezadá, tak se v těle funkce vykresluje formulář ručně. Pokud se zadá „Table“, formulář se vykreslí automaticky do tabulky.

Jedná se o blokovou funkci (pokud se vynechá typ) pro vykreslení formuláře.

bottommenu

  • data – předání definice menu.

Účelová funkce pro výpis první úrovně menu v patičce.

boxy

  • name – jméno kontextového boxu. Přípustné možnosti jsou: ActionGoods, HelpLine, LinksPartners, Logos, NewsGoods, StaticText.

Slouží pro vypsání obsahu kontextových boxů. Více v kapitole Správa kontextových boxů.

category_menu

  • data – předání definice stromu kategorií.

Účelová funkce pro výpis menu kategorie.

mainmenu

  • data – předání definice menu.

Účelová funkce pro výpis první úrovně menu v patičce.

paginator

  • count – počet prvků na stránku.
  • total – celkový počet prvků.
  • url – základní url, kam mají vést odkazy.
  • page – aktuální stránka. Nepovinný parametr (výchozí: 1).
  • firstText – text tlačítka „Na první“. Nepovinný parametr (výchozí: ‚«’).
  • prevText – text tlačítka „Předchozí“. Nepovinný parametr (výchozí: ‚<‘).
  • nextText – text tlačítka „Následující“. Nepovinný parametr (výchozí: ‚>‘).
  • lastText – text ladítka „Na poslední“. Nepovinný parametr (výchozí: ‚»‘).
  • separator – oddělovací znak mezi stránkami. Nepovinný parametr (výchozí: ‚ | ‘).
  • ellipsis – řetězec, který se použije pro vynechání stránek. Nepovinný parametr (výchozí: ‚ … ‘).

Funkce pro vygenerování stránkování. Na základě celkového počtu prvků a čísla, kolik jich má být na jedné stránce, vypočítá celkový počet stránek. Nevykreslují se odkazy na všechny stránky, ale pouze na první, na okolí kolem aktuální stránky a na poslední stránku.

text

  • key – klíč textu, který se má vypsat.

Funkce pro vypsání textu, na základě klíče. Více o textech je v kapitole Správa textů.

url

Funkce pro generování URL, bez znalosti pozadí systému je nelze používat. Použité funkce v šablonách by se neměly nikdy měnit.

prirucka_administratora/sprava_motivu_vzhledu.txt · Poslední úprava: 30.04.2013 08:19 autor: Internetové obchody

Nástroje pro stránku