radykal | Support Center Chooser

For which product do you need support?

Fancy Product Designer Multistep Product Configurator

Start a new topic
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.




Best Answer

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>

    




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.



Answer

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

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>

 

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?


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>

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?

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>

 


I can't seem to get that to work. Would you have to remove the initial div first to use .insertBefore? 

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.


jpg

I achieved the same thing in the end by extending the canvas size height, and positioning the main bar with css.

I'd like to move <div class="fpd-mainbar fpd-clearfix"> to just before fpd-views-selection

and <div class="fpd-actions-wrapper"> to before fpd-product-designer-wrapper

1 person likes this

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?




I'd certainly be happy to give that a go and see what effect it had on the page load

 

Is it acceptable for you to do this before page-load time with jQuery and a scripting plug-in?

Login or Signup to post a comment