Woocommerce
Search
Aggiungi una potente funzionalità di ricerca al tuo webshop WooCommerce.
Clerk.io offre tre soluzioni di ricerca distinte che possono essere utilizzate insieme o separatamente:
- Un Dropdown di Ricerca Istantanea.
- Una Pagina di Ricerca con filtri di Ricerca Faccettata.
- Un overlay di Omnisearch che combina entrambi.
Questo articolo spiega come iniziare con la Ricerca utilizzando il plugin WooCommerce.
Ricerca Istantanea #
Crea Design #
Puoi utilizzare il Design Editor per configurarlo visivamente, oppure utilizzare design in codice.
Design Editor #
- Vai a Search > Designs e clicca su Nuovo Design.
- Scegli Altri design > Ricerca Istantanea.
- Dall’elenco dei modelli di design, scegli quello con cui vuoi iniziare.
- Dagli un nome e clicca su Crea design.
- Apporta le modifiche che desideri al design.
Design in Codice #
- Vai a Search > Designs e clicca su Nuovo Design.
- Scegli Altri design > Vuoto > Con codice.
- Dagli un nome e clicca su Salva.
- Crea un design in codice da zero utilizzando codice Liquid.
Se desideri un design di partenza, controlla il modello di Ricerca Istantanea più in basso.
Crea Contenuto #
Questo contiene tutte le impostazioni utilizzate per mostrare il dropdown della Ricerca Istantanea e renderlo incorporabile nel tuo sito web.
- Vai a Search > Content.
- Clicca su Nuovo Contenuto.
- Dagli il nome “Ricerca Live”.
- In Tipo di contenuto, seleziona Ricerca-live dal dropdown.
- In Design seleziona il design che hai creato dal dropdown.
- Clicca su Salva in cima alla schermata.
Aggiungi al Sito Web #
Per aggiungere la Ricerca Live al tuo sito web, segui questi passaggi:
- Accedi al tuo backend di WooCommerce.
- Clicca su Clerk nel menu laterale sinistro.
- Scorri fino alla sezione Impostazioni Ricerca Live.
- Clicca sulla casella per “Abilitato”.
- Modifica il resto della configurazione in base alle tue esigenze.
- Inserisci il Selettore di Input Ricerca Live e il Selettore di Modulo Ricerca Live.
- Clicca su Salva Impostazioni.
In alternativa, puoi utilizzare la funzione di iniezione.
Pagina di Ricerca #
Crea Design #
Puoi utilizzare il Design Editor per configurarlo visivamente, oppure utilizzare design in codice.
Design Editor #
- Vai a Search > Designs e clicca su Nuovo Design.
- Scegli Altri design > Pagina di Ricerca.
- Dall’elenco dei modelli di design, scegli quello con cui vuoi iniziare.
- Dagli un nome e clicca su Crea design.
- Apporta le modifiche che desideri al design.
Design in Codice #
- Vai a Search > Designs e clicca su Nuovo Design.
- Scegli Altri design > Vuoto > Con codice.
- Dagli un nome e clicca su Salva.
- Crea un design in codice da zero utilizzando codice Liquid.
Se desideri un design di partenza, controlla il modello di Pagina di Ricerca più in basso.
Crea Contenuto #
Questo contiene tutte le impostazioni utilizzate per mostrare la Pagina di Ricerca e renderla incorporabile nella tua pagina di ricerca esistente.
- Vai a Search > Content.
- Clicca su Nuovo Contenuto.
- Dagli il nome “Pagina di Ricerca”.
- In Tipo di contenuto, seleziona Pagina di ricerca dal dropdown.
- In Design seleziona il design che hai creato dal dropdown.
- Clicca su Salva in cima alla schermata.
Aggiungi al Sito Web #
Per aggiungere la Pagina di Ricerca al tuo sito web, segui questi passaggi:
- Accedi al tuo backend di WooCommerce.
- Vai su Pagine.
- In cima alla pagina, clicca su Aggiungi Nuovo.
- Dai alla pagina dei risultati di ricerca un nome, come “Risultati di Ricerca”.
- Nel campo di testo, digita
[clerk-search], e premi Pubblica. - Poi, clicca su Clerk nel menu laterale sinistro.
- Scorri fino alla sezione Impostazioni Pagina di Ricerca.
- Clicca sulla casella per Abilitato.
- Nella casella Pagina di Ricerca, seleziona il nome della pagina appena creata al punto 4.
- Modifica il resto della configurazione in base alle tue esigenze e clicca su Salva Impostazioni.
Faccette #
Con la ricerca facettata, puoi creare filtri sulla tua Pagina di Ricerca Clerk che rendono più facile per i tuoi clienti navigare tra i risultati di ricerca.
Segui questi passaggi per aggiungere filtri sulla tua Pagina di Ricerca Clerk:
- Apri il tuo backend di WooCommerce.
- Nel menu laterale sinistro, clicca su Clerk.
- Scorri verso il basso fino alla sezione Navigazione Faccettata.
- Spunta la casella per Abilitato.
- Nella casella Aggiungi Attributi Personalizzati, inserisci l’attributo che desideri utilizzare come filtro e clicca su Aggiungi.
- Imposta un titolo di visualizzazione, scegli una posizione e spunta la casella Mostra.
- Clicca su Salva Impostazioni. La tua Pagina di Ricerca includerà ora filtri.
Omnisearch #
Crea Design #
L’Omnisearch funziona solo con design in codice, poiché ha un layout più complesso che può essere modificato in qualsiasi modo tu voglia.
- Vai a Search > Designs e clicca su Nuovo Design.
- Scegli Omni-search.
- Dall’elenco dei modelli di design, scegli quello con cui vuoi iniziare.
- Dagli un nome e clicca su Salva.
- Apporta tutte le modifiche che desideri al design. La guida all’Omnisearch ha ulteriori informazioni su come farlo.
Crea Contenuto #
Questo contiene tutte le impostazioni utilizzate per mostrare l’Omnisearch e renderlo incorporabile nel tuo sito web.
- Vai a Search > Content.
- Clicca su Nuovo Contenuto.
- Dagli il nome “Omni-Search”.
- Aggiungi un’etichetta di tracciamento - questa dovrebbe essere anche solo “Omni-Search”.
- In Tipo di contenuto, seleziona Omni-search dal dropdown.
- In Design seleziona il design che hai creato dal dropdown.
- Clicca su Salva in cima alla schermata.
Aggiungi al Sito Web #
- Dalle impostazioni di Contenuto, apri la scheda Inserisci nel sito web.
- Qui hai due opzioni:
- Utilizzare l’ iniezione consente di inserire il codice utilizzando un selettore CSS.
- Utilizzare il codice incorporato consente di inserire il codice manualmente nel tuo sito web.
- Scegli l’opzione che è più facile per te da usare.
- Se utilizzi l’opzione del codice incorporato, sostituisci
INSERT_CSS_SELECTOR[...]con una classe o un ID unici per il tuo campo di input di ricerca. L’Omnisearch verrà mostrato quando il campo di input corrispondente al selettore viene cliccato.
Ecco un esempio completo di codice di incorporamento Omni-search con #search come selettore CSS:
<span class="clerk"
data-template="@omni-search"
data-api="search/omni"
data-trigger-element="#search"
></span>
Modelli di Partenza #
Se desideri utilizzare design in codice, questi modelli possono aiutarti a iniziare. Contengono gli elementi UI di base che compongono la Ricerca Istantanea e la Pagina di Ricerca, che puoi poi modificare secondo le tue esigenze.
Codice della Ricerca Istantanea #
Questo contiene le parti HTML e CSS per visualizzare un dropdown di Ricerca Istantanea. Aggiungi questi a un design in codice in my.clerk.io.
HTML #
<div class="clerk-instant-search">
{% if hits.length == 0 %}
<div class="clerk-instant-search-no-results">
Nessun risultato trovato: <b>{{ query }}</b>... prova una ricerca più semplice!
</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> Mostrando risultati per: <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">Prodotti</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">Acquista Ora</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>Vedi <b>{{ hits }}</b> altri risultati per "<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">Suggerimenti di Ricerca</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">Categorie</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">Contenuti Correlati</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 }}">
Vedi <b>{{ hits }}</b> altri risultati per "<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;
}
/* Prodotti */
.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;
}
/* Suggerimenti */
.clerk-icon {
color: lightgray;
margin-right: .5em;
}
.clerk-instant-search-suggestions {
margin-bottom: 1em;
}
.clerk-instant-search-suggestion {
padding: .1em;
}
/* Categorie */
.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;
}
/* Pagine */
.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;
}
}
Codice della Pagina di Ricerca #
Questo contiene le parti HTML e CSS per visualizzare una Pagina di Ricerca. Aggiungi questi a un design in codice in my.clerk.io.
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">In Offerta</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">Esaurito</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">Aggiungi al Carrello</div>
</a>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% if count > products.length %}
<div class="clerk-load-more-button" onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">Mostra Altri Risultati</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;
}
}
Questa pagina è stata tradotta da un'utile intelligenza artificiale, quindi potrebbero esserci errori linguistici. Grazie per la comprensione.