electronic-star

Instructions.md

Luigi's Box Autocomplete integrácia s electronic-star webmi

Súbor integration.js obsahuje kód, ktorý cez javascript pozmení DOM a vloží doňho všetko potrebné pre stiahnutie a inicializáciu Autocomplete funkcionality.

Skript je iba jeden, ale je potrebné do neho doplniť viaceré parametre ktoré sa líšia v závislosti od krajiny. V princípe sa jedná o Luigi's Box kód ktorý zabezpečí použitie správneho feedu a textácie, ktoré treba prispôsobiť danej krajine. V tabuľke nižšie uvádzame všetky parametre aj s vysvetlením.

Parameter	Popis	Príklad
$TRACKER_ID	Luigi's Box kód webu, ktorý nájdete v samostatnej tabuľke nižšie	'21386-30160'
$CATEGORY	Nadpis ktorý sa zobrazí v autocomplete roletke pri výsledkoch typu kategória	'Kategórie'
$BRAND	Nadpis ktorý sa zobrazí v autocomplete roletke pri výsledkoch typu značka	'Výrobcovia'
$PRODUCT	Nadpis ktorý sa zobrazí v autocomplete roletke pri výsledkoch typu produkt	'Produkty'
$HINT	Text ktorý oznamuje že pre hľadanie je potrebné stlačiť klávesu Enter	return "Pre vyhľadanie <span>„" + query + "“</span> stlačte Enter"

Pre každú krajinu nahraďte v skripte parametre žiadanou hodnotou. Dajte pozor aby ste parameter použili podľa príkladu, najmä aby tam zostali úvodzovky a to najmä v prípade parametra $HINT. V tabuľke nižšie uvádzame kódy jednotlivých krajín.

Web	$TRACKER_ID
electronic-star.cz	'21386-30049'
electronic-star.hu	'21386-30055'
electronic-star.ro	'21386-30069'
electronic-star.hr	'21386-30100'
electronic-star.si	'21386-30139'
electronic-star.bg	'21386-30160'

integration.js

function LBInitAutocomplete() {
  indexOfHighlightedWithFallback = function(collection) {
    for (i = 0; i < collection.length; i++) {
      if (collection[i].indexOf('<em>') > -1) {
        return i;
      }
    }
    if (collection.length > 0) {
      return collection.length - 1
    }
  }
  AutoComplete({
    TrackerId: $TRACKER_ID,
    Layout: 'line',
    Types: [
      {
        type: 'category',
        name: $CATEGORY,
        size: 3
      },
      {
        type: 'brand',
        name: $BRAND,
        size: 3
      },
      {
        type: 'item',
        name: $PRODUCT,
        size: 6
      }
    ],
    Hint: function(query) {
      return $HINT
    },
    _Attributes: function(allAttributes) {
      var display = [];
      if (allAttributes['category']) {
        var untouched_attr = allAttributes['category.untouched'] ? 'category.untouched' : 'category'
        var i = indexOfHighlightedWithFallback(allAttributes['category']);
        if (i !== undefined) {
          display.push({
            value: allAttributes['category'][i],
            'value.untouched': allAttributes[untouched_attr][i]
          });
        }
      }

      if (allAttributes['location']) {
        var untouched_attr = allAttributes['location.untouched'] ? 'location.untouched' : 'location'
        var i = indexOfHighlightedWithFallback(allAttributes['location']);
        if (i !== undefined) {
          display.push({
            value: allAttributes['location'][i],
            'value.untouched': allAttributes[untouched_attr][i]
          });
        }
      }
      return display;
    }
  }, '.inputGroup-search');
}

(function() {
  var css = document.createElement('style');
  css.type = 'text/css';

  var styles = "" + 
      "#luigi-ac-highlight { background: rgb(178, 226, 240) !important; }" + 
      "#luigi-ac-item:hover {background-color: #f4f8fb !important; }" +
      "#luigi-ac-price { width: 80px !important; float: none !important; padding-right: 20px !important; }" +
      "@media (min-width: 768px) and (max-width: 992px) { #luigi-ac { width: 590px !important; left: -178px !important; }}" +
      "@media (min-width: 993px) and (max-width: 1200px)  { #luigi-ac { width: 590px !important; left: -118px !important; }}";


  if (css.styleSheet) css.styleSheet.cssText = styles;
  else css.appendChild(document.createTextNode(styles));
  document.head.append(css);

  var a = document.createElement('script');
  a.src = "https://cdn.luigisbox.com/autocomplete.js";

  a.onload = LBInitAutocomplete;
  document.head.append(a);

  var b = document.createElement('link');
  b.rel = "stylesheet";
  b.href = "https://cdn.luigisbox.com/autocomplete.css";

  document.head.append(b);
}());

lb-ac-screenshot.png