V čem našeptávač pomáhá?
O našeptávači jste již nepochybně slyšeli. V internetovém světě je všudypřítomný. Určitě si jej vybavíte, když na seznamu nebo googlu hledáte produkt či službu. Jakmile začnete psát do vyhledávacího řádku určitý výraz, začne vám vyhledávač „našeptávat“ různé možnosti, které jsou složené z počátečních písmen slov a podle vyhledávače by vás mohly zajímat.
Tato funkce nás z hlediska užitečnosti zaujala a rozhodli jsme se ji implementovat i do e-shop systému FastCentrik.
Ukázka našeptávače u e-shopu Spodní prádlo Valentýna
Našeptávač: Nová funkce pro váš e-shop
Našeptávač v e-shopu funguje tak, že do vyhledávacího řádku se automaticky doplňuje seznam výrazů, které zákazníci nejčastěji zadávají do vyhledávače. Už při zadání prvního písmene do políčka vyhledávání se zákazníkovi zobrazí roleta s nabídkou výrazů z e-shopu.
Našeptávač u vyhledávače e-shopu v praxi
Našeptávač nabídne zákazníkovi shodně začínající nebo podobná slova, která byla v minulosti nejčastěji vyhledávána a vedla k tomu, že zboží bylo zobrazeno v detailu nebo vloženo do košíku. Ze seznamu nejčastěji zadávaných slov jsou odstraněna slova, která nemají s e-shopem nic společného.
Zpracování hledaných výrazů
Informace jsou zpracovávány do provozní podoby jednou za noc. Ukládaným hledaným výrazům se nejprve aktualizují souhrnné informace o celkových počtech zobrazení a relevantnosti. Následně se aktualizuje tabulka, ve které zůstávají pouze slova, která byla ověřena nejpozději před 14 dny a za poslední rok vedla k uspokojivému chování uživatele.
V průběhu času se každému e-shopu mění sortiment. Produkty jsou stahovány z prodeje a dříve úspěšně hledaná slova se musí z nabídky našeptávače odstranit. Ověřování každého slova, které nebylo 10 dnů úspěšně použito v hledání, probíhá jednou týdně o víkendu.
Našeptávač v administraci e-shopu
U našeptávače nemusíte nic nastavovat. Nastavení je nutné pouze v případě, pokud byste chtěli změnit počet nastavených slov nebo našeptávač úplně vypnout.
Nastavení našeptávače v administraci e-shopu zvládnete hravě sami. V „Administrace -> Nastavení systému -> Nastavení modulů -> Obecné -> Hledací boxík -> Maximální počet zobrazených výrazů v našeptávači“ si nastavíte maximální počet výrazů, které se budou zákazníkovi zobrazovat.
Pokud nechcete, aby se našeptávač v e-shopu zobrazoval, zadejte 0 (nulu) v „Maximální počet zobrazených výrazů v našeptávači“.
Nastavení CSS stylu pro našeptávač
Jestli máte v e-shopu naimplementovanou vlastní grafiku, zkontrolujte si správnost zobrazování stránek. Pokud to bude třeba, je nutné styly upravit podle následujícího návodu.
Zobrazení našeptávače se nastavuje pomocí třídy (class) whisperer_div. V CSS souboru máte možnost grafiku ovlivnit pomocí .searchBox .whisperer_div, kde nastavíte pozici a šířku našeptávače. Rovněž je potřeba nastavit co nejvyšší tzv. z-index, aby se našeptávač zobrazoval a překrýval i ostatní objekty mimo vyhledávací boxík.
Nastavení stylu prvků pro výběr výrazu (ul,li) se v CSS nastaví pomoci .searchBox .whisperer_div ul,.searchBox .whisperer_div li,.searchBox .whisperer_div li span a .searchBox .whisperer_div .hoverli.
- Zde je nastaveno především odsazení prvku ul od celého našeptávače: .searchBox .whisperer_div ul
- Standartní nastavení nevybraného prvku pro výběr výrazu v našeptávači: .searchBox .whisperer_div li
- Nastavení textu výrazu v našeptávači (hlavně odsazení): .searchBox .whisperer_div li span
- Třída pro nastavení vzhledu pozadí (především barvy) pro jakýkoli aktuálně vybraný prvek našeptávače (prostřednictvím myši nebo klávesnice): .searchBox .whisperer_div .hoverli
Výchozí nastavení pro výše zmiňované prvky:
- .searchBox .whisperer_div {width: 137px; border: 1px solid #BBB000; position:absolute; left:5px;top:68px; background:#FFFFFF;z-index:100;}
- .searchBox .whisperer_div ul {margin: 0; padding: 0px 0 0px 0; list-style-type: none}
- .searchBox .whisperer_div li {position: relative; padding: 0px 0 0px 0;float: left; width:100%;color:#000000;}
- .searchBox .whisperer_div li span {margin-left:4px;}
- .searchBox .whisperer_div .hoverli {text-decoration: none; background: #2E9AFE; color:#FFFFFF}