Ordinamento dei risultati nella ricerca e nelle categorie

Controllare come scegliere un attributo personalizzato per ordinare i risultati

Secondo gli standard, Clerk.io ordina i risultati nella Ricerca e nelle Categorie in base a ciò che la maggior parte dei clienti probabilmente acquisterà, il che è un ottimo incentivo alla conversione.

Tuttavia, la Search API e la Category Popular API hanno una funzione integrata che consente di scegliere un attributo specifico per l’ordinamento, che continuerà a elencare i prodotti in base alla popolarità, ma allo stesso tempo li ordinerà in base all’attributo selezionato.

Ecco un esempio:

<span class="clerk"
      data-template="@search-page"
      data-query="running shoes"
      data-orderby="price"
      data-order="asc">
</span>

data-orderby permette di scegliere l’attributo da filtrare. Qualsiasi attributo inviato a Clerk.io può essere usato per questo.

data-order può essere asc o desc per l’ordine ascendente e discendente.

L’ordinamento può essere usato anche nelle chiamate dirette all’API:

http://api.clerk.io/v2/search/search?key=h1j24hfkafn2nfl&query=running+shoes&limit=30&orderby=price&order=asc

Esempio di ordinamento del frontend

Di seguito è riportato un esempio di embedcode che utilizza l’ordinamento di cui sopra per creare un campo di opzioni che gli utenti possono utilizzare per modificare l’ordinamento dei risultati.

Non ha alcuno stile, quindi è solo per la funzionalità.

<span class="clerk"
      data-template="@search-page"
      data-query="running shoes"
      data-orderby="price"
      data-order="asc">
</span>

<select class="clerk_sort_select" onchange="clerkSorting(this.options[ this.selectedIndex ].value, event);">
    <option value="" disabled selected>Sort</option>
    <option value="null_null">Best Selling</option>
    <option value="asc^name">Name (A - Z)</option>
    <option value="desc^name">Name (Z - A)</option>
    <option value="asc^price">Price (low to high)</option>
    <option value="desc^price">Price (high to low)</option>
    <option value="asc^age">Newest</option>
    <option value="desc^age">Oldest</option>
</select>

<script>
    // Function to toggle sorting of results based on option in .clerk_sort_select.
    // The function takes the value of the option and splits it by _.
    // The value should always be either asc or desc followed by _ and the attribute key.
    // The only exception to this is the default sorting which is defined as null_null.
    function clerkSorting(val, event) {
        or = (val.split('^')[0] == 'null') ? eval(val.split('^')[0]) : val.split('^')[0];
        orb = (val.split('^')[1] == 'null') ? eval(val.split('^')[1]) : val.split('^')[1];
        param_sort = val;
        Clerk('content', '[data-target][data-query][data-template][data-clerk-content-id]', 'param', {
            orderby: orb,
            order: or
        });
    }
    // Change value in select element to currently active choice, since element rerenders upon initial user input.
    // Without it will show the first option nominally regardless of the current ordering in effect.
    if (!param_sort) {
        var param_sort;
    } else {
        if (param_sort.length > 0) {
            document.querySelector('.clerk_sort_select').value = param_sort;
        }
    }
</script>

Questo ha risposto alla sua domanda?