Dynamically Generated Product Page

Site URL: https://www.roehrsguitars.net/store/guitar-builder

A little background and setup:

I'm a software engineer helping a friend out with a tool he wants to build for his site. It's a `guitar builder`, or `custom guitar visualizer`. Basically the whole idea is that it just lets the user visualize what the specs on their finished product might look like.

So I built that out using JS and a neat library called Konva.js. Plugged it into his site using the code blocks and it worked like a charm.

Now I want to include a 'Review Build' button on the configurator page that will redirect the user to a hidden product page I've set up (hidden via `CSS -> display: 'none'`, so still accessible via URL).

The Issue:

I need the product page to actually accept and use the values that the configurator page will send over.
I see that the product pages use some `data-variant` logic to plug in the `JSON`. My attempts to manipulate those via the console or raw HTML and then have the `Add to Cart` button respect my modifications have failed so far.

Potential fixes I can think of:

- I saw there is a Product API, perhaps it would be better for the configurator to generate a new product when they click `Review Build`, then send them to that page? Downside is that that's quite a lot more work, and then we'd need a way to delete the new products if a user doesn't buy them or something. Or hide them. Idk.

- Perhaps the `guitar visualizer` I built should actually just LIVE in the product page itself, and I should make the options part of the product options? And then just add all the listeners I need to the various `change` events?

- Hopefully there is just some easy way to inject the data from the `guitar visualizer` straight into the product page? That's the avenue I've currently been trying, but no luck. I think if I send the data over a query string, then have a script setup on the product page to handle it, that would work. The problem is how to tell the product page to use the new values...

Thanks for reading all this, and please help if you can think of a solution!

- Matt

No solutions but perhaps some data points.

7 hours ago, themadtitanmathos said:

I should make the options part of the product options?

There is a limit to the number of variants per product. It's 100. Not sure if that is an issue for you.

7 hours ago, themadtitanmathos said:

I need the product page to actually accept and use the values that the configurator page will send over.

Would cookies or localStorage be an option to communicate between pages?

Yeah there are over 1 million potential configurations of this item. So variants are out.
I had the site owner upgrade to commerce so I could make an API key, but now I'm running into the CORS issue where you can't actually hit the commerce API from javascript (I know, storing the key in the code is bad).

I'm not really sure what to do from here. That was kind of my last hope. >:|

Hi @themadtitanmathos I had a look over at the site and it looks like you implemented this config builder?

Any tips so others can follow?