Answered
Moving some elements
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.
Is it acceptable for you to do this before page-load time with jQuery and a scripting plug-in?
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?
and <div class="fpd-actions-wrapper"> to before fpd-product-designer-wrapper
1 person likes this
I achieved the same thing in the end by extending the canvas size height, and positioning the main bar with css.
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.
I can't seem to get that to work. Would you have to remove the initial div first to use .insertBefore?
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 :
<script type='text/javascript'> jQuery("div.fpd-mainbar").insertBefore("div.fpd-views-selection"); jQuery("div.fpd-actions-wrapper").insertBefore("div.fpd-product-designer-wrapper"); </script>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?
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>
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?
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.
<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-item picture").click( function() { setTimeout(function(){ jQuery("div.fpd-close-stage-off-canvas span.fpd-icon-close").click(); }, 20); } ); } else { window.setTimeout(testStage, 20); } }; window.setTimeout(testStage, 20); }); </script>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 :
<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
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.