Šestý díl věnujeme úpravám detailu zboží a tvorbě variant. Webgarden nám pro tyto účely dovoluje využít celou nabídku multimediálních prvků a se zbožím tedy můžeme zacházet stejně jako se článkem nebo jiným dokumentem.
Multimediální prvky
Po přihlášení na Webgarden.cz se proklikáme do detailu hrnečku S kočkou v rubrice Obsah – Produkty – Keramika. Detail neobsahuje zatím žádné dodatečné informace a vypadá stroze. Po funkční stránce to nevadí, ale dodatečné informace mohou navnadit návštěvníka ke koupi. Nehledě na to, že informace o zboží mají velký vliv na SEO (optimalizaci pro vyhledávače).
8.png
9.png
Do detailu zboží v části „Obsah“ vložíme prvek Odstavec textu. Do textového pole napíšeme poutavý popis zboží. Pokud je popis delší, je dobré jej rozdělit do několika prvků Odstavec textu.
12.jpg
13.png
Tip: Veškeré texty a obrázky doporučujeme také zálohovat mimo službu Webgarden. V případě náhodného smazání ze všech umístění a z koše totiž není možné obsah nijak obnovit.
Pokud chceme některý z odstavců zvýraznit, můžeme použít předdefinovaný vzor pro zvýraznění. Klikneme na editační ikonku odstavce, přepneme na kartu „Rozšířené“ a na řádku Zvýraznění zvolíme např. „Vzor 2“. Uložíme.
1.jpg
3.png
Pod poslední text přidáme prvek Obrázek a nahrajeme do něj alternativní fotografie produktu. Obrázky v našem příkladu přidáme tři. Jelikož je obsah dokumentů na Webgarden obvykle dělen do čtyř myšlených sloupců, jsou tyto obrázky řazeny vedle sebe. Webgarden je také nastaven tak, že pokud jsou obrázky řazeny do 4 a více sloupců, je pro náhled použita zmenšenina, které je sice datově malá a rychle se načítá, ale může mít sníženou kvalitu.
4.png
5.png
Abychom docílili zarovnání obrázků s textem a použití kvalitních zmenšenin, změníme sazbu celého zboží ze 4 na 3 sloupce. Klikneme na horní žlutou editační ikonku – tu, která náleží k části stránky s prvky. V dialogu změníme počet buněk (tedy sloupců) na 3 a uložíme. Celo-šířkové prvky – Odstavce textu budou stále zabírat celou šířku, ale obrázky se poměrně roztáhnou.
1a.png
5.png
Stejného efektu můžeme docílit také zanořením prvku Sloupce, ukážeme si to v následujících krocích. Nejprve ale vrátíme sazbu celého Zboží zpět na 4 sloupce. Poté klikneme na drobnou ikonku „Přidat položku“ přímo ve vyskakovacím menu u první fotografie. Tímto postupem přidáme prvek před tuto fotografii. Vybereme prvek Sloupec.
1b.png
Sloupci nastavíme hodnoty na 4 – pro šířku a 3 – pro počet buněk/sloupců. Uložíme.
1c.png
Nad fotografiemi se nám objeví nové pozice, které zde vytváří prvek Sloupec. Mohlo by nám připadat zavádějící, že to přece není sloupec, ale řádek. Z principu ale tento prvek umožňuje řadit prvky do sloupcové sazby, ale zde je použit zatím jen jeden. Druhou funkcí prvku Sloupec je možnost změnit pro množinu dalších prvků sazbu nebo je společně zvýraznit nějakým vzorem.
Nyní myší přetaháme postupně fotografie do prostoru sloupce. Jelikož sloupec má nastavenu sazbu 3, tak se nám fotografie rovnou relativně zvětší.
6.png
7.png
Nakonec ještě posledně vloženému sloupci (tomu, co obaluje fotografie) nastavíme barevné zvýraznění. Klikneme na jeho editační ikonku, zvolíme Zvýraznění „Vzor 1“ a uložíme.
1d.png
¨8.png
Nyní si celý obsah rozdělíme na dva sloupce a vpravo od popisu hrníčku vložíme anketu. Nejprve – již známým postupem – vložíme před první odstavec nový prvek Sloupec. Nastavíme mu šířku 3 (sazba celého zboží je 4, takže Sloupec bude zabírat 3/4) a počet buněk 3.
1e.png
9.png
Do nového sloupce myší postupně přetaháme všechny ostatní prvky.
10.png
11.png
Vpravo pak přidáme druhý sloupec. Tentokrát nastavíme oba parametry – šířku i počet buněk na 1.
1f.png
V rámci pravého úzkého sloupce vytvoříme nový Titulek s textem „Výhody“.
1g.png
Pod něj přidáme prvek Odstavec textu s výčtem výhod zboží. Na třetí místo zařadíme prvek Anketa.
1h.png
U ankety vyplníme titulní Otázku a varianty odpovědí.
1i.png
12.png
Při rozdělení sloupců 1:3 je pravý sloupec velmi úzký. Ukážeme si, jak změnit poměr na 1:2. Nejprve vyvoláme editační Dialog levému sloupci kliknutím na příslušnou ikonku. Změníme jeho šířku z hodnoty 3 na 2. Nyní již máme sloupce ve správném poměru, ale jelikož je celková sazba zboží 4, tak nám prvky vyplňují pouze první tři sloupce.
13.png
14.png
Vyvoláme tedy editační okénku základního rámce stránky a změníme sazbu – počet buněk ze 4 na 3. Po uložení máme popis Zboží s dělením na tři pole, přičemž první dvě obsazuje jeden sloupec a třetí pole druhý sloupec.
novy1.png
16.png
Varianty zboží
Webgarden umí zacházet s neomezeným množstvím variant zboží. To se nám hodí v případě, že máme produkt například v několika barevných provedeních nebo velikostech. V případě, že potřebujeme evidovat dva různé druhy variant, například velikost a barvu, musíme si pomoci tak, že produkt rozdělíme podle jedné varianty do samostatných Zboží a teprve v jejich rámci použijeme druhou variantu.
V detailu zboží hrneček S kočkou klikneme na tlačítko „Přidat variantu“.
1j.png
U vzniknuvší varianty vyplníme cenu, název, skladové zásoby, nahrajeme obrázek a uložíme.
1k.png
17.png
U variant můžeme vyplnit také rozlišovací kód. To je vhodné udělat, jelikož tento kód nám může usnadnit identifikaci v případné objednávce.
1l.png
1m.png
Prostor pro komentáře
Stále častěji najdeme na eshopech pod zbožím prostor pro vyjádření návštěvníků. Pokud chceme pod zboží diskuzi přidat, posuneme se v administraci v detailu zboží níže a v části Prostor pro komentáře stiskneme zelené plus pro přidání. Na webu se nám v zápatí zboží objeví proklik do nové diskuze.
1n.png
1o.png
Na webu můžeme pod zbožím prokliknout do detailu diskuze a zde položit dotaz.
1p.png
Administrátor (nebo kdokoliv jiný) může pak na dotaz reagovat.
1q.png
Aby měl administrátor přehled nad diskuzemi, umístíme do nějaké skryté rubriky (například rubriky viditelné pouze v administraci) prvek Nové příspěvky. V něm pak uvidíme agregované poslední položené dotazy napříč diskuzemi.
1r.png
18.png
Další možnosti
Nakonec si zkusíme přeskupit multimediální popis zboží. Nad prvkem Sloupec, obalujícím obrázky, vytvoříme Titulek „Dostupné varianty“.
1s.png
19.png
Nad druhou fotografií vytvoříme další zanořený Sloupec s šířkou 2 a počtem buněk 1.
1t.png
20.png
Do tohoto zanořeného sloupce vložíme Titulek s názvem první varianty.
1u.png
1v.png
Pod titulek vložíme Odstavec textu např. s cenou varianty.
1w.png
21.png
Obdobně vytvoříme Sloupce ještě u dvou zbylých fotografií a vyplníme je titulkem a textem.
22.png
Kromě diskuze můžeme ke zboží umístit také kontaktní formulář. Pokud skrze něj zákazník odešle dotaz, obdržíme ho emailem. Pod přehled variant přidáme prvek Titulek s textem „Máte dotaz ke zboží?“.
1x.png
23.png
Pod titulek přidáme prvek Formulář. Vymažeme název formuláře, překontrolujeme email a nakonfigurujeme políčka formuláře. Obvykle budeme potřebovat políčko pro email a pro vlastní text dotazu.
1y.png
24.png
Tento návod ilustroval některé možnosti formátování popisu zboží, ale uživatelé jich mají k dispozici více – např. videa nebo oblíbené video-návody či video-recenze z YouTube, doplňující dokumenty ke stažení a nepřeberné množství kombinací multimediálních prvků. Další informace k formátování mohou uživatelé nalézt v nápovědě Tvoříme web.
28.08.2014 13:05:52
Name
Email
Comment
Or visit this link or this one