Sortieren von Ergebnissen in der Suche und in Kategorien

Prüfen Sie, wie Sie ein benutzerdefiniertes Attribut zum Sortieren der Ergebnisse auswählen

Standardmäßig sortiert [Clerk.io] (http://Clerk.io) die Ergebnisse in der Suche und in den Kategorien nach den Produkten, die die meisten Kunden wahrscheinlich kaufen werden, was die Konversionsrate deutlich erhöht.

Die Such-API und die Kategorie Beliebt-API haben jedoch eine eingebaute Funktion, die es Ihnen ermöglicht, ein bestimmtes Attribut für die Sortierung auszuwählen, das die Produkte immer noch nach ihrer Beliebtheit auflistet, sie aber gleichzeitig nach dem von Ihnen ausgewählten Attribut sortiert.

Hier ist ein Beispiel:

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

Mit data-orderby können Sie das Attribut auswählen, nach dem gefiltert werden soll. Alle an [Clerk.io] (http://Clerk.io) gesendeten Attribute können hierfür verwendet werden.

data-order kann entweder asc oder desc für aufsteigende und absteigende Reihenfolge sein.

Die Sortierung kann auch in direkten API-Aufrufen verwendet werden:

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

Frontend-Sortierbeispiel

Nachfolgend finden Sie ein Beispiel für einen Embedcode, der die oben beschriebene Sortierung verwendet, um ein Optionsfeld zu erstellen, mit dem die Benutzer die Sortierung der Ergebnisse ändern können.

Es hat kein Styling und dient nur der Funktionalität.

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

Ist damit Ihre Frage beantwortet?