Anpassungen am Template sind dann sinnvoll, wenn du Daten hinzufügen oder wegnehmen möchtest.
Falls du nur das Design ändern möchtest, bist du im Feld CSS Anpassungen richtig.
INHALTSVERZEICHNIS
- 1. Custom Template verwenden: Ja
- 2. Layer Script um Zusatz erweitern:
- 3. Änderung im Template vornehmen
- 4. Beispiele:
Um Änderungen am Template vornehmen zu können, musst du folgende Einstellungen vornehmen:
1. Custom Template verwenden: Ja
2. Layer Script um Zusatz erweitern:
Das Layer Script muss um folgende Zusatz erweitert werden
Das sieht dann in etwa so aus:
"display": {
"results": {
"template": document.getElementById('df-results-template').innerHTML
}
}also oben im Layer Script in etwa folgende Anpassung vornehmen:
achte dabei auch auf die korrekte Komma Setzung!
3. Änderung im Template vornehmen
Anschließend auf speichern klicken
Weitere Infos zum doofinder Template:
https://www.doofinder.com/support/developer/layer/doofinder-classic-layer#template_1
4. Beispiele:
4.1 Artikelnummer einbinden
Nachfolgend wurde dann z.B. die Artikelnummer (bei doofinder "id) in das Template eingefügt und als Bestell-Nr. betitelt:
4.2 Grundpreis im Template anzeigen
Falls du Grundpreise im doofinder Layer anzeigen möchtest, ist das kein Problem.
Wir übergeben deinen Grundpreis bereits standardmäßig.
Du findest die Grundpreise in deinem Produkt Feed.
Nachsehen kannst du das einfach im Doofinder Backend unter "Boosting". Dort findest du ja immer alle Daten, die in deinem Index liegen.
Der erste Preis ist der Brutto Preis, der zweite der Netto Preis.
Um den Grundpreis nun im Layer einzufügen, musst du eine Anpassung im Layer Template machen
In unserem Fall fügst du folgendes im Layer Template ein:
{{&base_price_localized.0}} für den Brutto Preis, oder
{{&base_price_localized.1}} für den Netto Preis
Am besten an die Stelle, wo du den Grundpreis haben möchtest.
Sieht dann z.B. am Ende so aus:
Layer Script:
<script>
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 = [{
"queryInput": "input[name='qs']",
"hashid": "###HASHID###",
"zone": "eu1",
"display": {
"lang": "###LANG###",
"width": "90%",
"dtop": 10,
"align": "center",
"results": {
template: document.getElementById('df-results-template').innerHTML
}
},
"searchParams": {
transformer: null
},
"historyPlugin": true
}];
</script>Wir haben die entscheidenden Stellen im Script gelb markiert:
Custom Template:
Im Layer sieht das dann ungefähr so aus:
4.3 Lagerhinweis im Layer anzeigen
Um einen Lagerhinweis im Layer anzuzeigen, benötigst du wieder das Custom-Template.
<div class="df-card__stock">{{#translate}}{{availability}}{{/translate}}</div>Füge an der Stelle, an der du den Hinweis haben möchtest folgenden Tag ein:<div class="df-card__stock">{{#translate}}{{availability}}{{/translate}}</div>Füge ebenso, im Custom Template Textfeld, vor oder nach dem "<script>"-Tag folgenden Code ein:
<div style="display: none;" id="stockstatus">
<div class="instock">
<div class="delivery-status">
<span class="status status-2"><i class="fa fa-truck"></i> auf Lager</span>
</div>
</div>
<div class="outstock">
<div class="delivery-status">
<span class="status status-0"><i class="fa fa-truck"></i> ausverkauft</span>
</div>
</div>
</div>Im LayerScript erweiterst du in das "display" - Object mit den Übersetzungs IDs, zusammen mit dem Custom Template sollte das dann ungefähr so aussehen:
// ...
var dfClassicLayers = [{
"queryInput": "input[name='qs']",
"hashid": "###HASHID###",
"zone": "eu1",
"display": {
"translations": {
"in stock": document.querySelector("#stockstatus .instock").innerHTML,
"out of stock": document.querySelector("#stockstatus .outstock").innerHTML,
},
"results": {
"template": document.getElementById('df-results-template').innerHTML,
},
},
}];
// ...4.4 Suchbegriff hervorheben/ highlighten
Um den Suchausdruck in den Suchergebnissen hervorzuheben, musst du vorab deine Custom Templates aktivieren.
Setze die entsprechenden Einstellungen im Plugin:
- Layer-Modus auf Layer-Script
- Custom Template verwenden? auf Ja
- Custom CSS verwenden? auf Ja
Funktion, die in das Layer Script eingefügt werden muss:
Diese holt sich den Suchausdruck und fügt diesem eine Klasse hinzu. Im Folgendem wird lediglich der Suchbegriff im Titel ausgetauscht. Dieser Abschnitt muss ebenfalls im Layer Script eingefügt werden.
var changeTitle = function (result) {
var dsq = document.getElementsByClassName('ac_input')[1];
var msq = document.getElementById('df-mobile__searchbox__dfclassic');
var sq = '';
if(dsq !== null){
sq = dsq.value.trim()
}
if(sq === '' && msq !== null){
sq = msq.value.trim()
}
if (sq !== "") {
var val = "<span class=\"highlighted\">$1<\/span>";
var regex = new RegExp('(' + sq.toLowerCase() + ')', 'ig');
result.title = result.title.replace(regex, val);
return result;
} else {
return result;
}
};Aufruf dieser Funktion in deinem Layer Script:
Füge hierfür deinem Layer (idR. dfClassicLayers) ein callback hinzu, welcher die Funktion aufruft.
Siehe auch (https://www.doofinder.com/support/developer/layer/doofinder-classic-layer#how-to-modify-the-search-response )
callback:
callbacks: {
loaded: function (instance) {
instance.layer.controller.processors.push(function (response) {
response.results = response.results.map(changeTitle);
return response;
});
}
}, So könnte ein fertiges Layer Script aussehen (ausgehend von einem unangepassten aus dem doofinder Backend, welches du von dort kopiert hast:
<script>
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'));
//Funktion zum highlighten
var changeTitle = function (result) {
var dsq = document.getElementsByClassName('ac_input')[0];
var msq = document.getElementById('df-mobile__searchbox__dfclassic');
var sq = '';
if(dsq !== null){
sq = dsq.value.trim()
}
if(sq === '' && msq !== null){
sq = msq.value.trim()
}
if (sq !== "") {
var val = "<span class=\"highlighted\">$1<\/span>";
var regex = new RegExp('(' + sq.toLowerCase() + ')', 'ig');
result.title = result.title.replace(regex, val);
return result;
} else {
return result;
}
};
var dfClassicLayers = [{
"hashid": "###HASHID###",
"zone": "eu1",
callbacks: {
loaded: function (instance) {
instance.layer.controller.processors.push(function (response) {
response.results = response.results.map(changeTitle);
return response;
});
}
},
"mobile": {
"display": {
"results": {
"template": document.getElementById('df-results-template').innerHTML,
},
},
},
"display": {
"lang": "###LANG###",
"width": "95%",
"align": "center",
"results": {
"template": document.getElementById('df-results-template').innerHTML
}
},
"queryInput": "input[name='qs']"
}];
</script>Anpasssung im Result Template:
Im Custom Template noch vor die Felder, welche den Suchbegriff enthalten können ein &-Zeichen anfügen, damit hier das hinzugefügte HTML erkannt wird.
Auszug aus dem Custom Template, in welchem der Titel angepasst wurde
<div class='df-card__title'>{{&title}}</div>CSS Anpassung:
Jetzt kannst du noch per CSS das Aussehen des Highlighting steuern.
Dann in den Einstellungen noch Custom Template aktivieren, ggfs. auch mobil und in der CSS Datein die Klassen .highlighted anlegen.
Bsp.:
.highlighted {
color: yellow;
font-weight: bold;
}4.5 Warenkorb im Layer anzeigen
Du möchtest deinen Kunden die Möglichkeit bieten die Produkte aus dem Such Layer gleich in den Warenkorb zu legen?
Dann haben wir folgenden Ansatz für dich:
Du fügst einen neuen DIV Container in deinem Template ein, in welchem der Warenkorb Button ausgegeben wird.
Dazu fügst du im Result Template folgenden Part hinzu:
<div class='df-card__extra'>
<form data-searchbasket="true" style="display: block" method="post" autocomplete="off" action="index.php">
<input type="hidden" name="a" value="{{kArtikel}}"/>
<input type="hidden" name="wke" value="1"/>
<input type="hidden" name="overview" value="1"/>
<input class="form-control text-right input-sm count" name="anzahl" placeholder="1" value="1" type="number" min="1" required="" style="display: inline-block;width: 48%;"/>
<button type="submit" class="btn btn-primary btn-sm qbtn" title="In den Warenkorb"><span><i class="fa fa-shopping-cart"></i></span></button>
</form>
</div>Ein fertiges Template könnte in etwa so aussehen:
<script type='text/x-mustache-template' id='df-results-template'>
{{#is_first}}
{{#banner}}
<div class='df-banner'>
<a {{#blank}}target='_blank' rel='noopener noreferer' {{/blank}} href='{{link}}' data-role='banner'
data-banner='{{id}}'>
<img src='{{#remove-protocol}}{{image}}{{/remove-protocol}}'>
</a>
</div>
{{/banner}}
{{/is_first}}
{{#total}}
{{#results}}
<div class='df-card' data-role='result'>
<a class='df-card__main' href='{{#url-params}}{{{link}}}{{/url-params}}' data-role='result-link'
data-dfid='{{dfid}}'>
{{#image_link}}
<figure class='df-card__image'>
<img src='{{#remove-protocol}}{{image_link}}{{/remove-protocol}}' alt='{{title}}'>
</figure>
{{/image_link}}
<div class='df-card__content'>
<div class='df-card__title'>{{title}}</div>
<div class='df-card__description'>{{{description}}}</div>
{{#price}}
<div class='df-card__pricing'>
<span class='df-card__price {{#sale_price}}df-card__price--old{{/sale_price}}'>{{#format-currency}}{{price}}{{/format-currency}}</span>
{{#sale_price}}
<span class='df-card__price df-card__price--new'>{{#format-currency}}{{sale_price}}{{/format-currency}}</span>
{{/sale_price}}
<div>
<small>{{&base_price_localized.0}}</small>
</div>
{{#netto}}
<div>
<small>exkl. {{ust}}% Ust.</small>
</div>
{{/netto}}
</div>
{{/price}}
{{#df_rating}}
<div>
<div class='df-rating' title='{{df_rating}}'>
<div class='df-rating__value'
style='width: {{#rating-percent}}{{df_rating}}{{/rating-percent}}'>
<i>★</i><i>★</i><i>★</i><i>★</i><i>★</i>
</div>
<div class="df-rating__placeholder">
<i>★</i><i>★</i><i>★</i><i>★</i><i>★</i>
</div>
</div>
</div>
{{/df_rating}}
</div>
</a>
<div class='df-card__extra'>
<form data-searchbasket="true" style="display: block" method="post" autocomplete="off" action="index.php">
<input type="hidden" name="a" value="{{kArtikel}}"/>
<input type="hidden" name="wke" value="1"/>
<input type="hidden" name="overview" value="1"/>
<input class="form-control text-right input-sm count" name="anzahl" placeholder="1" value="1"
type="number" min="1" required="" style="display: inline-block;width: 48%;"/>
<button type="submit" class="btn btn-primary btn-sm qbtn" title="In den Warenkorb">
<span><i class="fa fa-shopping-cart"></i></span>
</button>
</form>
</div>
</div>
{{/results}}
{{/total}}
{{^total}}
{{#noResultsHTML}}{{{noResultsHTML}}}{{/noResultsHTML}}
{{^noResultsHTML}}
<p class='df-no-results'>{{#translate}}Sorry, no results found.{{/translate}}</p>
{{/noResultsHTML}}
{{/total}}
</script>Tags: