Skip to content

Instantly share code, notes, and snippets.

@kremso

kremso/_Instructions.md

Last active July 4, 2018 14:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kremso/1f18f1e4d4ca73981dc653c2741d9241 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kremso/1f18f1e4d4ca73981dc653c2741d9241 to your computer and use it in GitHub Desktop.
Download ZIP
Dedoles (.sk, .cz, .ro)
Raw
_Instructions.md

Luigi's Box Autocomplete integrácia s Dedoles webmi

  1. Includnuť CSS štýly nášho widgetu
<link rel="stylesheet" href="https://cdn.luigisbox.com/autocomplete.css">
  1. Includnuť špecifické CSS overrides, môžete ich nechať inline vo webe, alebo ich vložiť niekde medzi svoje CSS a minifikovať. Pozor na to, aby tam neostali štýly z existujúceho Luigi's Box autocomplete.
<style type="text/css">
  #header-search .search-suggest { display: none !important; }
  #header-search .ui-autocomplete.ui-front { display: none !important; }
  @media screen and (max-width: 700px) { .luigi-ac-products a:nth-child(n+6){display:none;}}
  .luigi-ac-header {font-weight: bold !important}
  .luigi-ac-price-old, .luigi-ac-price {text-shadow: none !important; color: #868686 !important; font-weight: 200 !important; font-size: 12px !important}
  .luigi-ac-product, .luigi-ac-other {flex-wrap: wrap !important}
  .luigi-ac-description {justify-content: flex-start !important; flex: auto !important; text-align: center !important;}
  .luigi-ac-product {width:25% !important;}
  .luigi-ac-price-discount { color: #D90C05 !important; font-size: 13px !important; font-weight: bold !important}
  .luigi-ac-name, .luigi-ac-other-content { font-size: 13px !important; color: #222222 !important; text-decoration: none !important;}
  .luigi-ac { color: rgb(0,0,0) !important;}
  .luigi-ac-products {font-family: Museo300,'Open Sans',sans-serif !important;}
  @media (min-width: 992px) {
    .luigi-ac { max-width: 1050px !important;}
    .luigi-ac-products { width: 75% !important;}
    .luigi-ac-others {width: 25% !important; }
  }
  @media (max-width: 576px) {
    .luigi-ac-product { width: 50% !important;}
  }
  @media (max-width: 304px) {
    .luigi-ac-product { width: 100% !important;}
  }
  .luigi-ac-footer { text-shadow: none !important; }
  .luigi-ac-image { width: 100% !important; height: 110px !important;}
  .luigi-ac-image img {width:120px !important;}
  .luigi-ac-highlight { background: rgb(230,243,244) !important; }
  .luigi-ac-item:hover,.luigi-ac-item.active,.luigi-ac-other:hover,.luigi-ac-active { background: #CCFFCC !important; }
</style>

  1. Vložiť inicializačnú funkciu pre LB Autocomplete. Je potrebné vložiť kód tak, aby bol v HTML až za elementom #search-text.

    Vložte kód na základe krajiny - pre každú krajinu jeden. Kódy sa lišia lokalizáciou textov a unikátnym Luigi's Box kódom ktorý identifikuje krajinu. Je dôležité aby ste použili správny Luigi's Box kód, aby sa nestalo, že napríklad na dedoles.sk budeme prehľadávať produkty ktoré patria dedoles.ro

dedoles.sk

<script type="text/javascript">
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: '9002-9193',
    Layout: 'grid',
    Types: [
      {
        type: 'category',
        name: 'Kategórie',
        size: 10
      },
      {
        type: 'item',
        name: 'Produkty',
        size: 8
      }
    ],
    ShowBranding: true,
    _Attributes: function(allAttributes) {
      var display = [];
      if (allAttributes['category']) {
        var untouched_attr = allAttributes['category.untouched'] ? 'category.untouched' : 'category'
        for(var i = 0; i < allAttributes['category'].length; i++) {

          display.push({
            value: allAttributes['category'][i],
            'value.untouched': allAttributes[untouched_attr][i]
          });
        }
      }
      return display;
    }
  }, '#search-text');
}
</script>

<script src="https://cdn.luigisbox.com/autocomplete.js" async onload="LBInitAutocomplete()"></script>

dedoles.cz

<script type="text/javascript">
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: '9002-10060',
    Layout: 'grid',
    Types: [
      {
        type: 'category',
        name: 'Kategorie',
        size: 10
      },
      {
        type: 'item',
        name: 'Produkty',
        size: 8
      }
    ],
    ShowBranding: true,
    _Attributes: function(allAttributes) {
      var display = [];
      if (allAttributes['category']) {
        var untouched_attr = allAttributes['category.untouched'] ? 'category.untouched' : 'category'
        for(var i = 0; i < allAttributes['category'].length; i++) {

          display.push({
            value: allAttributes['category'][i],
            'value.untouched': allAttributes[untouched_attr][i]
          });
        }
      }
      return display;
    }
  }, '#search-text');
}
</script>

