I'd like to move a couple of the elements out of the stage but can't quite work out the hooks I can remove and then add in again in a different position.
- I have fpd_mainbar set to position default, but I'd like to move it to below the product image/canvas on product page
- I'd like to move the actions out of the stage and positioned above it instead
If anyone has any guidance to achieve this I'd be really grateful.
Best Answer
J
Jeremy Aaron Horland
said
about 8 years ago
Above is the wrong script, with the same wrapper.
Replace the part below "//PUT YOUR JAVASCRIPT HERE"
<script type='text/javascript'>
jQuery( document ).ready(function() {
var testStage = function(){
if (jQuery( "div.fpd-view-stage").length ) {
//PUT YOUR JAVASCRIPT HERE
jQuery("div.fpd-actions-wrapper").insertBefore("div.fpd-product-designer-wrapper");
} else {
window.setTimeout(testStage, 20);
}
};
window.setTimeout(testStage, 20);
});
</script>
1 person likes this
J
Jeremy Aaron Horland
said
about 8 years ago
A few improvements
1) Now, instead of page by page, I have moved the script to a new plugin "CSS & Javascript Toolbox" -- so I can assign it to different products without re-writing it or pasting it on every page. Works great, has an "auxiliary" section where all the woo products just show up.
2) A re-write to make it work there was needed, this is also a lot more elegant than the previous, but still not hooked into or detecting specific FPD logic. I'd still love some help from the FPD team for this.
It took a little doing, but I figured out the issue.
FPD loads items & stage -after- page load, and it operates after window.ready. Any script loaded at or before window.ready was failing to move stuff around the editor box.
A quick wait-and-sniff wrapper works well here. There is likely a way to be more elegant here, and detect the operation of the FPD javascript itself, and attach this to the operations of FPD's own logic.
<script type='text/javascript'>
jQuery( document ).ready(function() {
setTimeout(function(){
while (!jQuery( "div.fpd-view-stage").length ) {
sleep(10);
}
//PUT YOUR JAVASCRIPT HERE
jQuery("div.fpd-actions-wrapper").insertBefore("div.fpd-product-designer-wrapper");
}, 10);
});
</script>
So, for you, hopefully this works, for the FPD staff -- what is the best, most elegant way to load scripts -AFTER- your editor box loads into the DOM but before the user has page control?
R
Rhiannon Doyle
said
about 8 years ago
Yes, tried it in browser debugger and it worked as you described.
Using OH Script header and footer, and put the below in header but no change:
These two lines work as-is on the demo site, if tested in your browser's console.
They should just work, when inserted into your page at end of page load, such as in the page footer.
How are you inserting the script into your page?
What plugin are you using?
Have you tried this in your browser's debugger console first to see if it works?
J
Jeremy Aaron Horland
said
about 8 years ago
these statements work as-is, no prep. You can test them by entering them into your javascript "debug" console in your developers tools. If you do not have your developers tools loaded in your browser, google up how to do so for your browser of preference.
You can also just enter them into your page-script plugin box. Which one did you choose? Many of them require "script" tags in order to operate such as the "OH Add Script Header Footer" which I use.
To enter them into my plugin I would put this into the FOOTER script box :
I achieved the same thing in the end by extending the canvas size height, and positioning the main bar with css.
R
Rhiannon Doyle
said
about 8 years ago
I'd like to move <divclass="fpd-mainbar fpd-clearfix"> to just before fpd-views-selection
and <divclass="fpd-actions-wrapper"> to before fpd-product-designer-wrapper
1 person likes this
J
Jeremy Aaron Horland
said
about 8 years ago
If you've tried the UI & Layout Composer and you're sure the elements you want to move cannot be done with this tool then you need to write a little jQuery to do the same thing.
You will need a plug-in that lets you place javascript on individual pages, such as "OH Add Script Header Footer."
Do you know -exactly- which div you want to move around, and -exactly- where on the page you want to put it?
R
Rhiannon Doyle
said
about 8 years ago
I'd certainly be happy to give that a go and see what effect it had on the page load
J
Jeremy Aaron Horland
said
about 8 years ago
Is it acceptable for you to do this before page-load time with jQuery and a scripting plug-in?
Rhiannon Doyle
I'd like to move a couple of the elements out of the stage but can't quite work out the hooks I can remove and then add in again in a different position.
- I have fpd_mainbar set to position default, but I'd like to move it to below the product image/canvas on product page
- I'd like to move the actions out of the stage and positioned above it instead
If anyone has any guidance to achieve this I'd be really grateful.
Above is the wrong script, with the same wrapper.
Replace the part below "//PUT YOUR JAVASCRIPT HERE"
with your jQ -
jQuery("div.fpd-actions-wrapper").insertBefore("div.fpd-product-designer-wrapper");
Such as :
- Oldest First
- Popular
- Newest First
Sorted by Newest FirstRhiannon Doyle
Thanks so much for taking the time to investigate this. Appreciate the explanation as well - makes sense!
Works perfectly well and gives total control over where to position these elements outside of the stage.
Jeremy Aaron Horland
Above is the wrong script, with the same wrapper.
Replace the part below "//PUT YOUR JAVASCRIPT HERE"
with your jQ -
jQuery("div.fpd-actions-wrapper").insertBefore("div.fpd-product-designer-wrapper");
Such as :
1 person likes this
Jeremy Aaron Horland
A few improvements
1) Now, instead of page by page, I have moved the script to a new plugin "CSS & Javascript Toolbox" -- so I can assign it to different products without re-writing it or pasting it on every page. Works great, has an "auxiliary" section where all the woo products just show up.
2) A re-write to make it work there was needed, this is also a lot more elegant than the previous, but still not hooked into or detecting specific FPD logic. I'd still love some help from the FPD team for this.
Jeremy Aaron Horland
It took a little doing, but I figured out the issue.
FPD loads items & stage -after- page load, and it operates after window.ready. Any script loaded at or before window.ready was failing to move stuff around the editor box.
A quick wait-and-sniff wrapper works well here. There is likely a way to be more elegant here, and detect the operation of the FPD javascript itself, and attach this to the operations of FPD's own logic.
So, for you, hopefully this works, for the FPD staff -- what is the best, most elegant way to load scripts -AFTER- your editor box loads into the DOM but before the user has page control?
Rhiannon Doyle
Yes, tried it in browser debugger and it worked as you described.
Using OH Script header and footer, and put the below in header but no change:
<script type='text/javascript'>
jQuery(document).ready(function() {
jQuery("div.fpd-actions-wrapper").insertBefore("div.fpd-product-designer-wrapper");
})
</script>
Jeremy Aaron Horland
These two lines work as-is on the demo site, if tested in your browser's console.
They should just work, when inserted into your page at end of page load, such as in the page footer.
How are you inserting the script into your page?
What plugin are you using?
Have you tried this in your browser's debugger console first to see if it works?
Jeremy Aaron Horland
these statements work as-is, no prep. You can test them by entering them into your javascript "debug" console in your developers tools. If you do not have your developers tools loaded in your browser, google up how to do so for your browser of preference.
You can also just enter them into your page-script plugin box. Which one did you choose? Many of them require "script" tags in order to operate such as the "OH Add Script Header Footer" which I use.
To enter them into my plugin I would put this into the FOOTER script box :
Rhiannon Doyle
I can't seem to get that to work. Would you have to remove the initial div first to use .insertBefore?
Jeremy Aaron Horland
sorry this took so long :
for your first request :
jQuery("div.fpd-mainbar").insertBefore("div.fpd-views-selection");
works GREAT -- try it at your debugger console on one of the demo pages or on your own site.
and
jQuery("div.fpd-actions-wrapper").insertBefore("div.fpd-product-designer-wrapper");
takes care of your other issue. This will allow a lot more flexibility than the css solution.
Rhiannon Doyle
I achieved the same thing in the end by extending the canvas size height, and positioning the main bar with css.
Rhiannon Doyle
and <div class="fpd-actions-wrapper"> to before fpd-product-designer-wrapper
1 person likes this
Jeremy Aaron Horland
If you've tried the UI & Layout Composer and you're sure the elements you want to move cannot be done with this tool then you need to write a little jQuery to do the same thing.
You will need a plug-in that lets you place javascript on individual pages, such as "OH Add Script Header Footer."
Do you know -exactly- which div you want to move around, and -exactly- where on the page you want to put it?
Rhiannon Doyle
Jeremy Aaron Horland
Is it acceptable for you to do this before page-load time with jQuery and a scripting plug-in?
-
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 2194 topics