Answered
Ways to customize the functionality of Fancy Products Designer
I took a quick look and wanted to know if there is a way to get documentation to customize a bit of how the plugin works. I am using the Woocommerce version of the plugin. What I want to achieve is the ability to add fields outside of the of the editor window, and and make them replace the editable content I specify. Basically, I want to achieve what you can do with the Multistep Product Configurator plugin, but for text. I tried looking at the docs and articles you have here, but I could not find anything on how I can manipulate the snippets. If there are no documents, could someone give just a small hint on how to approach this? Any help will be greatly appreciated.
By the way, for the devs, amazing plugin.
Thanks in advance
Is there anyway to implement this now?
Hi,
Your code seems to answer all what I'm missing with the FDP. Would you mind telling me how you would implement that code? In which js file and which section each part of the new code has to be integrated.
Thanks
1) Create a JS file and name it fpd-fields.js. Inside that file, add the code below:
jQuery(document).ready(function($) { // Create the fields $('.fpd-product span').each( function() { var objParameters = $(this).attr('data-parameters'); var objName = $(this).text(); var objJSONParameters = $(this).data('parameters'); if( objParameters.toLowerCase().indexOf("replace") >= 0 ) { $('.custom-fields-wrapper').append("<input type='text' placeholder='" + objName + "' data-parameters='" + objParameters + "' /><br /><br />"); } }); // Change the text of the card as the product designer elements $(".custom-fields-wrapper input").keyup(function() { var fieldValue = $(this).val(); var $this = $(this); fancyProductChangeText( fieldValue, $this ); }); function fancyProductChangeText( value, object ) { // Create a JSON object for the data jsonObj = $(object); fancyProductDesigner.addElement( 'text', //Type value , // Text '', // Title - This is used for image. For text it does nothing jsonObj.data('parameters') //parameters ); } });2) Once you have fpd-fields.js ready with the code above, upload it to your theme's directory
3) Once it is on your theme's directory, add it to your theme's header.php(or whichever file you are using as a header).
4) This step is highly important. Make sure you call fpd-fields.js BEFORE the JS files from Fancy Product Designers. If you don't do this, the code will not work.
5) After, insert the code snippet below anywhere on the products page.
6) Once this is done, create your fields by adding text layers on your Fancy Product Designer builder.
7) This step is also greatly important. When you add text layers, there is a field named "Replace". You MUST include the word replace within it for the fields to appear, but make sure they are unique. So for example, for first name, you can add "replaceFirstName", and then for phone "replacePhone".
That should be it. If you followed the above steps, you should have a set of fields that can edit the text on your canvas.
Thanks Richard, was a great piece of code.
It sadly seems to not be working since 3.6.0 for me.
Haven't had much luck in editing the code for it to work, could you point me in the direction of the files you were looking at when figuring this out?
Cheers
Hi,
I am using the Woocommerce version of the plugin.I have imported poster demo. What I want When I am clicking on poster image then ability to show fields outside of the of the editor window, and make them replace the editable content.Like this https://prnt.sc/mxafx8.
Please provide me any solution.
Thank you.
You need to create an upload zone in the Fancy product builder.
In the UI Layout Composer please select side bar right.
In your WooCommerce product or in the UI Layout please insert the following code at custom CSS:
.fpd-product-designer-wrapper {
float: left;
width: 518px;
max-width: 48%;
}
(The code and numbers depend on the Layout of your site and might need to be customized.)
If you need further help please open a ticket on www.fancyproductdesigner.com/customization-request