Please help to create a code for sort option PRICE Low |High

[dilly]

Hello,

I managed to

1. I created a collection, import all my products to the collection via CSV,
2. Add a gallery to a page
3. Connected the dataset to my collection
4. Connected the Gallery to dataset
5. I managed to create categories as well (for example, dresses, blouses)

But I am unable to add a “Sort” option above the Gallery.
All I need is to add “Price Low | High” as shown on the image.

I would really like to add Sort button so my customers would be able to click on to sort the list.

I have no knowledge of creating code. Can someone please… please… create a code for me for this option and please tell me where to add the code.

I had a look at the code support section for “sort” but do not understand a thing.

I am desperate to get a positive answer

Thank you.

[sam-wix]

Hey Dilly,

You want to do something like this:

import wixData from 'wix-data';

$w.onReady( function() { 
  $w("#yourButtonId").onClick( (event, $w) => { 
    $w("#yourDatasetId").setSort( wixData.sort() 
      .descending("priceFieldKey");
  } );
} );

You’ll need to change yourButtonId, yourDatasetId, and priceFieldKey to match the relevant IDs and key in your site.

[dilly]

Hello Sam,

I am extremely grateful for your kind assistance.

I went through pages on my website to find the information to fill in the areas you have highlighted in blue.

I do not really know if I am using the correct names. I clicked on the + and added Two Buttons ( High and Low)
I do not even know where to add the code.
So I decided to attached images with the information.

Can you please… fill in the information and please let me know where to add the code.

Thank you so…much

Dilly

I clicked on onCurrentitemChanged to open the above

[sam-wix]

import wixData from 'wix-data';  

$w.onReady( function() { 
  $w("#button227").onClick( (event, $w) => { 
    $w("#yourDatasetId").setSort( wixData.sort() 
      .descending("price"); 
  } ); 
  
  $w("#button228").onClick( (event, $w) => { 
    $w("#yourDatasetId").setSort( wixData.sort() 
      .ascending("price"); 
    } ); 
} );

The only thing left to change is the dataset ID. Use the properties panel to find the ID of your dataset. Replace yourDatasetId with that value in the two places it appears above. (Don’t forget to leave the # as it is.)

[dilly]

Hello Sam,

I am still stuck.
I clicked on the readywear dataset image.
Is the datasetID shown under the word properties?(dresses1)
I copied dresses1 entered where it says yourDatasetId

Then I clicked on the Gallery
Clicked on onCurrentitemChanged
Pasted the whole code after the the lat }

Preview the page, clicked on High and Low buttons but nothing is happening.

Please help me Sam

Thank you so… much

[dilly]

Hi Sam,

I thought to attach the following image as well.
Sorry for taking up so much of your time.

[dilly]

Good morning,

Are you there Sam. Can you please help me.

I am desperately waiting for your answer to to my last message.

Thank you kindly.

[sam-wix]

Sorry, I don’t know what happened. I thought I answered this a few days ago, but something must have gone wrong.

Basically, there’s one thing you need to fix, and one thing I needed to fix.

You: Delete all the code from your page before pasting the code below.

Me: I missed a couple of closing parentheses.

import wixData from 'wix-data';    

$w.onReady( function() { 
  $w("#button227").onClick( (event, $w) => { 
    $w("#dresses1").setSort( wixData.sort() 
      .descending("price") ); 
  } ); 
  
  $w("#button228").onClick( (event, $w) => { 
    $w("#dresses1").setSort( wixData.sort() 
      .ascending("price") ); 
  } ); 
} );

[dilly]

"Sam you are a genius! "

I am absolutely ecstatic and grateful for everything that you have done for me.

Thank you very much,
Dilly

[dilly]

Hello Sam,

I used the code you provided above to create Price “High” and “Low” buttons.

For some of the pages the code is working fine. But, when I clicked “High” or “Low” buttons on some pages it does not identifies all the items on the page for ascending or descending.

I clicked on price Low, but it is showing £100 and £136 pounds items first then the rest of the items in ascending order.

when I click on “High” the two Items will show right at the end, when its meant to be showing on the very top.

I do not know why this is happening.

All I do is

1. Click on “High”

2. Paste code you provided and change the two ID’s

Can you please look into this and let know why this is happening. I spent nearly two hours trying to find a reason but mo luck.

Many thanks,
Dilly