<script src="https://cdn.luigisbox.com/autocomplete.js" async onload="LBInitAutocomplete()"></script>

dedoles.ro

<script type="text/javascript">
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: '9002-10166',
    Layout: 'grid',
    Types: [
      {
        type: 'category',
        name: 'Categorie',
        size: 10
      },
      {
        type: 'item',
        name: 'Produse',
        size: 8
      }
    ],
    ShowBranding: true,
    _Attributes: function(allAttributes) {
      var display = [];
      if (allAttributes['category']) {
        var untouched_attr = allAttributes['category.untouched'] ? 'category.untouched' : 'category'
        for(var i = 0; i < allAttributes['category'].length; i++) {

          display.push({
            value: allAttributes['category'][i],
            'value.untouched': allAttributes[untouched_attr][i]
          });
        }
      }
      return display;
    }
  }, '#search-text');
}
</script>

<script src="https://cdn.luigisbox.com/autocomplete.js" async onload="LBInitAutocomplete()"></script>

Dokumentácia k widgetu: https://live.luigisbox.com/#autocomplete-widget

Pripájam aj testovací skript na jednorazové odskúšanie widgetu a obrázok ako by to malo vyzerať.

Raw
dedoles-ac-sk.js
// skript pre jednorazove odskusanie - staci pastnut do developer tools
// konzoly
function LBInitAutocompleteDev() {
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: '9002-9193',
Layout: 'grid',
Types: [
{
type: 'category',
name: 'Kategórie',
size: 10
},
{
type: 'item',
name: 'Produkty',
size: 8
}
],
ShowBranding: true,
_Attributes: function(allAttributes) {
var display = [];
if (allAttributes['category']) {
var untouched_attr = allAttributes['category.untouched'] ? 'category.untouched' : 'category'
for(var i = 0; i < allAttributes['category'].length; i++) {
display.push({
value: allAttributes['category'][i],
'value.untouched': allAttributes[untouched_attr][i]
});
}
}
return display;
}
}, '#search-text');
}
var css = document.createElement('style');
css.type = 'text/css';
var styles = `
#header-search .search-suggest { display: none !important; }
#header-search .ui-autocomplete.ui-front { display: none !important; }
@media screen and (max-width: 700px) { .luigi-ac-products a:nth-child(n+6){display:none;}}
.luigi-ac-header {font-weight: bold !important}
.luigi-ac-price-old, .luigi-ac-price {text-shadow: none !important; color: #868686 !important; font-weight: 200 !important; font-size: 12px !important}
.luigi-ac-product, .luigi-ac-other {flex-wrap: wrap !important}
.luigi-ac-description {justify-content: flex-start !important; flex: auto !important; text-align: center !important;}
.luigi-ac-product {width:25% !important;}
.luigi-ac-price-discount { color: #D90C05 !important; font-size: 13px !important; font-weight: bold !important}
.luigi-ac-name, .luigi-ac-other-content { font-size: 13px !important; color: #222222 !important; text-decoration: none !important;}
.luigi-ac { color: rgb(0,0,0) !important;}
.luigi-ac-products {font-family: Museo300,'Open Sans',sans-serif !important;}
@media (min-width: 992px) {
.luigi-ac { max-width: 1050px !important;}
.luigi-ac-products { width: 75% !important;}
.luigi-ac-others {width: 25% !important; }
}
@media (max-width: 576px) {
.luigi-ac-product { width: 50% !important;}
}
@media (max-width: 304px) {
.luigi-ac-product { width: 100% !important;}
}
.luigi-ac-footer { text-shadow: none !important; }
.luigi-ac-image { width: 100% !important; height: 110px !important;}
.luigi-ac-image img {width:120px !important;}
.luigi-ac-highlight { background: rgb(230,243,244) !important; }
.luigi-ac-item:hover,.luigi-ac-item.active,.luigi-ac-other:hover,.luigi-ac-active { background: #CCFFCC !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 = LBInitAutocompleteDev;
document.head.append(a);
var b = document.createElement('link');
b.rel = "stylesheet";
b.href = "https://cdn.luigisbox.com/autocomplete.css";
document.head.append(b);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment