GraphQL Storefront - product grid

[rymorgan]

Tasks

• [x] competitive research on industry standards as well as innovative product grids (including homepages).
• [x] Spec out and design out the needed functionality for a reaction vanilla product grid
• [x] Trim it back to a vanilla MVP version.

Deliverables

• [x] Wire
• [x] Visual design (can be highlevel and fairly generic)
• [x] HIgh-lefl list of product grid requirements
• [ ] URL handling

Questions to consider

• Tags, how does someone navigate through the catalog with tags
• Is the homepage different? - Yes? Shows category
• What types of product displays - Feature image(hero image), homepage image, category image, different sizes of product images, image grids, carousels?,
• Product states and how are they displayed? (sold-out, on sale, x-left,)
• How are variants displayed on the product grid?
• Autoscroll vs pagination? If it autoscrolls it should have a way of getting to the different sections
• Search/filter/attribute navigation
• On a category page it could display tags for navigation down the side vs multifaceted search

[cassytaylor]

Here's an analysis on a selection of product listing grids and homepages - https://drive.google.com/open?id=1v8q7jKVEJWPReCGSKPiwcu9rhyJ7Fq-2uEVxUv1_F84

[cassytaylor]

Product grid requirements - https://docs.google.com/spreadsheets/d/1_whIDhSjW8RZ0N5VqpKwTMMuuR-KaT_FUSN6yIx5zTY/edit#gid=658304823

[cassytaylor]

Product grid mocks on Zeplin (no homepage mocks here, yet) - https://app.zeplin.io/project/58af8900737c137280322bd6/dashboard?seid=5ab2d54c5aabceb79e9f4118