Pwa-studio: [feature]: Category Sorting with Venia (PWA)

[ericerway]

This issue is for the following packages:

[X] venia-concept
[ ] pwa-buildpack
[ ] peregrine
[ ] pwa-module
[ ] pwa-devdocs

Description

https://magento.invisionapp.com/share/WQN5F7BYBPG#/324119989_Product_Sort

JIRA issue for design

https://jira.corp.magento.com/browse/UXD-181

Screen: Category with Filter and Sort

Screen: Sort By with Category

As a shopper, I want to filter and sort products within a category so that I can make a purchase on Venia.

• Price: Low to High
• Price: High to Low
• Featured
• Newest
• Best Selling
• Ratings: High to Low (non-MVP)

Assumptions

• Dependent on Category page and ability to retrieve products by category
• Ratings not part of MVP (concept only)
• Sorting will be done SSR
• Dependency on collection filtering variable support; follow-up with graphql-ce

Tasks

• [ ] Discovery for GraphQL coverage w/r/t searching and filtering queries (input types)
• [ ] Discovery for how sorting affects and shown with URL (linking+routing)
• [ ] Implement Sort By panel with basic options (not Ratings)
• [ ] Testing and documentation (https://github.com/magento-research/pwa-studio/wiki/Documentation-Guidelines)

[JStein92]

UI is done on this - Currently waiting for https://github.com/magento/graphql-ce/pull/259 to be fixed/merged so we can use query variables for sorting

[cherdman]

Blocked by https://github.com/magento/graphql-ce/pull/259

[awilcoxa]

GraphQL dependency is marked as merged, appears that progress on this issue should resume. Moving back to ready to start for evaluation.

[JStein92]

@awilcoxa I believe this is still not possible. Variable queries using Objects is in 2.3.1, not 2.3.0.

[awilcoxa]

@JStein92 good call out, putting issue back on hold.

[supernova-at]

@JStein92 you mentioned

UI is done on this

Is there an open PR that should be attached to this issue?

[awilcoxa]

Revisit of previously completed design and UI from previous PR, needs evaluation of GraphQL dependency

[cherdman]

https://jira.corp.magento.com/browse/PWA-73

[soumya-ashok]

Scott and I have reviewed sort, some design changes need to be made. Will be working on that this week @awilcoxa .

[larsroettig]

@awilcoxa i will work on it

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

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

[soumya-ashok]

@larsroettig Thanks for picking this up. @schensley will be sharing the desktop mocks and working with you on implementation.

Mobile XD prototype : https://xd.adobe.com/view/15934509-f803-4dc8-7075-885b7e9e7407-63a2/

Screens:

[schensley]

Sorting for desktop

[gamul]

The same button "Filter" opens an MODAL section. Early mocks for sorting were also with modal bottom drawer. Why have you changed your mind?!
Why do we get new UI element instead of stylish, unified and predictable UI?!