Ways to customize the functionality of Fancy Products Designer
R
Richard Rodriguez
started a topic
over 7 years ago
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
Best Answer
R
Richard Rodriguez
said
over 7 years ago
Ok, I am back, and am happy to say, I got it!!!
So basically, I
wanted automatically generated fields from the customizable text
somewhere and then make those fields manage the content, rather than
double-clicking on the editor. So first things first, you will need to
go to the product designer on the backend, and the text layers that you want to be customizable, just add a name on the "Replace" field(like replaceName, replacePhone, etc). Once you do that you are set. The code I used to display the fields is the following:
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
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
J
James Rattazzi
said
over 7 years ago
I am working on trying to implement this solution but I'm not sure where to put the code. I'm running weaver xtreme plus on wordbress and using the FPD for woocommerce version. I've tried a few possibilities but no joy. Please advise
R
Rhiannon Doyle
said
over 7 years ago
This looks very cool thanks for sharing!
Would you put this in a seperate js file called before the main minimised one?
Any thoughts on how you could integrate the text tools to this?
R
Richard Rodriguez
said
over 7 years ago
Answer
Ok, I am back, and am happy to say, I got it!!!
So basically, I
wanted automatically generated fields from the customizable text
somewhere and then make those fields manage the content, rather than
double-clicking on the editor. So first things first, you will need to
go to the product designer on the backend, and the text layers that you want to be customizable, just add a name on the "Replace" field(like replaceName, replacePhone, etc). Once you do that you are set. The code I used to display the fields is the following:
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
R
Richard Rodriguez
said
over 7 years ago
Ok, a small update. Went looking at some documentation on the jQuery version and found this:
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?
Richard Rodriguez
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
So basically, I wanted automatically generated fields from the customizable text somewhere and then make those fields manage the content, rather than double-clicking on the editor. So first things first, you will need to go to the product designer on the backend, and the text layers that you want to be customizable, just add a name on the "Replace" field(like replaceName, replacePhone, etc). Once you do that you are set. The code I used to display the fields is the following:
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.
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
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
- Oldest First
- Popular
- Newest First
Sorted by Newest FirstRichard Rodriguez
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:
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
James Rattazzi
Rhiannon Doyle
Richard Rodriguez
So basically, I wanted automatically generated fields from the customizable text somewhere and then make those fields manage the content, rather than double-clicking on the editor. So first things first, you will need to go to the product designer on the backend, and the text layers that you want to be customizable, just add a name on the "Replace" field(like replaceName, replacePhone, etc). Once you do that you are set. The code I used to display the fields is the following:
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.
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
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
Richard Rodriguez
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?
-
Adding Fancy Products to Categories
-
Shortcode for specfic product designer
-
What theme is recommended to use with FPD ?
-
Exclude Image from export
-
Google Font Family adds extras
-
Floating Dialog box
-
Uploadzone not working
-
Image transparency like in T-shirt demo
-
How do I get clipart
-
What does the LOAD button do / what is it for?
See all 2208 topics