Online aplikace a služby pro e-commerce

Uživatel

Technické informace pro implementaci našeptávače

Informace zde uvedené slouží především programátorům, kteří mají za úkol implementaci našeptávače slov a produktů do eshopu nebo webových stránek využívajících služeb Data APPs.

Pokud nechcete výrazně změnit vzhled či nastavení Vašeho našeptávače, doporučujeme raději využít standardní implementaci našeptávače, která klade nižší nároky na realizátora a zajistí správný chod aplikací a služeb Data APPs. V případě chybně provedené vlastní implementace neneseme odpovědnost za správné fungování služeb našeptávačů.

Vlastní implementace našeptávače do eshopu či webu

Do html hlavičky dokumentu (head elementu) každé stránky vložte následující kód, který zajišťuje načtení samotné aplikace našeptávače do Vašeho webu:

<script type="text/javascript" src="https://cdn.dataapps.cz/apps/ftss/ftss.stable.js"></script>

Pro inicializaci našeptávače je dále nutné přidat tento krátký kód opět do html hlavičky webu, nebo do externího javascriptového souboru, který poté vložte taktéž do html hlavičky.

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function (evn) {
  var ftss = new window.FTSS(
  "VYHLEDAVACI_INPUT"
  , {
    api: "https://api.dataapps.cz/pub/fulltext/?"
    , key: "KOD_NASEPTAVACE"
    , mode: "mixed"
    , allowCookies: true
  });
});
</script>

Hodnoty pro doplnění kódu:
VYHLEDAVACI_INPUT - ID nebo unikátní selektor vyhledávacího pole (input element)
KOD_NASEPTAVACE - Kód Vašeho našeptávače vygenerovaný při aktivaci a nastavení služby.

Přizpůsobení vzhledu našeptávače (CSS)

Pro přizpůsobení našeptávače lze využít několika CSS tříd, pro které definujete styly a tím upravíte vzhled nebo grafické chování našeptávače. Základní definice CSS stylů, kterou je možné upravit a dále použít je následující:

.ftssCssBox { display: none; position: absolute; z-index: 1; padding: 4px 0px; text-align: left; box-sizing: border-box; border: solid #cccccc; border-width: 0px 1px 1px 1px; background-color: white; box-shadow: 0px 1px 3px #999999; }
.ftssCssHead { height: 1.9em; line-height: 1.8em; overflow: hidden; box-sizing: border-box; margin: 0px; padding: 0px 4px; font-weight: bold; }
.ftssCssItem { min-height: 1.9em; line-height: 1.7em; overflow: hidden; box-sizing: border-box; padding: 0px 4px; cursor: pointer; }
.ftssCssItem:hover { background-color: #f5f5f5; }
.ftssCssActive { background-color: #f5f5f5; }
.ftssCssBox section:first-of-type { margin-top: 0.2em; }
.ftssCssBox section:last-of-type { margin-bottom: 0.2em; }
.ftssCssItem * { display: inline-block; }
.ftssCssItem .image { width: 40px; min-height: 30px; max-height: 40px; line-height: inherit; overflow: hidden; box-sizing: border-box; text-align: center; vertical-align: middle; margin: 2px 8px 2px 0px; border: solid 1px #f5f5f5; border-radius: 1px; }
.ftssCssItem .image img { max-width: 40px; margin: 0px auto; padding: 0px; border: 0px; vertical-align: middle; box-sizing: border-box; background-color: #fafafa; }
.ftssCssBox div.ftssCssItem .text { max-width: 100%; height: 1.7em; line-height: 1.7em; overflow: hidden; box-sizing: border-box; vertical-align: middle; }
.ftssCssBox section.ftssCssItem .text { max-width: calc(100% - 50px); line-height: 1.06em; overflow: hidden; font-size: 0.93em; box-sizing: border-box; vertical-align: middle; }

Pokud Vám standardní vzhled našeptávače vyhovuje, není nutné definovat uvedené CSS styly, které jsou základní součástí našeptávače. Chcete-li naopak našeptávač upravit včetně jeho chování, využijte naši technickou podporu, kde Vám sdělíme podrobnější technické informace a možnosti.

Podpora implementace našeptávačů

Implementace našeptávače může přinést určitá úskalí, která je možné vyřešit s technickou podporou Data APPs. V případě, že si přejete s implementací našeptávače pomoci, kontaktujte ochodní oddělení, nebo využijte kontaktu na technickou podporu, která ve spolupráci s Vaším pracovníkem připraví potřebné technické náležitosti pro co nejsnazší implementaci.