INHALTSVERZEICHNIS

1. Allgemein


Das Plugin bietet dir die Möglichkeit, die Suchfunktion deines Shops noch individueller zu gestalten. 


Dabei können Kategorien, Hersteller, News oder Eigene Seiten getrennt von den Produkten angezeigt und durchsucht werden. 


Außerdem werden Suchvorschläge angezeigt, die dem Kunden die Suche erleichtern. 


Zu diesem Zweck stellen wir dir das benötigte Layer-Script, sowie das vorgestylte Custom-Template kostenlos zur Verfügung. 

Für individuelle Anpassungen oder Stylingwünsche stehen wir natürlich gerne zur Verfügung.


Das Ergebnis mit dem Standard-Template ist auf folgendem Bild zu sehen (Klick darauf, um es zu vergrößern):



Die einzelnen Suchbereiche kannst du ganz einfach selbst anpassen. Wie man die das Layer-Script einbindet und die erweiterte Suche konfiguriert, ist in den folgenden Punkten beschrieben.


2. Daten-Feeds anlegen


Um Kategorien, Hersteller, News oder Eigene Seiten in die Suche zu integrieren müssen zunächst bei doofinder die entsprechenden Daten-Feeds angelegt werden.


Beachte: Diese Daten können nicht per API übertragen werden (im Gegensatz zu den Produktdaten), hier arbeitest du in jedem Fall mit einem extra Feed



Gehe dazu in deinem doofinder-Backend auf die "Search Engine" deines JTL-Shops und dort auf den Reiter "Indices".

Klicke dort auf den Button Add Indice


Im PopUp-Fenster trägst du dann zunächst einen Namen ein und wählst unter Preset den Wert "Other kind of data" aus.



Wichtig:  Der Name muss einer der folgenden Bezeichner sein, wenn das Layer-Script und Custom-Template aus diesem
                 Artikel verwendet werden!

  • categorien          - für Kategorien
  • brands                 - für Hersteller
  • news                    - für Newsseiten
  • links                     - für Eigene Seiten


Nach dem Speichern erscheint ein neues Feld im Doofinder Backend, mit dem gewählten Namen als Überschrift. 



Als nächstes muss ein Feed hinzugefügt werden. Klicke dazu auf  "+ Add source"  und wähle die Option "Feed URL".

In das Textfeld für die Feed URL muss anschließend folgende URL korrekt eingetragen werden:


*Deine Shop URL*/includes/plugins/jst_doofinder/pages.php?id=1&export[]=*Bezeichner des Feeds*


In diesem Beispiel wäre das:


https://mein-shop.de/includes/plugins/jst_doofinder/pages.php?id=1&export[]=categories


Achte darauf, dass die ID in der URL mit der ID aus der Inhalts-Feed URL übereinstimmt. Diese findest du im Backend des Plugins unter dem Reiter SYNC-API unter dem Punkt "Seiten-Feed".



Nach diesem Muster kannst du nun alle gewünschten Data Sources mit dazugehörigem Feed (z.b. Hersteller) in Doofinder anlegen. 


Klicke abschließend unten auf der Seite auf "Process Now" und bei Erfolg erhälst du Für jeden Feed eine Meldung, mit der Anzahl der enthaltenen Items.



3. Layer-Script und Custom Template


3.1. Layer Script


Um das Layer Script zu nutzen muss dieses im Backend des Plugins unter dem Reiter "Layer Script" in das Textfeld für den Doofinder Layer eingetragen werden. Kopiere dazu den folgenden Code und füge ihn dort ein.


<script type="text/javascript">
function configureLayer(instance) {
      const mainContainerId = instance.layerOptions.mainContainerId;
      
instance.layer.addController('categories', {rpp: 4, type: ['categories']});
      instance.layer.categoriesController.registerWidget(instance.layer.queryInputWidget);
      instance.layer.categoriesController.registerWidget(
        new doofinder.core.widgets.Display('#df-aside__categories__' + mainContainerId, {
          template: document.getElementById('df-categories-tpl').innerHTML
        })
      );
      instance.layer.categoriesController.search(instance.layer.queryInputWidget.value);

 instance.layer.addController('brands', {rpp: 4, type: ['brands']});
      instance.layer.brandsController.registerWidget(instance.layer.queryInputWidget);
      instance.layer.brandsController.registerWidget(
        new doofinder.core.widgets.Display('#df-aside__brands__' + mainContainerId, {
          template: document.getElementById('df-brands-tpl').innerHTML
        })
      );
      instance.layer.brandsController.search(instance.layer.queryInputWidget.value);

 instance.layer.addController('links', {rpp: 4, type: ['links']});
      instance.layer.linksController.registerWidget(instance.layer.queryInputWidget);
      instance.layer.linksController.registerWidget(
        new doofinder.core.widgets.Display('#df-aside__links__' + mainContainerId, {
          template: document.getElementById('df-links-tpl').innerHTML
        })
      );
      instance.layer.linksController.search(instance.layer.queryInputWidget.value);

    }


