Jednostránkový e-shop

30. 11. 2016

Na stránkách inPage si vytvoříte nejen klasický e-shop, ale na šablonách Hanami a One i ten jednostránkový. Pro ten je důležité deaktivovat odkazy na detaily produktu. V tomto článku si ukážeme návod. 

Kdy je vhodné vytvořit jednostránkový e-shop? Většinou se jedná o produkty, které mají buď velmi krátký, nebo žádný popis. U takových chceme zobrazit pouze tlačítko Koupit a zamezit návštěvníkovi možnost vstoupit na samostatnou stránku produktu.

V rámci tvorby balíčků jsme jednostránkový e-shop připravili například pro pizzerii Silvio:

Nejprve si na stránkách inPage vytvoříte e-shop. Jak na to, se dočtete v našem seriálu E-shop v inPage. Jakmile máte svůj e-shop vytvořen, je důležitá deaktivace odkazů, které by vedly na jednotlivé detaily produktů.

Deaktivace odkazů

Detail produktu lze ve výchozím stavu zobrazit kliknutím na název, obrázek nebo tlačítko Zobrazit. Dále lze zobrazit při vložení do košíku kliknutím na stejné prvky ve vyskakovacím okně s informací o vložení do košíku a nakonec také v něm. Zamezit tomuto chování můžeme přidáním hodnoty k odkazům, které chceme deaktivovat.

Ukážeme si na příkladu: 

V HTML máme uveden tento zápis odkazu:

<a href="https://inpage.cz">odkaz</a>

Pro jeho deaktivaci doplníme v CSS zápis:

.nolink a { 
  pointer-events: none;
}

Třída nolink zde reprezentuje třídu nadřazeného prvku odkazu, můžeme ale použít i třídu samotného odkazu, například:

a.nolink { 
  pointer-events: none;
}

V obou případech se odkaz deaktivuje: odkaz

Jednostránkový e-shop na šabloně Hanami

Pokud tvoříte jednostránkový e-shop v šabloně HANAMI, v sekci Vzhled → Vlastní styly CSS zapíšeme kód:

.item-eshop-product h2 a,
.item-eshop-product a.link-thumbnail,
a#addBasketModalImage,
#addBasketModalTitle a,
#productincart a.link-thumbnail,
#productincart h4 a {
  pointer-events: none;
}

Tímto kódem deaktivujeme všechny odkazy, které by vedly na detaily produktů.

Jednostránkový e-shop na šabloně One

Pro deaktivaci odkazů použijeme stejný kód jako pro šablonu Hanami a přidáme k němu následující:

.item-eshop-product .more .btn-primary {
  display: none;
}

Zamezení zobrazování odkazů ve vyhledávačích

Na stránky vám ovšem nechodí jen skuteční návštěvníci, důležití jsou také roboti. Ti vaše stránky navštěvují, aby je zaindexovali do vyhledávačů. Aby se ve vyhledávačích nezobrazily odkazy na podstránky, ke kterým jsme zamezili přístup pomocí deaktivace odkazů, v sekci Nastavení → Nastavení prostředí zapneme Funkce pro experty. Na stránkách editace jednotlivých produktů a kategorií se nám poté zobrazí možnost nastavení vlastní HTML hlavičky.

V zásadě platí to, že u všech stránek, kategorií a produktů, které nechceme, aby se zobrazovaly ve vyhledávání (Google, Seznam, Bing, aj.), zapneme funkci Vlastní hlavička a do pole vepíšeme následující tag: 

<meta name="robots" content="noindex">