Sofortige Suche #
Dieser Abschnitt zeigt Ihnen, wie Sie die Live-Suche von Clerk.io installieren, bei der alles von Inhalten und Designs gesteuert wird.
1. Erstellen Sie eine Suche Design mit dem Namen “Instant Search”. Beginnen Sie mit der Verwendung eines Standard
Instant Search Dropdown Right Design.
2. Erstellen Sie einen Search Content Block mit dem Namen “Live Search”.
3. Wählen Sie Live Search als Produktlogik, und wählen Sie Ihr Live-Search-Design
4. Kopieren Sie den Embedcode aus dem Abschnitt “In die Website einfügen” in den Boden der Datei, die alle Seiten Ihres Webshops generiert..
5. Ersetzen Sie INSERT_SEARCH_INPUT_CSS_SELECTOR_HERE in data-instant-search durch die Klasse oder ID Ihres Suchfeldes.
6. Jetzt ist die Live-Suche korrekt an das Suchfeld gebunden, wenn Kunden tippen.
Beispiel Live-Search Code
<span class="clerk"
data-template="@live-search"
data-instant-search="#search"
data-live-search-categories="true">
</span>
Suche Seite #
Dieser Abschnitt zeigt Ihnen, wie Sie die Suchseite von Clerk.io installieren können, wobei alles durch Inhalte und Designs gesteuert wird.
1. Erstellen Sie ein Such-Design mit dem Namen " Suchseite" und wählen Sie die Standard
Suchseite Design.
2. Erstellen Sie einen Inhalt-Block mit dem Namen " Suchseite".
3. Wählen Sie Suche als Produktlogik, und wählen Sie das Design Ihrer Suchseite.
4. Setzen Sie Anzahl der Produkte auf 40, und geben Sie " Suchergebnisse “ als Überschrift ein.
5. Kopieren Sie den folgenden Code in Ihre Suchseite.
6. Ersetzen Sie den Text INSERT_QUERY_HERE in data-query durch eine Logik, die
die Abfrage, die Kunden eingeben, aus dem Suchfeld zu erhalten.
7. Jetzt haben Sie Clerk als Ihre Suchfunktion!
Dynamische Suchseite Vorlage mit Facetten
<div class="clerk-page-width">
<span
id="clerk-search"
class="clerk"
data-template="@search-page"
data-target="#clerk-search-results"
data-query="INSERT_QUERY_HERE"
data-facets-attributes='["price","categories","vendor"]'
data-facets-titles='{"price":"Price","categories":"Categories","vendor":"Brand"}'
data-facets-target="#clerk-search-filters"
data-facets-price-prepend="€"
data-facets-in-url="false"
data-facets-view-more-text="View More"
data-facets-searchbox-text="Search for ">
</span>
<div id="clerk-show-facets" onclick="toggleFacets()">Filters</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>
Facetten #
Clerk.js kommt mit eingebauter Unterstützung für Faceted Search.
Alle Produktattribute, die Sie an uns senden, können als Teil der Facettensuche verwendet werden.
Lassen Sie uns mit einem kurzen Beispiel beginnen:
<div id="clerk-search-filters"></div>
<div id="clerk-search-results"></div>
<span
class="clerk"
data-template="@search-page"
data-query="shoes"
data-offset="0"
data-target="#clerk-search-results"
data-facets-target="#clerk-search-filters"
data-facets-attributes='["categories","manufacturer","gender"]'
data-facets-multiselect-attributes='["categories","manufacturer"]'
data-facets-titles='{"categories":"Categories","manufacturer":"Brand","gender":"Sex"}'>
</span>
Die data-facets- Teile erlauben Ihnen die Aktivierung und Anpassung der Facettensuche.
Wenn Sie diese zu Ihrem Such-Embedcode hinzufügen, werden die Facetten angezeigt, sobald die Ergebnisse angezeigt werden.
Unten sehen Sie, was die einzelnen Teile bewirken:
Styling Facetten #
Facets wird mit einem einfachen Styling ausgeliefert. Um dies zu ändern, verwenden Sie einfach diese CSS-Selektoren, um ein benutzerdefiniertes Styling hinzuzufügen:
