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 Instant Search Dropdown.
Una Search Page con filtraggio di ricerca per faccette.
Un Omnisearch sovrapposto che combina entrambi.

Questo articolo spiega come iniziare con la ricerca utilizzando il WooCommerce plugin.

Instant Search #

L’Instant Search fornisce risultati di ricerca in tempo reale mentre i clienti digitano, visualizzati in un dropdown sotto il campo di input della ricerca.

Crea Design #

Puoi utilizzare il Design Editor per configurarlo visivamente, oppure utilizzare code designs.

Design Editor #

Vai a Search > Designs e clicca su New Design.
Scegli Other designs > Instant Search.
Dall’elenco dei modelli di design, scegli quale vuoi utilizzare per iniziare.
Dagli un nome e clicca su Create design.
Apporta le modifiche che desideri al design.

Code Design #

Vai a Search > Designs e clicca su New Design.
Scegli Other designs > Blank > With code.
Dagli un nome e clicca su Save.
Crea un design di codice da zero utilizzando Liquid code.

Se desideri un design di partenza, controlla il template di Instant Search più in basso.

Crea Contenuto #

Questo contiene tutte le impostazioni utilizzate per mostrare il dropdown di Instant Search e renderlo incorporabile nel tuo sito web.

Vai a Search > Content.
Clicca su New Content.
Dagli il nome “Live Search”.
In Content type, seleziona Live-search dal dropdown.
In Design seleziona il design che hai creato dal dropdown.
Clicca su Save in cima alla schermata.

Aggiungi al Sito Web #

Per aggiungere il Live Search 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 Live Search.
Clicca sulla casella per “Enabled”.
Modifica il resto della configurazione in base alle tue esigenze.
Inserisci il Live Search Input Selector e il Live Search Form Selector.
Clicca su Salva Impostazioni.

In alternativa, puoi utilizzare la funzione di injection.

Search Page #

La Search Page fornisce un’esperienza di ricerca a pagina intera con opzioni di filtraggio avanzate. Questo viene utilizzato per mostrare ogni singolo risultato per la query di ricerca di un cliente.

Crea Design #

Puoi utilizzare il Design Editor per configurarlo visivamente, oppure utilizzare code designs.

Design Editor #

Vai a Search > Designs e clicca su New Design.
Scegli Other designs > Search Page.
Dall’elenco dei modelli di design, scegli quale vuoi utilizzare per iniziare.
Dagli un nome e clicca su Create design.
Apporta le modifiche che desideri al design.

Code Design #

Vai a Search > Designs e clicca su New Design.
Scegli Other designs > Blank > With code.
Dagli un nome e clicca su Save.
Crea un design di codice da zero utilizzando Liquid code.

Se desideri un design di partenza, controlla il template di Search Page più in basso.

Crea Contenuto #

Questo contiene tutte le impostazioni utilizzate per mostrare la Search Page e renderla incorporabile nella tua pagina di ricerca esistente.

Vai a Search > Content.
Clicca su New Content.
Dagli il nome “Search Page”.
In Content type, seleziona Search page dal dropdown.
In Design seleziona il design che hai creato dal dropdown.
Clicca su Save in cima alla schermata.

Aggiungi al Sito Web #

Per aggiungere la Search Page 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 un nome alla pagina dei risultati di ricerca, come “Search Results”.
Nel campo di testo, digita [clerk-search], e premi Pubblica.
Poi, clicca su Clerk nel menu laterale sinistro.
Scorri fino alla sezione Impostazioni Search Page.
Clicca sulla casella per “Enabled”.
Nella casella Search Page, seleziona il nome della pagina appena creata dal punto 4.
Modifica il resto della configurazione in base alle tue esigenze e clicca su Salva Impostazioni.

Con la ricerca per faccette, puoi creare filtri sulla tua Clerk Search Page che rendono più facile per i tuoi clienti navigare tra i risultati di ricerca.

Segui questi passaggi per aggiungere filtri sulla tua Clerk Search Page:

Apri il tuo backend di WooCommerce.
Nel menu laterale sinistro, clicca su Clerk.
Scorri verso il basso fino alla sezione Navigazione per Faccette.
Spunta la casella per Enabled.
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 Search Page includerà ora filtri.

Omnisearch #

L’Omnisearch combina l’Instant Search e la Search Page in un’unica sovrapposizione che viene visualizzata quando l’utente clicca all’interno del campo di input della ricerca.

Crea Design #

L’Omnisearch funziona solo con design di codice, poiché ha un layout più complesso che può essere modificato in qualsiasi modo tu voglia.

Vai a Search > Designs e clicca su New Design.
Scegli Omni-search.
Dall’elenco dei modelli di design, scegli quale vuoi utilizzare per iniziare.
Dagli un nome e clicca su Save.
Apporta tutte le modifiche che desideri al design. La guida all’Omnisearch ha ulteriori informazioni su come fare.

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 New Content.
Dagli il nome “Omni-Search”.
Aggiungi un’etichetta di tracciamento - questa dovrebbe essere anche solo “Omni-Search”.
In Content type, seleziona Omni-search dal dropdown.
In Design seleziona il design che hai creato dal dropdown.
Clicca su Save in cima alla schermata.

Aggiungi al Sito Web #

Dalle impostazioni dei contenuti, apri la scheda Insert into website.
Qui hai due opzioni:
- Utilizzare injection consente di inserire il codice utilizzando un selettore CSS.
- Utilizzare embedded code consente di inserire il codice manualmente nel tuo sito web.
Scegli l’opzione che è più facile per te da usare.
Se utilizzi l’opzione di codice incorporato, sostituisci INSERT_CSS_SELECTOR[...] con una classe o ID unico 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>

Template di Partenza #

Se desideri utilizzare design di codice, questi template possono aiutarti a iniziare. Contengono gli elementi UI di base che compongono l’Instant Search e la Search Page, che puoi poi modificare secondo le tue esigenze.

Codice di Instant Search #

Questo contiene le parti HTML e CSS per visualizzare un dropdown di Instant Search. Aggiungi questi a un design di 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">Compra 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> ulteriori 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> ulteriori 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 Search Page #

Questo contiene le parti HTML e CSS per visualizzare una Search Page. Aggiungi questi a un design di 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&amp;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 Ulteriori 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.

Search

Instant Search #

Crea Design #

Design Editor #

Code Design #

Crea Contenuto #

Aggiungi al Sito Web #

Search Page #

Crea Design #

Design Editor #

Code Design #

Crea Contenuto #

Aggiungi al Sito Web #

Facets #

Omnisearch #

Crea Design #

Crea Contenuto #

Aggiungi al Sito Web #

Template di Partenza #

Codice di Instant Search #

HTML #

CSS #

Codice della Search Page #

HTML #

CSS #