Pwa-studio: [feature]: Add Sorting feature to Search Results Page

[awilcoxa]

Is your feature request related to a problem? Please describe.
Category sorting was implemented in #360 and now needs to also be implemented for the search results page.

As a shopper, after I use the search feature to find specific items in the store I want to be able to sort the returned products by the available criteria: price (low to high), price (high to low), best match

Describe the solution you'd like
Implement existing category sorting feature on search results page.

Sort button should display and support all currently available sorting options

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Please let us know what packages this feature is in regards to:

• [ ] venia-concept
• [x ] venia-ui
• [ ] pwa-buildpack
• [ x] peregrine
• [ ] pwa-devdocs
• [ ] upward-js
• [ ] upward-spec
• [ ] create-pwa

[awilcoxa]

@larsroettig just to follow up on the conversation from last community sync, created the follow on issue we discussed.

[larsroettig]

@awilcoxa if like you can assign me I will work on this next week

[Jordaneisenburger]

@larsroettig just giving my 2 cents here but I think we should make the sorting a dropdown-select so the user has visual confirmation on what's the current sorting order. Right now a user needs to click 'Sort' before they can see context.

@soumya-ashok what do you think ?

[soumya-ashok]

@Jordaneisenburger Not sure I fully understand your feedback. Are you saying that instead of the label "sort" the button should have the current sorting label added "sort : newest"?

The design intent is to have it function as a dropdown once the button is tapped/clicked.

[Jordaneisenburger]

@soumya-ashok exactly, as a user I don't want to lose context, see above image (it's Dutch but you get the point) The same applies for the filters in some way, we should be able to see active filters or an indicator that there are filters active when the drawer is closed.

[soumya-ashok]

@Jordaneisenburger - Agree with your feedback on providing context to the user. However, the way we are currently set up with the placement of the buttons for filter and sort (particularly on mobile) makes it challenging to implement something that looks like your screenshot in terms of having the space to add the additional text outside the dropdown.

@schensley has some ways we could make the design look consistent on both desktop and mobile. @larsroettig could you please work with the design that Scott provides to make improvements?

[schensley]

Hi. @larsroettig
I am in agreement with @Jordaneisenburger, in that it's best to give the shopper context as to how the page is sorted without requiring them to perform some action (i.e. click to view a dropdown list). Obviously layout can present some challenges when for instance stacking controls may push products/content down the page. One tweak that could be made to the current Venia design is to display some text when the page has been sorted to indicate and confirm the criteria that the page is sorted by. Something like a line of text that reads "_Products currently sorted by [Price - low to high]_" just above the products. Personally, I think this text treatment could help separate sorting criteria from applied filters (tags) for the shopper - as opposed to using the same treatment for both.
Please let me know if there is anything more I can provide or clarify.

NOTE: I've made a simple wireframe demo.
https://xd.adobe.com/view/063b0a53-2f4f-41f2-67a5-2b70e6a51f8f-700a/

[codynguyen1]

@Jordaneisenburger if you are going to update this, then the product listing sorting option would also be updated right?

[awilcoxa]

@larsroettig any updates?

[larsroettig]

@awilcoxa I started working on it but then I have to move