Hi

I will appreciate some advice for customization of the front end UI. Using FPD for Woocommerce.

I already have an HTML page where I have 1) a text input field 2) a div with lots of images loaded

I would like to somehow achieve the following :

A. Do not show regular FPD actions buttons - I managed to hide it with CSS

B. Whenever the user enters a text in the existing input box ( mentioned in (1) above ) - the text should go into a text box in the FPD's loaded product design

C. Whenever the user clicks one of the images ( mentioned in (2) above) - that image should get loaded into the FPDs loaded product design

I am more familiar with coding than HTML/CSS and so I reverse-engineered the JS code of FPD and sort of achieved what I need by adding some code 'delegating' the text and the images from my HTML into FPD's JS functions ( as if those were called from FPD UI ).

But I feel there should be a more elegant way. I don't mind changing my HTML as long as overall look and user actions stay similar to what I have: a text box and images panel outside of FPD area

Maybe I can do it with the PLUS add-on somehow?

thanks in advance

Ben

For B and C above:

I actually wanted to re-use some existing input components on my page instead of using the Text or Image UI of the FPD

I eventually found this code does the job just right for me :

var fpd_text_field = fancyProductDesigner.viewInstances[my_view_id].getElementByTitle('the_name_of_the_text_field_from_product_designer');

fancyProductDesigner.setElementParameters({text:"my_text"},fpd_text_field,my_view_id);

Just in case someone is looking for something similar. 

In general, even though I use the WordPress plugin, I find the FPD and FabricJS API docs very very helpful :

https://jquerydoc.fancyproductdesigner.com/

http://fabricjs.com/docs/fabric.Text.html

This is really great that everything is modular and documented!