Ways to customize the functionality of Fancy Products Designer

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.

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

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.

<div class="custom-fields-wrapper"></div>

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.

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

Is there anyway to implement this now?

Having a little trouble trying to make this work, is anyone of the forum who is still active able to give me a hand? Many thanks

it would be wonderful if this functionality was incorporated into the fpd someday, but a wordpress plugin in the meantime would be great. I would pay for that! The coding scares me.

<div class="custom-fields-wrapper"></div>

Can go anywhere in the page.

 Well, the code above could go into a JS file(like functions.js) and call before you call the JS files from FPD. Since you are in Wordpress, just make sure you call the JS in the ehader, since FPD JS files are called on the footer. Also, make sure you are adding the code above inside a document ready function. The entire code will look something like this:

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
		);
			 
	}
	
});

 Since you are on Wordpress, you will need to call it using jQuery instead of "$", since Wordpress uses the no conflict option with their jQuery version. Hope that helps

// 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 />");
	}
	
});

That code will be responsible of creating the input text fields. The logic is that, it will grab all <span> elements from the product designer modules(which is the one for texts) and create an input field. I am carrying over from each of those elements the parameters and placeholder text of each and placing it into the input text field. NOTE: It is highly important you call this function BEFORE the fancy product designer main JS, because the main JS of product designer removes the span elements and inserts them into the canvas, which then makes the above code useless. The next step is to actually make the above fields replace the text of the customizable fields.

// 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
	);
			
}

This code is responsible of replacing the text. The first function just makes an action when you start typing text on the input field. The second replaces the text from the editor. So, if you are wondering how this works, on the parameters we get from the input fields, there is one for "replace", which contains the name you specified on the very first step. Then, the field uses that parameter to search which of the existing objects is the one that will be replaced. That should do the trick. The last step is just to add the div where the fields are going to be added to. Just add the following code anywhere on your page template

<div class="custom-fields-wrapper"></div>

That is it. Now this will create fields outside of the Product Designer that will manage the editing. It is recommended that you set all customizable text as non-editable, so that it can only be edited from the designer, but just the fields.

Hope this helps to anyone that may need something similar

 myProductDesigner.addElement('image', 'image_url.png', 'Image Title', {autoCenter: true, price: 20, draggable: true});

Tested it, and it works on what I need. However, this is for images. I need this same exact functionality, but for text. Does anyone knows what will be the equivalent of the above function, but for text?