Display price low to high?

Design help Ecommerce
1

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.

2

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

3

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?

4

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

3 Likes
5

Nice one thanks for sharing!

6

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

7

I canā€™t believe @Webflow have STILL not enabled the ability to sort a list of products by price. This seems such a basic concept, and surely dead easy to implement, as there are plenty of other ā€˜sort byā€™ options.

Iā€™d love to know the logic of not offering what seems a very obvious design feature.

2 Likes
8

Please vote for this on the Webflow Wishlist
https://wishlist.webflow.com/ideas/WEBFLOW-I-1872

9

Came here with the SAME thought. Iā€™m using ecommerce for a membership subscription of 3 prices.
I cannot believe this basic feature is missing.

I recognize that with Webflow you are getting a much better designer than using something standard like Shopify which has nearly every ecommerce feature at the ready - but when youā€™re paying a premium price for both ecommerce hosting AND processing fees, stuff like this really grinds my gears.

4 years laterā€¦
Itā€™s like begging apple to include a phone app in their iPhones.
Just have it.

10

We cannot sort based on Price in webflow because the price is a text field and not an actual number.
I have found a workaround that works well for me. In the Products list within the Ecommerce tab (this will also work if your Products are a CMS list), select Settings, and add a new Custom Field and name it something like ā€œPrice for Order Sortingā€. The new Custom Field should be of type Number. Save the Setting.
Now on each product, just add the exact price of what the item costs to the new custom field. Now you can sort the CMS collection based on the ā€œPriceā€ but it will be your custom field.
Hope this helps!