Hello. Total WF newbie here. I have a client who uses freelancers to make simple one-page sites for marketing campaigns. They’re switching to WF as their preferred platform so I need to learn fast. I’m coming from an intermediate Wordpress dev background so hopefully shouldn’t take too long to get up to speed.
The client has asked if I would be able to scope out a gifting guide site that would ask site users a series of five simple A/B questions that would result in a selection of products filtered down using their answers.
Is this possible with basic WF functionality? My initial thought was to create a form with conditional logic so if as a user clicks through the questions they will be presented with the products tagged with the 5 responses from their answers. Does that make sense? Or, what I’m hoping, is that there is a simpler way to do it?
Any help on ways to go about this would be appreciated. I also have the budget to pay for assistance on this once I get the go-ahead so anyone who has done this before in WF and would be willing to work with me (GMT timezone) please get in touch (hopefully this is not breaking forum etiquette).
There are some details here that will affect the approach you take, and the amount of programming involved.
Is A/B required, or is “unspecified” a third option that is valid for filtering?
Is the filtering dynamic, or do results only appear after the quiz?
Are products exclusive to a filter set, or can they overlap categories?
How many products are there, and how many do you need to display at one time in the results?
These things will determine how you setup your data structures, and what filtering options are available & most effective. Webflow comes with some challenges like the 100 max items in a collection list… so depending on your product count, you may not be able to load everything then filter on the client-side.
In general though, I’d probably use some combination of Webflow’s in-built filtering, and a 3rd party lib like Isotope or MixItUp2, which are client-side filtering plug-ins. These give a nice dynamic feel and with careful setup and scripting, you can do some pretty fancy stuff to create your 5x A/B/other filter setup.
Thanks for your input Michael. Some answers to your questions:
There will be two options per question and one will have to be chosen to progress to the next question, no third or pass options available
The results will only appear after the 5 questions have been answered
Products will likely overlap categories
The product count is unknown at the moment as it’s just a pitch, but the end clients this ‘product’ will be aimed at if it gets off the ground are likely to have more than 100 items
The results would be limited to a handful, maybe 3-5 gifts, from the filtered results, so there would be an element of random picking if there were lots of results after the filtering had taken place. I’m not sure how easy that is to implement?
I’ve found the ‘Advanced Webflow Forms’ builder by Alex Iglesias which I think could work but I’m worried that he advises against using it on live projects as it’s no longer supported. A quick test of that shows that I could create conditional logic along the lines of ‘if box A is checked show box B, if box B is checked show box C, if box A, B & C are checked show link to filtered set 1’. It would be fiddly but there are only 32 possible pathways (if my maths is right) so it wouldn’t take too long to setup.
I also found Timothy Ricks’ youtube tutorial ‘Building a CMS Quiz in Webflow Using WeBlocks’ which looks like it could be a basis for something similar.
I’m making an assumption that if products in the inventory can be tagged then once they’re filtered using those tags that there is a URL that I can copy for each of the tag combinations? Like if I go to a webshop of some kind and press a couple filter options the URL updates to something unique for that combination that I can copy? Does that make sense. Sorry if my knowledge and terminology aren’t up to scratch here!
If you can make Alex’s or Timothy’s solutions work for you, I think they’d provide a better-evolved toolset for what you’re trying to do. Otherwise you’ll be pretty much coding from scratch.
It might help you if you see this as three different pieces to build-
The progressive-button-selector mechanism.
The URL reader/writer
The filtered results view
It sounds like #1 would perhaps be best based on Alex’s or Timothy’s work, since the scripting would already be included. But you’re on the right track- progressive unveiling is very quiz-like UI, and you should find lots of jquery examples if that doesn’t work.
Unfortunately #2 is not automatic, you’d have to construct that URL querystring, and dissect it as well. JS has good tools for this however.
#3, you’d be doing a kind of advanced, dynamic filtering. Advanced as you have 5 items to filter on, plus a total item count limit. Dynamic because it would be based on the querystring or input settings. You won’t be able to use Webflow’s in-built filtering there, but you can do it using script.
I have a filtering toolset you can use that handles the wiring and iteration for you, and you just worry about the filtering logic you want;