Streaming live at 10am (PST)

Display price low to high?

Am I missing something?

It seems there is no option to sort products within a category in price order. Really???

It seems I can only sort by default Name or my custom CMS Fields, but not sort by the price. This seems a very basic and common feature missing.

You could write a little script to sort those onload. Sorting using nested text for instance.

Hi @pepperclip

Thanks for the suggestion, are you able to provide an example script? I have limited code experience. #nocode

I really can’t understand why the Sort function only allows the Name to be sorted. Why on earth would Webflow not allow the Price to be sorted too?

I wrote this script to sort by A-Z and by price for my webflow e-commerce projects :

// home-made sorting
$(document).ready(function(){

function sortUsingNestedText(parent, childSelector, keySelector) {
    var items = parent.children(childSelector).sort(function(a, b) {
        var vA = $(keySelector, a).text();
        var vB = $(keySelector, b).text();
        return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
    });
    parent.append(items);
}

function sortUsingNestedTextOpposite(parent, childSelector, keySelector) {
    var items = parent.children(childSelector).sort(function(a, b) {
        var vA = $(keySelector, a).text();
        var vB = $(keySelector, b).text();
        return (vA > vB) ? -1 : (vA < vB) ? 1 : 0;
    });
    parent.append(items);
}

/* setup sort attributes */
$('#sort-by-price-desc').data("sortKey", ".product-price");
$('#sort-by-price-asc').data("sortKey", ".product-price");
$('#sort-by-name-az').data("sortKey", ".product-card-name");
$('#sort-by-name-za').data("sortKey", ".product-card-name");

/* sort on button click */
$("#sort-by-price-asc, #sort-by-name-az").click(function() {
   sortUsingNestedText($('.product-container'), ".product-item", $(this).data("sortKey"));
});
$("#sort-by-price-desc, #sort-by-name-za").click(function() {
   sortUsingNestedTextOpposite($('.product-container'), ".product-item", $(this).data("sortKey"));
});

$("#sort-clear").click(function() {
   location.reload();
});

}); 
// End of sorting code

You need to change the class with the price (and the class with the name of product if you want A-Z sorting as well) and the id of the sorting triggers.

The code basically searches for text in product cards, orders it by value and re-displays it in the product container when the user clicks a button.

Hope this helps

1 Like

Nice one thanks for sharing!

and no filter for price either. Mixitp or script I guess