The quiz acts as a product filter applied to a selected collection. Each answer will add the matching products to the final results. Currently, there are implemented 5 types of filters that can be applied: product type, tags, vendor, price, and options. An answer can have multiple filters.
Installation
Download the session files from GitHub
Copy sections/quiz.liquid to your theme sections folder.
Copy snippets/quiz-data.liquid to your theme snippets folder.
Copy assets/quiz.js to your theme assets folder.
Quiz logic
Each quiz answer can contain one or more filtering rules. On the initial quiz collection products, those filtering rules will be applied. The end result will contain only the matching products.
Browser support
The quiz is built as a progressive enhancement component. IntersectionObserver, CSS Snap Points, CSS Scroll Behavior, CSS Custom Properties are used to provide the best user experience. However, the browser support for those features is not required for the quiz functionality.
The functionality baseline is ES5.
Dependencies
The quiz is built entirely on vanilla Javascript. Does not require jQuery or another library to be loaded.
CSS styles
Out of the box, the section will have just the basic layout styles. Headings, paragraphs, links will inherit your theme styles. This is an on purpose behavior
Questions, bugs?
Please feel free to submit any bugs or code improvements on GitHub. Want to say hi? Mail me at mircea@typefolly.com