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
0 Votes
R
Richard Rodriguez posted
about 7 years ago
Best 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
0 Votes
20 Comments
Sorted by
rady kalposted
over 4 years ago
Admin
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.)
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.
0 Votes
S
Steveposted
almost 6 years ago
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
0 Votes
R
Richard Rodriguezposted
almost 6 years ago
I apologize as I did not replied to some of the comments. I am not sure if the plugin has changed dramatically, to the point where my scripts no longer works. If you check the answer chosen for this post, you should see a small guide on how to implement it. Just in case, I will briefly describe it below step by step.
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.
<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.
0 Votes
S
Simon-Gabriel Augerposted
almost 6 years ago
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
0 Votes
A
Andrewposted
about 6 years ago
Is there anyway to implement this now?
0 Votes
A
Andrewposted
about 6 years ago
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
0 Votes
S
Shu-aib Benjaminposted
over 6 years ago
@Richard: I'm very interested to try out your plugin when it's ready. That would be great! :)
0 Votes
R
Richard Rodriguezposted
almost 7 years ago
@Rhiannon - Hmmmm, that is a bit hard to do. My code was meant to be used for static text that all it needed was changing text. If you edit via the canvas, then it will use those parameters rather than the ones from the field, that is why it resets. I might try and see if I can do something.
@Chrissy - lol nah, no need to pay, this code is free. If someone charges you..... they are mean! But in all seriousness, I'll see if I can put a small plugin together for this code.
0 Votes
C
Chrissy Arnoldposted
almost 7 years ago
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.
0 Votes
R
Rhiannon Doyleposted
almost 7 years ago
Admin
I've got this working however, I wondered if someone could give me some pointers in how to honour any changes to the text via the toolbar?
Currently I can edit the text in the new input boxes but if I then change colour/font/size and then re-edit - colour/font/size is reset
0 Votes
L
Larry Sainte-Marieposted
almost 7 years ago
James or Richard, Do you think you could wrap this code up into a plugin that would work with standard WP custom field tools like gravity forms as James mentioned? The goal here is getting the custom data to pass through onto the order, invoices, email, etc and not just in the FPD world. Many other plugins have solved that problem so just trying to connect the 2.
0 Votes
J
James Rattazziposted
about 7 years ago
Update: I have it working now, thanks. Any thoughts on using gravity forms for the form? I would like to link this to other functionality on the site.
0 Votes
J
James Rattazziposted
about 7 years ago
Thanks for the help. I now have the form appearing but it is not editable. Any thoughts?
0 Votes
R
Richard Rodriguezposted
about 7 years ago
Also, forgot to mention. The HTML snippet
<div class="custom-fields-wrapper"></div>
Can go anywhere in the page.
0 Votes
R
Richard Rodriguezposted
about 7 years ago
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
0 Votes
J
James Rattazziposted
about 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
0 Votes
R
Rhiannon Doyleposted
about 7 years ago
Admin
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?
0 Votes
R
Richard Rodriguezposted
about 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
0 Votes
R
Richard Rodriguezposted
about 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?
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
0 Votes
Richard Rodriguez posted about 7 years ago Best Answer
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
0 Votes
20 Comments
rady kal posted over 4 years ago Admin
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
0 Votes
Curtis Boyd posted over 4 years ago
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.
0 Votes
Steve posted almost 6 years ago
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
0 Votes
Richard Rodriguez posted almost 6 years ago
1) Create a JS file and name it fpd-fields.js. Inside that file, add the code below:
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.
0 Votes
Simon-Gabriel Auger posted almost 6 years ago
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
0 Votes
Andrew posted about 6 years ago
Is there anyway to implement this now?
0 Votes
Andrew posted about 6 years ago
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
0 Votes
Shu-aib Benjamin posted over 6 years ago
0 Votes
Richard Rodriguez posted almost 7 years ago
@Chrissy - lol nah, no need to pay, this code is free. If someone charges you..... they are mean! But in all seriousness, I'll see if I can put a small plugin together for this code.
0 Votes
Chrissy Arnold posted almost 7 years ago
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.
0 Votes
Rhiannon Doyle posted almost 7 years ago Admin
Currently I can edit the text in the new input boxes but if I then change colour/font/size and then re-edit - colour/font/size is reset
0 Votes
Larry Sainte-Marie posted almost 7 years ago
Do you think you could wrap this code up into a plugin that would work with standard WP custom field tools like gravity forms as James mentioned? The goal here is getting the custom data to pass through onto the order, invoices, email, etc and not just in the FPD world. Many other plugins have solved that problem so just trying to connect the 2.
0 Votes
James Rattazzi posted about 7 years ago
I have it working now, thanks. Any thoughts on using gravity forms for the form? I would like to link this to other functionality on the site.
0 Votes
James Rattazzi posted about 7 years ago
0 Votes
Richard Rodriguez posted about 7 years ago
Can go anywhere in the page.
0 Votes
Richard Rodriguez posted about 7 years ago
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
0 Votes
James Rattazzi posted about 7 years ago
0 Votes
Rhiannon Doyle posted about 7 years ago Admin
0 Votes
Richard Rodriguez posted about 7 years ago Answer
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
0 Votes
Richard Rodriguez posted about 7 years ago
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?
0 Votes
Login or Sign up to post a comment