Tentokrát začneme přímo na našem Eshopu. Otevřeme si internetový prohlížeč a zadáme adresu - v našem příkladu mojehrnecky.mypage.cz .
Objednáme
Vložíme do košíku několik Hrníčků a klikneme na cenu v košíku vpravo nahoře.
Ocitneme se v detailu Nákupního košíku. Zde překontrolujeme objednávané zboží a v případě zájmu můžeme ještě upravit množství nebo některou položku odebrat. Pokud jsme spokojení, pokračujeme tlačítkem vpravo dole.
Zákazníci se registrují globálně do databáze Webgarden, je tedy možné, že svůj účet již mají z jiných stránek nebo eshopu, popřípadě je jejich obvyklé uživatelské jméno již obsazeno.
Na další obrazovce si vytvoříme nový zákaznický účet. Vyplníme Uživatelské jméno, Heslo (i s opakováním) a Email. Pokračujeme.
V dalším kroku vyplníme adresu pro doručení. Povinné informace jsou Jméno, Příjmení, Ulice, Město a PSČ. Pokud potřebujeme, tak vyplníme také Fakturační adresu - v opačném případě bude shodná s Doručovací. Pokračujeme.
V následujícím kroku zvolíme způsob doručení a platby. Webgarden nám dovolí zvolit pouze ty platební metody, které jsme u způsobu doručení označili jako platné. Pokračujeme dále.
V kroku Shrnutí objednávky překontrolujeme zadané údaje a naposledy stiskneme tlačítko Pokračování.
Na závěr se nám zobrazí stránka s informacemi o platbě. V případě převodu a ostatních metod nám bude zobrazena instrukce, kterou jsme zadali v administraci stránek v nastavení platebních metod. Pokud bychom zvolili platbu PayPal nebo platební kartou, objeví se u instrukcí také proklik na příslušnou platební bránu, které budou automaticky předány položky košíku.
Na emailovou adresu zákazníka i provozovatele Eshopu bude doručen email s objednávkou včetně rekapitulace platební metody.
Tip: Barvy emailu, ikonek a některých prvků Eshopu nastavíme v administraci v sekci Vzhled > Barvy. Volte vždy kontrastní barvy popředí a pozadí, jinak by se mohlo stát, že email nebude čitelný.
Zpracování
Přesuneme se do administrace stránek na adrese webgarden.cz, přihlásíme se naším uživatelským jménem a vstoupíme do sekce Eshop > Objednávky. V tabulce uvidíme seznam existujících objednávek. Bude zde minimálně jedna - a to ta kterou jsme výše vytvořili coby zákazník. V tabulce vidíme důležité údaje - číslo objednávky, datum, jméno zákazníka, celkovou cenu a stavy objednávky. Ikonkou se symbolem oka můžeme prokliknout do detailu objednávky.
Tip: Položky v objednávce neobsahují proklik na naše zboží z toho důvodu, že v době prohlížení objednávky již nemusí zboží na Ehopu existovat - pokud jej smažeme. Je tedy vhodné u zboží vyplňovat kódy nebo volit unikátní pojmenování. Jinak by se nám mohlo stát, že bychom z objednávky nepoznali, co si zákazník objednal.
V detailu poskytuje vyčerpávající pohled na objednávku, seznam položek, dodací a fakturační adresy, platební metodu atd.
V navigační lište nebo levém stromě klikneme zpět do sekce Objednávky. Dejme tomu, že nám na bankovní účet dorazila platba za tuto objednávku a budeme ji chtít zpracovat. Klikneme tedy na tlačítko „Ne“ ve sloupci „Zaplaceno“. Tím přepneme objednávku do stavu „Ano“ - tedy zaplacená.
Pokud budeme používat faktury generované službou Webgarden jako účetní doklady, otevřeme si symbolem faktury do nového okna příslušný doklad. Ten můžeme vytisknout, podepsat a přiložit ke zboží.
Pokud používáme Webgarden také ke skladové evidenci, tak v přehledu objednávek zboží vyskladníme zboží kliknutím na „Ne“ ve sloupci Sklad. Tím se zboží objednávky odečte ze skladových zásob. Zboží můžeme vyskladnit samozřejmě již hned po zpracování objednávky, nemusíme čekat na platbu.
Poté co zboží odešleme pomocí zvolené metody doručení, klikneme na tlačítko „Ne“ ve sloupci odesláno. Tím změníme stav na „Ano“ - tedy odesláno.
Nakonec můžeme objednávku označit jako uzavřenou a uložit tlačítkem OK.
Sklad
V našem příkladu jsme v objednávce objednali také zbytek hrnečků S puntíky. Překlikneme do sekce Eshop > Sklad a všimneme si, že zboží S puntíky má uvedeno počet 0.
Představme si, že opravdu nemáme další hrnečky S puntíky k dispozici a budou dostupné až za 5 dní. Proklikáme se k hrnečku přes záložku Obsah (nebo klikneme na název zboží ve Skladu). V pravé části najdeme kolonku Dostupnost - přepneme ji na volbu „Do jednoho týdne“. Tuto kolonku bychom měli postupně vyplnit u všech položek Eshopu.
Tlačítkem Zobrazit se podíváme na detail hrnečku S puntíky přímo na Eshopu a uvidíme informaci o dostupnost zboží. To lze i v tomto stavu objednat, zákazník ale musí počítat s příslušnou časovou prodlevou.
Posuneme se o pět dní dopředu - obdrželi jsme nové zásoby. V administraci, u zboží S puntíky aktualizujeme skladové zásoby - v našem příkladu na 3. Uložíme.
Tip: Skladové zásoby můžete upravovat také přímo v sekci Eshop > Sklad.
Tlačítkem Zobrazit přejdeme na detail hrnečku na Eshopu a uvidíme informaci - Dostupnost: Skladem.
Zboží v přehledu Skladu můžeme filtrovat. Pokud například potřebujeme zobrazit položky, které již nemáme na skladě nebo máme poslední kus, v pravé horní kolonce vybereme symbol „Menší nebo rovno - <=“, do počtu vyplníme „1“ a klikneme na Filtrovat. V tabulce se vypíší pouze záznamy odpovídající kritériím.
Obdobně můžeme ve skladu hledat dle kódu, názvu nebo varianty. Texty nebo jejich fragmenty je ovšem potřeba zadávat přesně. Zadáním „kočkou“ najdeme zboží „S kočkou“, zadáním „kočka“ nenajdeme nic.
Dlouhodobě nedostupné
Za určitých okolností se nám může stát, že nějaké zboží je dlouhodobě nedostupné nebo se již nevyrábí. Můžeme ho tedy smazat. Někdy se ale může hodit zboží v Eshopu zachovat. Například pro dohledání informací, prezentační nebo jiné účely. Možností, jak to dělat je několik, ukážeme si jednu z nich. V sekci Obsah vytvoříme Novou sekci rubrik (odkazem v obsahovém stromě).
Ta se z počátku bude jmenovat „Nová rubrika“ a bude umístěna na první úrovni ve větvi Obsah. Klikneme na ní a pomocí Titulku přejmenujeme na „Archiv“. Pomocí tlačítka „+ Rubrika“ na řádku "Podrubriky" vytvoříme novou podrubriku.
Tu přejmenujeme na „2011“. Ačkoliv v administraci bude tato větev rubrik vidět, tak na našem Ehopu ne. Nepřísluší k ní totiž žádný prvek Menu. Rubriky existují jen v databázi stránek, ze stránek se k nim ale nelze proklikat.
Řekněme, že již nechceme prodávat Matný skleněný hrneček. Vstoupíme do jeho editace, zde vybereme záložku Umístění a tentokrát klikneme na řádku Archiv > 2011 tlačítko Přesunout - to proto že chceme hrneček z původní rubriky odebrat.
Pokud si v Eshopu zobrazíme rubriky Skleněné, bude prázdná. Ke skleněnému hrnečku se na Eshopu již nedoklikáme. Pokud bychom jej ale chtěli v budoucnu obnovit, stačí nám analogický postup. Z rubriky Archiv > 2011 ho přesuneme přes záložku Umístění zpět do viditelných rubrik.
Drobná vylepšení
V tomto dílu si na stránky umístíme ještě několik drobností. První bude přihlašovací okénko.
V administraci rozklikneme na záložce Obsah větev Struktura webu > Pravé panely. Jelikož budeme na Eshop přidávat do pravého bloku více obsahu, nebudeme ho házet na hromádku, ale vytvoříme si pro něj speciální rubriky které nazýváme Panely. Klikneme na tlačítko „+ Panel“.
Tip: Označení Panel je pozůstatek starších verzí Webgarden. Nyní se zachází s Panely prakticky stejně jako s jinými Rubrikami, je možné je mezi sebou přesouvat a zaměňovat. Prakticky jediný rozdíl spočívá v tom, že u Panelu uživatel obvykle upravuje jeho Náhled a u klasické Rubriky Detail. Webgarden proto v administraci nabízí u Panelu primárně editaci Náhledu.
Klikneme na velký symbol „+“, přepneme na Pokročilé a vybereme prvek Přihlašovací okénko.
V dalším Dialogu pouze potvrdíme uložením.
Zobrazíme si titulní stránku (ikonka Oka v záhlaví administrace) a nalezneme na ní panel s přihlašovacím okénkem, jehož pomocí se budou moci zákazníci přihlásit svým uživatelským jménem.
Tip: Pokud nechcete, aby se zobrazoval nad Přihlašovacím okénkem název panelu Přihlášení, můžete panel přejmenovat tak, že nový název necháte zcela prázdný. V administraci pak bude panel označený jako „Nepojmenovaný“. Může to ale zhoršit orientaci v administraci.
Můžeme si vyzkoušet přihlášení pomocí účtu našeho fiktivního zákazníka.
Po přihlášení můžeme kliknout na odkaz Registrace, kterým se dostaneme do uživatelského nastavení zákaznického účtu.
Vyhledávání
Přidáme na stránky vyhledávací políčko. V administraci v záložce Obsah rozklikneme větev Struktura webu > Pravé panely a vytvoříme nový panel. Ten opět pomocí titulku přejmenujeme a to tak, že jméno zcela smažeme. Panel bude „Nepojmenovaný“. Velkým symbolem „+“ přidáme ze sady Pokročilé prvek Vyhledávání Webgarden. Následující dialog pouze uložíme.
Podíváme se na náš Eshop a pod přihlašovacím panelem uvidíme panel vyhledávací.
Panel s telefonem
Pro příklad přidáme ještě jeden panel, opět stejným způsobem, ale pojmenujeme ho „Zavolejte nám“. Velkým symbolem „+“ přidáme prvek Titulek.
V editačním Dialogu vyplníme naše telefonní číslo. Překlikneme do záložky Rozšířené.
Zvolíme zarovnání Doprava a uložíme.
Podíváme se na stránku Eshopu. Asi by nám to takto stačilo, ale zkusíme to jinak.
V administraci rozklikneme prvek Titulek obsahující číslo k editaci a na záložce Rozšířené nastavíme zarovnání Na střed a Zvýraznění na Vzor 1. Uložíme a podíváme se na Eshop.
Výsledek je lepší, ale zkusíme ještě něco. Vraťme se tedy zpět do administrace...
Přejmenujeme panel Zavolejte nám na prázdný text - bude Nepojmenovaný. Pak znovu vyvoláme editační Dialog Titulku s číslem a přepíšeme text na „Tel. 735 537 753“. Uložíme.
Nyní už vypadá panel s číslem elegantněji.
Jak na fanoušky
Na závěr tohoto dílu jsme si nechali základní propojení se sítí Facebook. Bez toho se jistě každý eshop obejde, nicméně považujeme za vhodné nějaké základy ukázat.
Klíčové pro celé propojení je vytvoření Facebook Stránky. Tak se nazývá speciální druh profilu Facebooku, který není profilem osoby, nýbrž nějaké organizace, firmy nebo produktu. Pro založení stránky je vhodné mít již existující osobní profil.
Facebook Stránku vytvoříme na adrese http://www.facebook.com/pages/create.php . Na první obrazovce vybereme kategorii, pro eshop to bude pravděpodobně „Značka nebo produkt“.
Dále vybereme kategorii přesněji - v našem případě Kuchyně/Vaření. Do druhého okénka zadáme název a zde musíme být obezřetní. Facebook umožňuje měnit adresu FB Stránek jen velmi omezeně. Zároveň je ale marketingově výhodné FB Stránku nazvat stejně jako adresu stránek. V našem případě zvolíme tedy jméno Mojehrnecky.mypage.cz . Kdybychom ale již v tuto chvíli vlastnili např. doménu Mojehrnecky.cz , vyplatilo by se FB Stránku pojmenovat tak.
Čekají nás tři kroky založení stránky. Podstatné je nahrát na FB Stránku logo, zbytek nyní můžeme přeskočit.
Až se dostaneme přímo na naší novou FB Stránku, zkopírujeme (ctrl + c) si z adresního řádku url až po první otazník (podle obrázku).
Klikneme na tlačítko Add Like Box (Přidat Like Box).
Zde do první kolonky vložíme (ctrl + v) url naší FB Stránky. Odškrtneme tři zaškrtávátka - zatím nemáme žádné fanoušky a je zbytečné, aby bylo na našem Eshopu prázdno. Stiskneme tlačítko Get Code (Získej kód).
Objeví se nám dialogové okno, zkopírujeme si (ctrl + c) horní kód.
Přesuneme se zpátky do administrace Webgarden. Na záložce Obsah vstoupíme do větve Struktura webu > Zápatí, klikneme na velký symbol „+“ a vybereme prvek Odstavec textu.
Tip: Prvek Odstavec textu je nejvhodnější k vkládání validních html nebo JavaScript kódů.
Do editačního Dialogu vložíme (ctrl + v) kód z Facebooku. Jelikož Facebook generuje rozměry vhodné pro angličtinu, upravíme v kódu dvakrát parametr height (výška). Přepíšeme opatrně hodnotu na 82. Pokud by se nám to nepovedlo, vygenerujeme si kód na Facebooku znovu. Přepneme na záložku Rozšířené.
Zde zvolíme Zvýraznění Vzor 1.
Ještě než si zobrazíme náš Eshop, tak se musíme na Facebooku přepnout zpět do svého osobního profilu, jinak nám Facebook panel na našem Eshopu neukáže. Na Facebooku rozbalíme vpravo nahoře nabídku Účet a zvolíme možnost Zpět na svůj osobní profil. Pak si zobrazíme náš eshop a měli bychom vidět to co na obrázku.
Nevypadá to bohužel moc podle našich představ. Facebook pochopitelně používá své barvy a ty nám moc neladí. Pokud budeme trvat na své vzhledové šabloně, tak se musíme alespoň pokusit zobrazení vylepšit. V tomto případě si pomůžeme berličkou. Přepneme se v administraci do záložky Vzhled > Editor vzhledu. Počkáme, až se stránka celá načte a sjedeme myší zcela dolů do zápatí.
Klikneme přibližně do místa označeného na obrázku.
V Dialogu klikneme na „Položka“.
V dalším Dialogu v části Pozadí vybereme bílým čtverečkem bílou barvu. Uložíme vespod Dialogu.
Nakonec bude naše stránka vypadat pohledněji. Existuje celá řada dalších způsobů, jak prvky z Facebooku formátovat a jak své stránky propojit. V detailu každého zboží našeho Eshopu navíc zákazníci najdou možnost sdílet ho na některých sociálních sítích.
V dalších dílech pořídíme vlastní doménu, vyzkoušíme práci se slevami, upravíme titulní stránku a záhlaví, změníme vzhled stránek a rozešleme newsletter.