Need advice about FPD UI (frontend) customization

Posted about 4 years ago by Ben

Post a topic
Answered
B
Ben

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


0 Votes

rady kal

rady kal posted about 4 years ago Admin Best Answer

A. you can also hide the action button using the UI Composer. 

B. You can use the shortcode generator to place text boxes outside of the canvas. 

C. You can also place the design tool outside the canvas using those generated shortcodes. 

0 Votes


2 Comments

Sorted by
B

Ben posted about 4 years ago

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!

0 Votes

rady kal

rady kal posted about 4 years ago Admin Answer

A. you can also hide the action button using the UI Composer. 

B. You can use the shortcode generator to place text boxes outside of the canvas. 

C. You can also place the design tool outside the canvas using those generated shortcodes. 

0 Votes

Login or Sign up to post a comment