var doofinder_script ='//cdn.doofinder.com/media/js/doofinder-classic.7.latest.min.js';
(function(d,t){var f=d.createElement(t),s=d.getElementsByTagName(t)[0];f.async=1;
f.src=('https:'==location.protocol?'https:':'http:')+doofinder_script;
f.setAttribute('charset','utf-8');
s.parentNode.insertBefore(f,s)}(document,'script'));

var dfClassicLayers = [{
  "hashid": "###HASHID###",
  "zone": "eu1",
  "display": {
    "template": document.getElementById('df-layer-template').innerHTML,      
    "lang": "###LANG### ",
    "width": "80%",
    "align": "center"
  },
  "callbacks": {
    loaded: configureLayer
  },
  "queryInput": "input[name='qs']",
  "searchParams": {
     type: ['product']
  }
}];
</script>

Dabei zu beachten:

  • Die type:-Bezeichner in den eckigen Klammern müssen mit den Bezeichnern der zuvor angelegten Feeds übereinstimmen.
  • Unter rpp: kann die Anzahl der maximal angezeigten Ergebnisse angegeben werden. Für "{rpp: 4, type: ['categories']}" werden also später maximal vier gefundene Kategorien zum Suchbegriff angezeigt.
  • Die unteren Layer-Einstellungen können natürlich angepasst werden. Weitere dazu findest du hier


Möchtest du die Newsseiten anzeigen lassen, ersetze einen der Codeblöcke einfach durch den folgenden:

instance.layer.addController('news', {rpp: 4, type: ['news']});
instance.layer.newsController.registerWidget(instance.layer.queryInputWidget);
instance.layer.newsController.registerWidget(
new doofinder.core.widgets.Display('#df-aside__news__' + mainContainerId, {
        template: document.getElementById('df-news-tpl').innerHTML
        })
);
instance.layer.newsController.search(instance.layer.queryInputWidget.value);


3.2. Custom Template und CSS


Um das Standard Template zu verwenden, muss der folgende Code in die entsprechenden Textfelder kopiert werden.


Custom-Template:

<script type="text/x-mustache-template" id="df-layer-template">
 <div class="df-classic" id="{{ mainContainerId }}" hidden>
<div class="row df-content__wrapper">
   <div class="col-md-2 col-xs-2 df-side-panel">
       <div class="df-sidepanel__header">Ähnliche Suchen</div> 
       <div class=" df-column"  id="df-suggestions__{{ mainContainerId }}" data-role="suggestion-list" ></div>
<div class="df-sidepanel__header">Filtern</div> 
       <div class="df-layer__content">
          <div class="df-aside" data-role="aside">
             <div class="df-aside__content" id="df-aside__{{ mainContainerId }}"></div>
          </div>
      </div>
   </div>
<div class="col-md-10 col-xs-10 df-result__wrapper row">
      <div class="col-md-4 col-xs-4 df-column" id="df-aside__categories__{{ mainContainerId }}" data-role="aside"></div>
      <div class="col-md-4 col-xs-4 df-column" id="df-aside__brands__{{ mainContainerId }}" data-role="aside"></div>
      <div class="col-md-4 col-xs-4 df-column"  id="df-aside__links__{{ mainContainerId }}"></div>
      <div class="df-main col-md-12 col-xs-12">
          {{#showHeader}}
         <div class="df-header" id="df-header__{{ mainContainerId }}" data-role="header"></div>
          {{/showHeader}}
         <div class="df-results" id="df-results__{{ mainContainerId }}" data-role="result-list"></div>
</div>
   </div>
<a class="df-icon df-icon--close" href="#" data-role="close">
        <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
            <path d="M0 0h24v24H0z" fill="none"/>
        </svg>
</a>
 </div>
</div>
</script>

<script type="text/x-template" id="df-brands-tpl">
    {{#total}}
      <div class="df-pages">
        <div class="df-pages__header">Hersteller</div>
        <div class="df-pages__content">
          {{#results}}
          <a href="{{ link }}">{{ title }}</a>
          {{/results}}
        </div>
      </div>
    {{/total}}
  </script>

<script type="text/x-template" id="df-categories-tpl">
    {{#total}}
      <div class="df-pages">
        <div class="df-pages__header">Kategorien</div>
        <div class="df-pages__content">
          {{#results}}
          <a href="{{ link }}">{{ title }}</a>
          {{/results}}
        </div>
      </div>
    {{/total}}
  </script>

<script type="text/x-template" id="df-links-tpl">
    {{#total}}
      <div class="df-pages">
        <div class="df-pages__header">Eigene Seiten</div>
        <div class="df-pages__content">
          {{#results}}
          <a href="{{ link }}">{{ title }}</a>
          {{/results}}
        </div>
      </div>
    {{/total}}
  </script>

<script type="text/x-template" id="df-news-tpl">
    {{#total}}
      <div class="df-pages">
        <div class="df-pages__header">News</div>
        <div class="df-pages__content">
          {{#results}}
          <a href="{{ link }}">{{ title }}</a>
          {{/results}}
        </div>
      </div>
    {{/total}}
  </script>

Achtung: 

Um Suchvorschläge anzeigen zu lassen, müssen im Doofinder-Backend die "Suggestions" aktiviert sein. Möchtest Du diese Funktion nicht nutzen, entferne im Template die Zeilen 5 und 6. 


<div class="df-sidepanel__header">Ähnliche Suchen</div><div class=" df-column"  id="df-suggestions__{{ mainContainerId }}" data-role="suggestion-list" ></div>



Die Überschriften für die einzelnen Bereiche kannst Du in den vier kleinen unteren Templates anpassen.



CSS Anpassungen:

<style type='text/css'>
.df-layer__content {
   height: 70%;
}
.df-panel {}
.df-panel__title {}
.df-panel__content {}
.df-aside {
   width: 100% !important;
}
.df-aside__header {}
.df-aside__content {}
.df-main {
   border-top: 1px solid #CCC;
}
.df-slider {}
.df-header {}
.df-results {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: auto; 
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0;
    background-color: inherit;
}
.df-results__content {}
.df-results__dfclassic {}
.df-card {}
.df-card__main {}
.df-card__image {}
.df-card__content {}
.df-card__title {}
.df-card__description {}
.df-card__pricing {}
.df-card__price {}
.df-content__wrapper {
   height: 100%;
   margin-right: 0px;
}
.df-result__wrapper {
   height: 100%;
   overflow-y: scroll;
}
.df-side-panel {
   height: 100%;
   border-right: 1px solid #CCC;
   padding-right: 0px;
   margin-right: 15px;
   background-color: #fafafa;
}
.df-column {
   padding: 15px;
}
.df-suggestion {
   display: block !important;
}
.df-sidepanel__header {
   padding: 15px 15px 0;
   font-size: 18px;
   font-style: bold;
   display: block;
}
.df-row {
   height: 100%;
}
.df-pages {
  height: 100%;
}
.df-pages__header {
   font-size: 18px;
   font-style: bold;
   margin-bottom: 15px;
}
.df-pages__content a {
   display: block;
   font-size: 12px;
   text-decoration: none;
   padding: 8px 8px 8px 12px;
   margin-top: 8px;
}
.df-pages__content a:hover {
   background-color: #eee;
}
a.df-icon.df-icon--close {
   right: 20px;
}

</style>

Der CSS-Code kann natürlich nach eigenen Wünschen angepasst werden.


4. Einstellungen


Um das Layer-Script zu nutzen, müssen noch entsprechende Einstellungen im Plugin gesetzt werden.

  1. Layer-Modus auf Layer-Script
  2. Custom Template verwenden? auf Ja
  3. Custom CSS verwenden? auf Ja


Sind alle Feeds erstellt, die Code-Snippets eingefügt und die Einstellungen gespeichert, sollte das Suchfenster wie im oberen Bild angezeigt werden.