Hello all,
I've been creating some wordpress websites with elementor for a few years now but have limited experience with woocommerce/webshops. Yet now I have a client asking for something specific and I'm wondering what would be the best approach to tackle this problem.
Basically the client owns a chocolate shop and sells boxes of 12, 24 or 32 chocolates. And he would like web visitors to order these boxes but also customize these boxes themself. Like dragging different types of chocolates to different spots in the box. So they can prepare the box with the right chocolates in the right spots of the box.
After that they should see the boxes in the checkout/chart (having a list of the contained chocolates here might be good). And the order in the back-end should show which chocolate goes at what spot in the box.
It seems I have two main challenges:
– Parent product (box) and child products (individual chocolate).
I'm thinking if perhaps I can have just the boxes as products I can add 12/24/32 product attributes which are basically numbered to link the spot in the box to the chocolate that should be put here. The same way you have sizes/colours on a clothing webshop. Thoughts?
– Drag and drop the chocolates in the box:
I think I will need some custom html/css for this. Maybe I can create a custom post type for every chocolate, or use the predifined product attribute options to get a list. Than I would loop over this list to display them in the front-end with a matching image of the chocolate. Than use the drag and drop api to drag them in the spots of the box (made with custom html): https://www.w3schools.com/html/html5_draganddrop.asp
If I add this to the product detail page I think I can hide the attribute fields containing the chocolates for each spot and update them with js when the drag/drop events are triggered. Than when the user adds the box to the chart it should have the right product attributes for all the chocolates in the box.
Does this seem like a good way to tackle this problem, or am I perhaps missing a simpler solution?