WooCommerce SVG coloring tool

[ad_1]

Hello!

I’m dipping my toes in the world of Woocommerce plugin development due to a client’s need for a custom solution. It’s a fashion designer designing patchwork clothes, wanting to have a product type which displays a patchwork pattern with a coloring tool, that the users can color and submit their unqiue colored order. The clothes will then be made according to how the users colored the pattern.

The plugin should do the following:

1) On backend, create a field for uploading the corresponding SVG pattern file.

2) Displays the attached SVG pattern on the respective product page.

3) The customers are able to color the SVG pattern. Coloris.js is involved in color selection, and JavaScript is utilized in coloring the svg paths that are clicked on via DOM manipulation.

4) When clicking ‘Add to cart’, somehow the colored SVG DOM should be passed to the server and attached to the order. (Unsure whether it’s okay to keep it SVG, or I should try to use ImageMagick to convert it to an image format, like jpg)

5) The colored pattern should display on the cart page, and on the order details on the backend as well, so the designer sees how the patterns were colored.

So far I managed to do steps 1-3, however I’m stuck with step 4 and 5. Unsure how to pass data between JavaScript and PHP, also unsure which hooks I should use to update the order meta with the colored pattern. I would greatly appreciate any help, ideas or hints, or any directions or security precautions you might suggest I take a look into.

Thanks and have a great Sunday!

[ad_2]

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer