Search
Fügen Sie leistungsstarke Suchfunktionen zu Ihrem Mystore-Webshop hinzu. Clerk.io bietet drei verschiedene Suchlösungen, die zusammen oder einzeln genutzt werden können: ein Instant Search Dropdown, eine Search Page mit Faceted Search Filtern und ein Omnisearch Overlay, das beide kombiniert.
Allgemein #
Um Search Funktionen zu aktivieren und einzubetten, nutzen Sie Ihren Theme- oder CMS-Editor und platzieren Sie die bereitgestellten Embed Codes.
Um Synchronisierungsdetails hinzuzufügen oder eine Synchronisierung zu starten, gehen Sie zu my.clerk.io > Data > Configuration.
Instant search #
Instant Search liefert Echtzeitergebnisse, während Kunden tippen, angezeigt in einem Dropdown unter dem Sucheingabefeld.
Design erstellen #
Sie können entweder den Design Editor für die visuelle Konfiguration nutzen oder Code Designs verwenden.
Design Editor #
Gehen Sie zu Search > Designs und klicken Sie auf New Design.
Wählen Sie Other designs > Instant Search.
Wählen Sie aus der Liste der Designvorlagen, mit welcher Sie starten möchten.
Geben Sie einen Namen an und klicken Sie auf Create design.
Nehmen Sie alle gewünschten Änderungen am Design vor.
Code Design #
Gehen Sie zu Search > Designs und klicken Sie auf New Design.
Wählen Sie Other designs > Blank > With code.
Geben Sie einen Namen an und klicken Sie auf Save.
Erstellen Sie ein Code Design von Grund auf mit Liquid code.
Wenn Sie ein Startdesign möchten, sehen Sie sich weiter unten die Instant Search Vorlage an.
Element erstellen #
Dies enthält alle Einstellungen, die benötigt werden, um das Instant Search Dropdown anzuzeigen und auf Ihrer Website einbettbar zu machen.
Gehen Sie zu Search > Elements.
Klicken Sie auf New Element.
Nennen Sie es “Live Search”.
Wählen Sie unter Element type aus dem Dropdown Live-search.
Wählen Sie unter Design aus dem Dropdown das von Ihnen erstellte Design.
Klicken Sie oben auf der Seite auf Save.
Zur Website hinzufügen #
Fügen Sie den folgenden Embed Code am Ende Ihres Layouts oder in Ihrem Header/Footer-Include ein. Ersetzen Sie INSERT_CSS_SELECTOR durch die ID oder Klasse Ihres Suchfeldes (z.B. #search).
<span class="clerk"
data-template="@live-search"
data-instant-search="INSERT_CSS_SELECTOR"
data-instant-search-positioning="left"
data-instant-search-categories="6"
data-instant-search-pages="6"
data-instant-search-suggestions="6">
</span>
Search page #
Die Search Page bietet ein vollwertiges Sucherlebnis mit erweiterten Filtermöglichkeiten.
Design erstellen #
Sie können entweder den Design Editor für die visuelle Konfiguration nutzen oder Code Designs verwenden.
Design Editor #
Gehen Sie zu Search > Designs und klicken Sie auf New Design.
Wählen Sie Other designs > Search Page.
Wählen Sie aus der Liste der Designvorlagen, mit welcher Sie starten möchten.
Geben Sie einen Namen an und klicken Sie auf Create design.
Nehmen Sie alle gewünschten Änderungen am Design vor.
Code Design #
Gehen Sie zu Search > Designs und klicken Sie auf New Design.
Wählen Sie Other designs > Blank > With code.
Geben Sie einen Namen an und klicken Sie auf Save.
Erstellen Sie ein Code Design von Grund auf mit Liquid code.
Wenn Sie ein Startdesign möchten, sehen Sie sich weiter unten die Search Page Vorlage an.
Element erstellen #
Dies enthält alle Einstellungen, die benötigt werden, um die Search Page anzuzeigen und auf Ihrer Website einzubetten.
Gehen Sie zu Search > Elements.
Klicken Sie auf New Element.
Nennen Sie es “Search Page”.
Wählen Sie unter Element type aus dem Dropdown Search page.
Wählen Sie unter Design das von Ihnen erstellte Design aus dem Dropdown.
Klicken Sie oben auf der Seite auf Save.
Zur Website hinzufügen #
Platzieren Sie den Embed Code auf Ihrer Search Results Seite. Stellen Sie sicher, dass data-query auf die Such-Query-Variable Ihrer Plattform verweist. Beispiel (bei Bedarf mit der Variable Ihrer Plattform ersetzen):
<span
id="clerk-search"
class="clerk"
data-template="@search-page"
data-target="#clerk-search-results"
data-query="{{ forms.search.query }}"
data-facets-attributes='["price","categories","vendor"]'
data-facets-titles='{"price":"Price","categories":"Categories","vendor":"Brand"}'
data-facets-target="#clerk-search-filters"
data-facets-in-url="false">
</span>
Omnisearch #
Die Omnisearch kombiniert Instant Search und Search Page in einem einzigen Overlay, das geöffnet wird, wenn der Nutzer das Suchfeld fokussiert.
Design erstellen #
Omnisearch verwendet ein Code Design.
Gehen Sie zu Search > Designs und klicken Sie auf New Design.
Wählen Sie Omni-search.
Wählen Sie eine Vorlage aus, benennen Sie sie und klicken Sie auf Save.
Passen Sie das Design nach Bedarf an. Siehe die Omnisearch Anleitung für weitere Details.
Element erstellen #
Gehen Sie zu Search > Elements.
Klicken Sie auf New Element.
Nennen Sie es “Omni-Search”.
Wählen Sie unter Element type Omni-search aus.
Wählen Sie unter Design Ihr Omnisearch Design.
Klicken Sie auf Save.
Zur Website hinzufügen #
Sie können Omnisearch mittels Injection oder Embedded Code einfügen.
Wenn Sie Embedded Code verwenden, geben Sie mit data-trigger-element einen CSS-Selektor für das Suchfeld an.
Beispiel Embed Code:
<span class="clerk"
data-template="@omni-search"
data-api="search/omni"
data-trigger-element="#search">
</span>
Startvorlagen #
Wenn Sie Code Designs verwenden möchten, können Ihnen diese Vorlagen den Einstieg erleichtern. Sie enthalten die grundlegenden UI-Elemente für Instant Search und Search Page, die Sie anschließend an Ihre Bedürfnisse anpassen können.
Instant search code #
Dies beinhaltet die HTML- und CSS-Anteile zur Anzeige eines Instant Search Dropdowns. Fügen Sie diese in ein Code Design in my.clerk.io ein.
HTML #
<div class="clerk-instant-search">
{% if hits.length == 0 %}
<div class="clerk-instant-search-no-results">
Nothing matched: <b>{{ query }}</b>... try a simpler search!
</div>
{% endif %}
{% if content.query != response.query %}
<div class="clerk-instant-search-alternate-query">
<i class="fas fa-search clerk-icon" aria-hidden="true"></i> Showing results for: <b>{{ query }}</b>
</div>
{% endif %}
<div class="clerk-instant-search-grid">
{% if products.length > 0 %}
<div class="clerk-instant-search-col clerk-col-1">
<div class="clerk-instant-search-products">
<div class="clerk-instant-search-title">Products</div>
{% for product in products %}
<a href="{{ product.url }}">
<div class="clerk-instant-search-product clerk-instant-search-key-selectable">
<div class="clerk-instant-search-product-image" style="background-image: url('{{ product.image }}');"></div>
<div>
<div class="clerk-instant-search-product-name">{{ product.name | highlight query }}</div>
{% if product.price < product.list_price %}
<div class="clerk-instant-search-product-list-price">{{ product.list_price | money }}</div>
{% endif %}
<div class="clerk-instant-search-product-price">{{ product.price | money }}</div>
</div>
<div>
<div class="clerk-instant-search-product-button">Buy Now</div>
</div>
</div>
</a>
{% endfor %}
{% if hits > products.length %}
<div class="clerk-desktop-button clerk-instant-search-more-results clerk-instant-search-key-selectable">
<a class="clerk-view-more-results-button" href="/search?q={{ query }}">
<u>See <b>{{ hits }}</b> more results for "<i>{{ query }}</i>"</u>
</a>
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if (suggestions.length + categories.length + pages.length) > 0 %}
<div class="clerk-instant-search-col clerk-col-2">
{% if suggestions.length > 1 %}
<div class="clerk-instant-search-suggestions">
<div class="clerk-instant-search-title">Search Suggestions</div>
{% for suggestion in suggestions %}
{% if suggestion != query %}
<div class="clerk-instant-search-suggestion clerk-instant-search-key-selectable">
<a href="/search?q={{ suggestion highlight query 'bold' true }}">
<i class="fas fa-search clerk-icon" aria-hidden="true"></i>{{ suggestion }}
</a>
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
{% if categories.length > 0 %}
<div class="clerk-instant-search-categories">
<div class="clerk-instant-search-title">Categories</div>
{% for category in categories %}
<div class="clerk-instant-search-category clerk-instant-search-key-selectable">
<a href="{{ category.url }}">
{{ category.name | highlight query }}
</a>
</div>
{% endfor %}
</div>
{% endif %}
{% if pages.length > 0 %}
<div class="clerk-instant-search-pages">
<div class="clerk-instant-search-title">Related Content</div>
{% for page in pages %}
<div class="clerk-instant-search-category clerk-instant-search-key-selectable">
<a href="{{ page.url }}">
<div class="name">{{ page.title | highlight query 'bold' true }}</div>
</a>
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% endif %}
{% if hits > products.length %}
<div class="clerk-mobile-button clerk-instant-search-more-results clerk-instant-search-key-selectable">
<a href="/search?q={{ query }}">
See <b>{{ hits }}</b> more results for "<i>{{ query }}</i>"
</a>
</div>
{% endif %}
</div>
</div>
CSS #
.clerk-instant-search { padding: 20px; }
.clerk-instant-search-container a { color: black !important; text-decoration: none !important; }
.clerk-instant-search-container a:hover { color: #b6c254 !important; }
.clerk-instant-search { overflow: hidden; width: 100%; min-width: 650px; max-width: 1000px; margin: .2em auto; background-color: white; border: 1px solid #eee; border-top: 0px; border-radius: 5px 5px 10px 10px; box-shadow: 0 1em 2em 1em rgba(0,0,0,.2); }
.clerk-instant-search-no-results { padding: 1em; font-style: italic; text-align: center; }
.clerk-instant-search-alternate-query { margin: 0 0 5px 0; }
.clerk-instant-search-more-results { padding: 1em; font-size: 1.2em; text-align: center; }
.clerk-instant-search-title { color: #b6c254; margin: 20px 0 5px; padding: 0 0 10px; text-transform: uppercase; font-size: 1em; border-bottom: 1px solid #000; }
.clerk-instant-search-products { padding-right: 2em; }
.clerk-instant-search-product { display: flex; padding: .2em; color: gray; }
.clerk-instant-search-product:hover { background-color: rgba(46, 204, 113, .1); }
.clerk-instant-search-product:hover .clerk-instant-search-product-button { transform: scale(1.05); }
.clerk-instant-search-product > * { flex: 1 1 auto; }
.clerk-instant-search-product > *:first-child, .clerk-instant-search-product > *:last-child { flex: 0 0 auto; }
.clerk-instant-search-product-image { display: inline-block; width: 3em; height: 3em; margin-right: 1em; background-position: center center; background-repeat: no-repeat; background-size: contain; }
.clerk-instant-search-product-name { overflow: hidden; height: 1.2em; margin-bottom: .2em; }
.clerk-instant-search-product-list-price { display: inline-block; margin-right: .5em; opacity: .8; font-weight: normal; text-decoration: line-through; color: gray; }
.clerk-instant-search-product-price { display: inline-block; font-weight: bold; }
.clerk-icon { color: lightgray; margin-right: .5em; }
.clerk-instant-search-suggestions { margin-bottom: 1em; }
.clerk-instant-search-suggestion { padding: .1em; }
.clerk-instant-search-categories { margin-bottom: 1em; }
.clerk-instant-search-category { padding: 5px; margin: 5px; width: auto; display: inline-block; border: 1px solid black; border-radius: 2px; }
.clerk-instant-search-pages { margin-bottom: 1em; }
.clerk-instant-search-page { padding: .1em; }
@media screen and (min-width: 1200px) { .clerk-instant-search-container { width: 50%; } .clerk-instant-search-grid { display: flex; } .clerk-col-1 { flex: 2; } .clerk-col-2 { flex: 1; } .clerk-mobile-button { display: none; } }
@media screen and (min-width: 768px) and (max-width: 1200px){ .clerk-instant-search-container { right: 0 !important; left: 0 !important; } .clerk-mobile-button { display: none; } }
@media screen and (max-width: 767px) { .clerk-instant-search-container { right: 0 !important; } .clerk-desktop-button { display: none; } }
@media screen and (min-width: 376px) and (max-width: 800px) { .clerk-instant-search { min-width: 0 !important; } }
@media screen and (max-width: 375px) { .clerk-instant-search { min-width: 200px !important; } .clerk-instant-search-col { margin: 0 0 20px 0; } .clerk-instant-search-product-name { height: 3em !important; } }
Search page code #
Dies beinhaltet die HTML- und CSS-Anteile zur Anzeige einer Search Page. Fügen Sie diese in ein Code Design in my.clerk.io ein.
HTML #
<div class="clerk-search-result">
<div class="clerk-search-result-headline">{{ headline }}</div>
<div class="clerk-grid">
{% for product in products %}
<div class="clerk-grid-item">
<div class="clerk-grid-product">
<a href="{{ product.url }}">
{% if product.price < product.list_price %}
<div class="clerk-grid-badge">On Sale</div>
{% endif %}
<div class="clerk-grid-image" style="background-image: url('{{ product.image }}');"></div>
<div class="clerk-grid-brand">{{ product.brand }}</div>
<div class="clerk-grid-name">{{ product.name }}</div>
<div class="clerk-grid-pricing">
{% if product.price < product.retail_price %}
<div class="clerk-grid-list-price">£{{ product.retail_price | money }}</div>
{% endif %}
<div class="clerk-grid-price">£{{ product.price | money }}</div>
</div>
</a>
{% if product.stock == 1 %}
<a class="clerk-not-in-stock" href="{{ product.url }}" data-event-type="product-click">
<div class="clerk-grid-button-not-in-stock">Out of Stock</div>
</a>
{% else %}
<a class="clerk-add-to-cart" href="/cart.php?action=add&product_id={{ product.id }}" data-event-type="product-click">
<div class="clerk-grid-button">Add to Cart</div>
</a>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% if count > products.length %}
<div class="clerk-load-more-button" onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">Show More Results</div>
{% endif %}
</div>
CSS #
#clerk-search-results { margin: 0; }
.clerk-search-result { margin: 1em 0; }
.clerk-search-result-headline { font-weight: bold; font-size: 2em; text-align: center; }
.clerk-grid { display: flex; flex-flow: row wrap; }
.clerk-grid-item { margin: auto; }
.clerk-grid-product { position: relative; overflow: hidden; margin: 1em; padding: 1em; background-color: white; border: 1px solid #eee; border-radius: 1em; box-shadow: 0 .1em .2em 0 rgba(0,0,0,.08); text-align: center; }
.clerk-grid-badge { position: absolute; top: 5px; right: -35px; display: inline-block; width: 120px; margin: 10px auto; padding: 5px 0; border-radius: 3px; background-color: #fbc531; font-size: 10px; color: white; text-align: center; letter-spacing: 1px; transform: rotate(45deg); }
.clerk-grid-tags { position: absolute; top: .8em; left: .8em; }
.clerk-grid-tag { display: inline-block; padding: .2em .8em; border-radius: .3em; background-color: gray; font-size: 10px; color: white; letter-spacing: 1px; }
.clerk-grid-image { width: 100%; height: 8em; margin-bottom: 1em; background-position: center center; background-repeat: no-repeat; background-size: contain; }
.clerk-grid-brand { font-size: 0.9em; color: #757575; }
.clerk-grid-name { height: 3em; overflow: hidden; color: #4a3b40; font-weight:bold; font-size: 15px; margin-bottom: 1em; }
.clerk-grid-pricing { display: flex; margin-bottom: 1em; }
.clerk-grid-price { flex: 1; color: #757575; font-weight: bold; }
.clerk-grid-list-price { flex: 1; opacity: .8; font-weight: normal; text-decoration: line-through; color: gray; }
.clerk-add-to-cart, .clerk-add-to-cart:hover { color: white; }
.clerk-not-in-stock, .clerk-not-in-stock:hover { color: #4a3b40; }
.clerk-grid-button-not-in-stock { display: block; margin: 0 auto; padding: .6em 2em; border: none; border-radius: .5em; background-color: white; color: #4a3b40; text-transform: uppercase; text-align: center; white-space: nowrap; font-weight: bold; cursor: pointer; }
.clerk-grid-button { display: block; margin: 0 auto; padding: .6em 2em; border: none; border-radius: .5em; background-color: #b6c254; color: white; text-transform: uppercase; text-align: center; white-space: nowrap; font-weight: bold; cursor: pointer; }
.clerk-load-more-button { display: block; width: 20em; margin: 1em auto; padding: .6em 2em; border: none; border-radius: .5em; background-color: #b6c254; color: white; text-transform: uppercase; text-align: center; white-space: nowrap; font-weight: bold; font-size: 1.2em; cursor: pointer; }
@media screen and (min-width: 1025px) { .clerk-grid-item { flex: 0 0 25%; margin: auto; } }
@media screen and (min-width: 500px) and (max-width: 1024px) { .clerk-grid-item { flex: 0 0 33%; margin: auto; } }
@media screen and (max-width: 499px) { .clerk-grid-item { flex: 0 0 100%; margin: auto; } }
Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.