Ricerca istantanea #
Questa sezione vi mostrerà come installare la ricerca istantanea di Clerk.io con tutto ciò che è guidato da Contenuti e Design.
1. Creare un [Design] di ricerca (http://help.clerk.io/it/platform/designs/design-editor/) chiamato “Ricerca immediata”. Iniziare utilizzando un modello predefinito
Ricerca istantanea a destra.
2. Creare un blocco Ricerca Contenuto chiamato “Ricerca in tempo reale”.
3. Scegliere Ricerca in tempo reale come logica del prodotto e selezionare il progetto di ricerca in tempo reale.
4. Copiare il codice embed della sezione “Inserisci nel sito web” nel fondo del file che genera tutte le pagine del vostro webshop.
5. Sostituire INSERT_SEARCH_INPUT_CSS_SELECTOR_HERE in data-instant-search con la classe o l’ID del campo di ricerca.
6. Ora la ricerca live è legata correttamente al campo di ricerca quando i clienti digitano.
Codice di esempio per la ricerca in tempo reale
<span class="clerk"
data-template="@live-search"
data-instant-search="#search"
data-live-search-categories="true">
</span>
Pagina di ricerca #
Questa sezione vi mostrerà come installare la pagina di ricerca di Clerk.io con tutto ciò che è guidato da Contenuti e Disegni.
1. Creare un [Design] di ricerca (http://help.clerk.io/it/platform/designs/design-editor/) chiamato “Pagina di ricerca” e scegliere l’opzione predefinita
Pagina di ricerca.
2. Creare un blocco Contenuto chiamato “Pagina di ricerca”.
3. Scegliere Ricerca come logica del prodotto e selezionare il design della pagina di ricerca.
4. Impostare Numero di prodotti a 40 e scrivere " Risultati della ricerca “ come titolo.
5. Copiate il codice sottostante nella vostra pagina di ricerca.
6. Sostituire il testo INSERT_QUERY_HERE in data-query con una logica per ottenere
la query inserita dai clienti nel campo di ricerca.
7. Ora avete Clerk come funzione di ricerca!
Modello di pagina di ricerca dinamica con sfaccettature
<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>
Sfaccettature #
Clerk.js è dotato di un supporto integrato per la [Ricerca a faccette] (https://docs.clerk.io/docs/clerkjs-ui-faceted-search).
Tutti gli attributi di prodotto che ci inviate possono essere utilizzati come parte della ricerca sfaccettata.
Cominciamo con un rapido esempio:
<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>
Le parti data-facets- consentono di abilitare e personalizzare la ricerca a faccette.
Aggiungendole al vostro codice embed della ricerca, le sfaccettature saranno visualizzate non appena verranno mostrati i risultati.
Di seguito, si può vedere cosa fa ciascuna parte:
Sfaccettature dello stile #
Facets viene fornito con uno stile semplice. Per modificarlo, è sufficiente utilizzare questi selettori CSS, per aggiungere uno stile personalizzato:
