I need help with a quiz + "make a box" website

[flo_]

Hello everyone, please excuse my poor english in advance.

I am making a shopify website for a client that needs to be able to build gift boxes by choosing different products. The problem I have is : the products that the user will be able to add to the gift box will vary depending to their answers to a previous quiz.

So, to summarize :

Quiz -> Gift box making (with products based on the answers to the quiz).

Anyone has input on what would be the best way to do that ? I'm new to shopify development, and making an app that does all of that (+ the back office) seems like a very daunting task to me. (I'm curious on what would be the price to make such an app by the way, if I really have to do it.)
I have found an app for the quiz (Product Recommendation Quiz by revenuhunt) which can give me the results as a JSON file. I'd like to be able to inject the JSON with the results of the quiz into a box making app, but so far I haven't been able to find a box making app that allows incoming data.

I really don't know what to do, so any help would be more than welcome.
Thanks a lot for reading me. 🙂

[jam_chan]

I think that the suitable approach is to make an alternative template of product or collection. 

Create your quiz and product selections on this template. The quiz result is the limitation of how many items to add to the cart. Just use js to make this part dynamic.

After the user selects the items, use cart ajax to add all items to the cart at once. If a discount is given and no item can be removed, change cart.liquid to disable changing quantity or remove items.

[flo_]

Okay I see, I will try this approach then. Thanks a lot for your answer !

[3Revolutions]

Hi @flo_ 

There are a few Product Quiz apps available on Shopify that should be able to solve your problem. You may need to customize or enhance the  layout and messaging to fit your use case, but that may be an easier/faster path than building a quiz from the ground up. I'am an app developer and we have had a Quiz app on Shopify since 2013 and I know the challenges. 

Our app is called Guidelines Product Finder, and it may be a good fit. 

With Guidelines you are able to create a series of questions and then associate tags with each answer as you mentioned. As a shopper goes through your product finder answering questions, we build a dynamic search query based on the selected answers/tags and then present the results based on those tags/answers. The results are displayed as individual recommendations on the results screen. Out of the box, you can add each one of the recommendations to cart.  However, to support additional functionality when an item is added to cart we provide the ability to override the default Add To Cart API callback functions with your own functions and logic. This feature allows developers to trigger cart confirmations, the display of mini-carts or even a cart drawer, or in your case add to a Gift Box.

Anyway, I would suggest looking at our app and others on the marketplace and see which one you can customize to meet your requirements. I believe most of them will be able to get you close. 

Best of luck,

Mariano

[flo_]

Hello everyone,

Thanks a lot for your answers.

I wanted to give some update on this. I'm still not finished, but I'm using the Product Recommendation Quiz app which outputs the results in JSON, and then redirects to another page where I want to have the "build a box" part. I wanted to do it with ReactJS but so far it's been REALLY tedious to use React with Shopify (and especially liquid).

Am I doing this the wrong way ? Should I only use vanilla javascript with Shopify ? I come from back end development and I've never been great with JS, and I've always found that apps built with vanilla JS or JQuery were difficult to maintain. Should I go with vanilla JS for this one though ? I feel like trying to make React work with a Shopify theme has been a mistake, but I'm not experienced with Shopify so I'd love to have input on this.

[jam_chan]

Besides react and vanilla, there are still other choices like Vue, alpine.js, swelte, htmx, etc. Alpine and swelte don't use virtual Dom and they're lightweight frameworks. They can still provide reactivity with native Dom.

Personally, I use Vue and the I know that virtual Dom is not working well in the theme editor. But the Vue community is vibrant. I can use various libaries easily

[flo_]

Thanks a lot for your answer @jam_chan

Vue is definitely next on my "to learn" list. And my main problem is that I'm not able to output liquid code with React. I've seen that there's a package on npm called "react-liquid" but I can't seem to make it work, I think I need to learn how to use webpack, but it seems to be a pain to use with Shopify. Do you use something like webpack or parcel to use vue with Shopify themes or do you just load a CDN ?

[flo_]

I'm figuring I should simply ditch Liquid for the React part of my theme.

Is there a way to GET products in my theme without using Liquid ? I've seen that the Admin API can retrieve products but I'm not sure if I can use it on the storefront side.