Connecting with WooCommerce

Hello All,

I am working on the makeover of a WooCommerce site which sells skateboards made from recycled bottle caps.

An idea for the new site is that a visitor can design his own skateboard in a configurator.

The configurator is made with Construct and can be seen here: headstart.design/custom

How it works: Select the bottlecaps that you want in your design from the palette on the bottom-left.

Design your board and when you’re happy with your design click the “oven” icon in the top-right and the board will be “baked”.

Now the board needs to be ordered in WooCommerce if you click “buy this board”.

I am trying to figure out how to do it, but can’t find a way.

Any ideas on how to go from here? Or anyone who wants to take on this project?

The million dollar question is how you would be able to pass the design data back to WooCommerce?

Not knowing WooCommerce, I will anticipate that you will need to use the REST Api along with AJAX calls.

(https://woocommerce.github.io/woocommerce-rest-api-docs/#introduction)

There is also potentially the PHP route if you're more comfortable there.

This post mentioned that they integrated it, but not likely to your detailed level. https://www.construct.net/en/forum/construct-3/general-discussion-7/construct-3-as-app-making-soft-125202?kws=woocommerce

The million dollar question is how you would be able to pass the design data back to WooCommerce?

Yes, indeed.

In WooCommerce, a product is like a WordPress post, or more precisely a Custom Post Type.

You can create products in WooCommerce through the REST api just like you can create posts in WordPress through its REST api. I tested it with Postman (api client) and it works. Problem is, that you will need to authorize the client (the app running in the visitors browser) full read-write access to the shop. Which seems highly unsafe. So I ditched that idea.

I am now thinking of using a form to get the data to WooCommerce. Gravity Forms (WordPress plugin that I use to make forms) has "post fields" that lets users create create post content by filling in a form. If the custom post type is a "product" and has a price (meta key "price" with a value ) it can be added to a cart.

Or, maybe I could create a product "custom board" which already has a price, shipping class etc. in WooCommerce and let the user give his creation a name, design the board in the configurator, add the images and click the add to cart button.

Might work, although it will require action from the user, specifically to handle the images.

This post mentioned that they integrated it, but not likely to your detailed level. construct.net/en/forum/construct-3/general-discussion-7/construct-3-as-app-making-soft-125202

So it should be possible, although probably way out of my skillset.

I will run a test with the post-creation form and the product add-on idea. If anybody has a better idea, I'd love to hear that.

Thanks

I would embed the configurator inside the product page and pass a base64 data URI of the canvas to a hidden product field

That seems like a good idea.

I will do a test see how that goes.

Thanks!