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