Shopify
Search
Clerk.io bietet drei verschiedene Suchlösungen, die zusammen oder separat verwendet werden können:
- Ein Sofortige Suche Dropdown.
- Eine Suchseite mit facettierten Suchfiltern.
- Eine Omnisearch Überlagerung, die beides kombiniert.
Dieser Artikel erklärt, wie man mit einer Clerk.js-Installation in Shopify beginnt.
Sofortige Suche #
Design erstellen #
Sie können entweder den Design-Editor verwenden, um es visuell zu konfigurieren, oder Code-Designs verwenden.
Design-Editor #
- Gehen Sie zu Search > Designs und klicken Sie auf Neues Design.
- Wählen Sie Andere Designs > Sofortige Suche.
- Wählen Sie aus der Liste der Designvorlagen, mit welcher Sie beginnen möchten.
- Geben Sie ihm einen Namen und klicken Sie auf Design erstellen.
- Nehmen Sie alle gewünschten Änderungen am Design vor.
Code-Design #
- Gehen Sie zu Search > Designs und klicken Sie auf Neues Design.
- Wählen Sie Andere Designs > Leer > Mit Code.
- Geben Sie ihm einen Namen und klicken Sie auf Speichern.
- Erstellen Sie ein Code-Design von Grund auf mit Liquid-Code.
Wenn Sie ein Startdesign möchten, überprüfen Sie die Sofortige Suchvorlage weiter unten.
Inhalt erstellen #
Dies enthält alle Einstellungen, die verwendet werden, um das Sofortige Suchdropdown anzuzeigen und es in Ihre Website einbettbar zu machen.
- Gehen Sie zu Search > Content.
- Klicken Sie auf Neuer Inhalt.
- Nennen Sie es “Live-Suche”.
- Wählen Sie in Inhaltstyp Live-Suche aus dem Dropdown-Menü aus.
- Wählen Sie in Design das Design aus, das Sie aus dem Dropdown-Menü erstellt haben.
- Klicken Sie oben auf dem Bildschirm auf Speichern.
Zur Website hinzufügen #
- Öffnen Sie die Registerkarte In die Website einfügen in den Inhaltseinstellungen.
- Hier haben Sie zwei Optionen:
- Die Verwendung von Injection ermöglicht es Ihnen, den Code mit einem CSS-Selektor einzufügen.
- Die Verwendung von eingebettetem Code ermöglicht es Ihnen, den Code manuell in Ihre Website einzufügen.
- Wählen Sie die Option, die für Sie am einfachsten zu verwenden ist.
- Ersetzen Sie für den eingebetteten Code
INSERT_SEARCH_INPUT_CSS_SELECTOR_HEREdurch eine eindeutige Klasse oder ID für Ihr Suchfeld. Dadurch wird die Sofortige Suche darauf abzielen und Ergebnisse anzeigen, während der Benutzer tippt. - Fügen Sie den Code in die Haupt-Theme-Datei von Shopify ein. Dies ist fast immer die Datei, die Sie in Online Store > Themes > "..." > Code bearbeiten > Layout > theme.liquid finden.
Hier ist ein vollständiges Beispiel für den Embed-Code der Sofortigen Suche, einschließlich des CSS-Selectors, der am häufigsten in Shopify verwendet wird:
<span class="clerk"
data-template="@live-search"
data-instant-search=".search-form__input"
data-instant-search-suggestions="6"
data-instant-search-categories="6"
data-instant-search-pages="6"
data-instant-search-positioning="right">
</span>
Suchseite #
Design erstellen #
Sie können entweder den Design-Editor verwenden, um es visuell zu konfigurieren, oder Code-Designs verwenden.
Design-Editor #
- Gehen Sie zu Search > Designs und klicken Sie auf Neues Design.
- Wählen Sie Andere Designs > Suchseite.
- Wählen Sie aus der Liste der Designvorlagen, mit welcher Sie beginnen möchten.
- Geben Sie ihm einen Namen und klicken Sie auf Design erstellen.
- Nehmen Sie alle gewünschten Änderungen am Design vor.
Code-Design #
- Gehen Sie zu Search > Designs und klicken Sie auf Neues Design.
- Wählen Sie Andere Designs > Leer > Mit Code.
- Geben Sie ihm einen Namen und klicken Sie auf Speichern.
- Erstellen Sie ein Code-Design von Grund auf mit Liquid-Code.
Wenn Sie ein Startdesign möchten, überprüfen Sie die Suchseitenvorlage weiter unten.
Inhalt erstellen #
Dies enthält alle Einstellungen, die verwendet werden, um die Suchseite anzuzeigen und sie in Ihre bestehende Suchseite einbettbar zu machen.
- Gehen Sie zu Search > Content.
- Klicken Sie auf Neuer Inhalt.
- Nennen Sie es “Suchseite”.
- Wählen Sie in Inhaltstyp Suchseite aus dem Dropdown-Menü aus.
- Wählen Sie in Design das Design aus, das Sie aus dem Dropdown-Menü erstellt haben.
- Klicken Sie oben auf dem Bildschirm auf Speichern.
Zur Website hinzufügen #
- Öffnen Sie die Registerkarte In die Website einfügen in den Inhaltseinstellungen.
- Hier haben Sie zwei Optionen:
- Die Verwendung von Injection ermöglicht es Ihnen, den Code mit einem CSS-Selektor einzufügen.
- Die Verwendung von eingebettetem Code ermöglicht es Ihnen, den Code manuell in Ihre Website einzufügen.
- Wählen Sie die Option, die für Sie am einfachsten zu verwenden ist.
- Fügen Sie den Code in die Shopify-Vorlage ein, die Ihre bestehende Suchseite generiert. Dies ist normalerweise die Datei, die Sie in Online Store > Themes > "..." > Code bearbeiten > Layout > main-search.liquid finden.
- Deaktivieren Sie alle bestehenden Suchfunktionen, indem Sie sie in einen Kommentar-Tag einfügen. Dadurch bleibt der Code intakt, wird jedoch nicht im Frontend angezeigt. Die Syntax ist wie folgt:
{% comment %}
Vorhandener Suchcode
{% endcomment %}
- Kopieren Sie den Embed-Code der Suchseite und fügen Sie ihn über dem
{% comment %}-Tag ein. - Fügen Sie den Abfrage-Tag von Shopify
{{ search.terms }}imdata-query-Attribut hinzu. - Klicken Sie oben auf dem Bildschirm auf Speichern.
Hier ist ein vollständiges Beispiel für den Embed-Code der Suchseite, einschließlich CSS zum Anzeigen und Ausblenden von Facetten auf mobilen Geräten:
<div class="page-width clerk-page-width">
<span
id="clerk-search"
class="clerk"
data-template="@search-page"
data-target="#clerk-search-results"
data-query="{{ search.terms }}"
data-facets-attributes='["price","categories","vendor"]'
data-facets-titles='{"price":"Preis","categories":"Kategorien","vendor":"Marke"}'
data-facets-target="#clerk-search-filters"
data-facets-price-prepend="€"
data-facets-in-url="false"
data-facets-view-more-text="Mehr anzeigen"
data-facets-searchbox-text="Suche nach ">
</span>
<div id="clerk-show-facets" onclick="toggleFacets()">Filter</div>
<div class="clerk_flex_wrap">
<div id="clerk-facets-container">
<div id="clerk-search-filters"></div>
</div>
<div id="clerk-search-results"></div>
</div>
<script>
function toggleFacets(){
el = document.getElementById('clerk-facets-container');
el.classList.toggle('active');
}
</script>
<style>
#clerk-show-facets {
width: 70%;
height: 40px;
margin: 20px auto;
background-color: #333;
color: white;
text-align: center;
border-radius: 2px;
line-height: 40px;
cursor: pointer;
}
.clerk-page-width {
display: flow-root;
}
#clerk-search-results {
width: 80%;
}
#clerk-show-facets {
display: none;
}
.clerk_flex_wrap {
display: flex;
flex-direction: row;
}
.active {
display: block !important;
}
@media only screen and (max-width : 800px) {
#clerk-search-filters {
width: 100% !important;
}
#clerk-facets-container {
display: none;
}
#clerk-show-facets {
display: block;
}
.clerk_flex_wrap {
flex-direction: column;
}
#clerk-search-results {
display: block;
width: 100%;
}
}
</style>
</div>
Omnisearch #
Design erstellen #
Omnisearch funktioniert nur mit Code-Designs, da es ein komplexeres Layout hat, das auf jede gewünschte Weise modifiziert werden kann.
- Gehen Sie zu Search > Designs und klicken Sie auf Neues Design.
- Wählen Sie Omni-Suche.
- Wählen Sie aus der Liste der Designvorlagen, mit welcher Sie beginnen möchten.
- Geben Sie ihm einen Namen und klicken Sie auf Speichern.
- Nehmen Sie alle gewünschten Anpassungen am Design vor. Der Omnisearch-Leitfaden enthält weitere Informationen dazu, wie Sie dies tun können.
Inhalt erstellen #
Dies enthält alle Einstellungen, die verwendet werden, um die Omnisearch anzuzeigen und sie in Ihre Website einbettbar zu machen.
- Gehen Sie zu Search > Content.
- Klicken Sie auf Neuer Inhalt.
- Nennen Sie es “Omni-Suche”.
- Fügen Sie ein Tracking-Label hinzu - dies sollte ebenfalls einfach “Omni-Suche” sein.
- Wählen Sie in Inhaltstyp Omni-Suche aus dem Dropdown-Menü aus.
- Wählen Sie in Design das Design aus, das Sie aus dem Dropdown-Menü erstellt haben.
- Klicken Sie oben auf dem Bildschirm auf Speichern.
Zur Website hinzufügen #
- Öffnen Sie die Registerkarte In die Website einfügen in den Inhaltseinstellungen.
- Hier haben Sie zwei Optionen:
- Die Verwendung von Injection ermöglicht es Ihnen, den Code mit einem CSS-Selektor einzufügen.
- Die Verwendung von eingebettetem Code ermöglicht es Ihnen, den Code manuell in Ihre Website einzufügen.
- Wählen Sie die Option, die für Sie am einfachsten zu verwenden ist.
- Wenn Sie die Option für eingebetteten Code verwenden, ersetzen Sie
INSERT_CSS_SELECTOR[...]durch eine eindeutige Klasse oder ID für Ihr Suchfeld. Omnisearch wird angezeigt, wenn das Eingabefeld, das dem Selektor entspricht, angeklickt wird.
Hier ist ein vollständiges Beispiel für den Embed-Code der Omni-Suche mit dem CSS-Selector, der am häufigsten in Shopify verwendet wird:
<span class="clerk"
data-template="@omni-search"
data-api="search/omni"
data-trigger-element=".search-form__input
></span>
Startvorlagen #
Wenn Sie Code-Designs verwenden möchten, können Ihnen diese Vorlagen den Einstieg erleichtern. Sie enthalten die grundlegenden UI-Elemente, die die Sofortige Suche und die Suchseite ausmachen, die Sie dann nach Ihren Bedürfnissen anpassen können.
Sofortige Suchcode #
Dies enthält die HTML- und CSS-Teile zur Anzeige eines Sofortige Suchdropdowns. Fügen Sie diese zu einem Code-Design in my.clerk.io hinzu.
HTML #
<div class="clerk-instant-search">
{% if hits.length == 0 %}
<div class="clerk-instant-search-no-results">
Nichts gefunden: <b>{{ query }}</b>... versuchen Sie eine einfachere Suche!
</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> Zeige Ergebnisse für: <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">Produkte</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">Jetzt kaufen</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>Siehe <b>{{ hits }}</b> weitere Ergebnisse für "<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">Suchvorschläge</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">Kategorien</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">Verwandte Inhalte</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 }}">
Siehe <b>{{ hits }}</b> weitere Ergebnisse für "<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: 0px 0px 5px 0px;
}
.clerk-instant-search-more-results {
padding: 1em;
font-size: 1.2em;
text-align: center;
}
.clerk-instant-search-title {
color: #b6c254;
margin: 20px 0px 5px 0px;
padding: 0px 0px 10px 0px;
text-transform: uppercase;
font-size: 1em;
border-bottom: 1px solid #000000;
}
/* Produkte */
.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-instant-search-product-button {
display: block;
margin: .2em auto;
padding: .8em 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: .8em;
cursor: pointer;
}
/* Vorschläge */
.clerk-icon {
color: lightgray;
margin-right: .5em;
}
.clerk-instant-search-suggestions {
margin-bottom: 1em;
}
.clerk-instant-search-suggestion {
padding: .1em;
}
/* Kategorien */
.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;
}
/* Seiten */
.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: 0px !important;
left: 0px !important;
}
.clerk-mobile-button {
display: none;
}
}
@media screen and (max-width: 767px) {
.clerk-instant-search-container {
right: 0px !important;
}
.clerk-desktop-button {
display: none;
}
}
@media screen and (min-width: 376px) and (max-width: 800px) {
.clerk-instant-search {
min-width: 0px !important;
}
}
@media screen and (max-width: 375px) {
.clerk-instant-search {
min-width: 200px !important;
}
.clerk-instant-search-col {
margin: 0px 0px 20px 0px;
}
.clerk-instant-search-product-name {
height: 3em !important;
}
}
Suchseiten-Code #
Dies enthält die HTML- und CSS-Teile zur Anzeige einer Suchseite. Fügen Sie diese zu einem Code-Design in my.clerk.io hinzu.
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">Im Angebot</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">Nicht auf Lager</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">In den Warenkorb</div>
</a>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% if count > products.length %}
<div class="clerk-load-more-button" onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">Weitere Ergebnisse anzeigen</div>
{% endif %}
</div>
CSS #
#clerk-search-results {
margin: 0px;
}
.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.