Ordenación de resultados en búsqueda y categorías

Compruebe cómo elegir un atributo personalizado para ordenar los resultados

Por norma, Clerk.io ordena los resultados en Búsqueda y Categorías basándose en lo que la mayoría de los clientes probablemente comprarán, lo cual es un gran potenciador de la conversión.

Sin embargo, la API de Búsqueda y la API de Categorías Populares tiene una función incorporada que le permite elegir un atributo específico por el que ordenar, que seguirá listando los productos basándose en la popularidad, pero al mismo tiempo los ordenará basándose en el atributo que seleccione.

He aquí un ejemplo:

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

data-orderby te permite elegir el atributo por el que filtrar. Cualquier atributo enviado a Clerk.io se puede utilizar para esto.

data-order puede ser asc o desc para orden ascendente y descendente.

La ordenación también puede utilizarse en llamadas directas a la API:

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

Frontend Sorting Example

A continuación se muestra un ejemplo de embedcode que utiliza la ordenación anterior para crear un campo de opción que los usuarios pueden utilizar para cambiar la ordenación de los resultados.

No tiene estilo por lo que es sólo para la funcionalidad.

<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>

¿Responde esto a su pregunta?