Great work so far, I'm thrilled at how well this is coming along.  Can't wait to launch next month.

In two places, there are now two steps rather than one, for the "simple" or "default" user.

This is vital to the website being developed now.

One - after uploading an image to the image palette, the new  image is not automatically loaded onto the builder platen, instead it is added only to the palette, requiring a second click to place it on the product.  This extra step is likely to confuse "simple"product users.

Two - same issue, when the designs categories load into the palette, the first one does not default to "open" but instead, to a list of available categories. In the case of "simple" this may seem confusing.

Is there any way to control this for myself with a little jQuery, or is there a way to add this behavior back via option?

@Radykal - Fantastic - Thank you!

John -- my Skype is JeremyHorland 

I prefer text to video chat in most cases.

I see the problem with iOS and mobile -- I will investigate this weekend.

As to the custom text, I don't have that attached to the side panel, but I will also investigate.

I suspect Radikal will beat me to it, they are back from their vacations and it's a big holiday week here.

REPOSTED WITH MINOR BUG FIX

Sorry to take so long.

This code snippet is useful for the following purposes, each can be removed :

in the case of a SINGLE item uploaded : place item and close panel

in the case of all designs and images :  close panel and thumbnail previews after choice made

This is no longer dependent on timeout alone, it is now timeout-and-test.  

<script type='text/javascript'>
jQuery( document ).ready(function() {
    
        // click to close uploads and designs pallette with sniffer
        var testuploader = function() {
            if (jQuery("div.fpd-loader-wrapper").css("display") == "none" ) {
                jQuery("div.fpd-thumbnail-preview").remove();
                jQuery("div.fpd-close-stage-off-canvas span.fpd-icon-close").click();
            } else {
                window.setTimeout(testuploader, 200);
            }
            
        };
        
		var testStage = function(){
		
			if  (jQuery( "div.fpd-view-stage").length ) {
				
				// make clicking item in picture chooser close the menu for pictures loaded by default
				jQuery("div.fpd-item picture").click(
					function() {
						//setTimeout(function(){
							window.setTimeout(testuploader, 299);
						//}, 299);
					}
				);
                
                // make clicking item function for uploaded photos and designs added to the pallette
                jQuery('div[data-module="designs"],div[data-context="facebook"],div[data-context="instagram"],div[data-context="upload"]').bind('DOMNodeInserted', function() {
                       setTimeout(function(){
                           jQuery.each(jQuery('div[data-module="designs"],div[data-context="facebook"],div[data-context="instagram"],div[data-context="upload"]').find('picture'), function( i, d ) {
                                if (!jQuery(d).attr("seenPic")) {
                                    jQuery(d).attr("seenPic", "INDEX : " + i).click(function() {
                                    window.setTimeout(testuploader, 299);
                                });
                            }
                        });
					}, 300);
                });
                
				// Disable FancyBox on MAIN image only
				jQuery("a.woocommerce-main-image").removeClass("zoom").removeAttr("data-rel").unbind();

				// Make main item image into clone of start customizing button
				jQuery.each(jQuery("a#fpd-start-customizing-button").data('events'), function() {
					// iterate registered handler of original
					jQuery.each(this, function() {
						//clone function to target a href
						jQuery("a.woocommerce-main-image").bind(this.type, this.handler);
					});
				});
			
				// change position of click to customize button, place under picture
                jQuery("a#fpd-start-customizing-button").appendTo("div.product div.images").
                css("z-index","11");
                
                
                // close window when single upload is seen and placed by 3.0.4 update
                var seenPhotos =  jQuery('div[data-context="upload"]').find('picture').size();
                jQuery('div[data-context="upload"]').bind('DOMNodeInserted', function() {
                        setTimeout(function(){
                                var newSeen = jQuery('div[data-context="upload"]').find('picture').size();
                                if (seenPhotos != newSeen) {
                                    var difSeen = newSeen - seenPhotos;
                                    seenPhotos = newSeen;
                                    if (difSeen == 1) {
                                        // uncomment netx line below version 3.0.4
                                        //jQuery('div[data-context="upload"] picture:last-child').click();
                                        window.setTimeout(testuploader, 299);
                                    }
                                }
						}, 300);
                });
                
                
			} else {
				window.setTimeout(testStage, 200);
			}
			
		};
		
		window.setTimeout(testStage, 200);

});
</script>

This had been working, but stopped in a recent update.

It appears connected to :

Upload Image doesn't close on Android

and

Mobile Problemes with draggable-dialog box since update

--  the event listener for "click" does not appear to be present in the mobile view. 

The pasted javascript calls the "click" function on that X in order to get any and all functionality Radikal put into this slide-hide function.  Often garbage cleaning, ordering, specific show and hide routines... these need to be copied rather than guessed at.

As soon as the click feature is restored to that icon in mobile view, the JS patch above should function.

It is also possible that the developers are about to roll out something similar to the changes we've been discussing here.

@Jeremy - Please forgive my multiple posts.  Don't worry buddy - I've just discovered that this code doesn't play nice with MSPC so I've had to remove it.

On a mobile device (https://www.petshelddear.com/product/pet-memorial-slate-15x20cm/) If I select a background from MSPC and then try to add an image it is not kept within the containment area.

Still a great post though as I'm sure it will prove useful to many until a fix is added in the (hopefully) next update.

It is helpful to have multiple items upload, however our product is far simpler and only needs one.  This has resulted in a two-step process that is confusing in context, as if only one picture is needed, the client sits and waits after selecting it.  Although the interface is expecting that second step of "click here" to add the image from the selection bar to the canvas, the user is not expecting this extra step.

This results in an unfortunate bottleneck for simple or one-image products.

Is there some way to detect when only one image has been uploaded and then add it to the canvas?  Is there a hook by which I can do this in javascript or in jQuery?

We need some way to remove that "extra" step, as this is not a minor issue for simple products.

I agree with what has been said before - the main issue for a webshop is conversion and every obstacle will cost a few customers. This means that a webshop must be as easy as possible to use. Hence, any element that requires a customer to think twice or that is different from expectation and previous experience will cause people to not complete the purchase.

That's why webshop design is such a complex art and involves a lot of a/b testing and tweaking to optimize the purchase experience. The problem is not so much to add more and more features but to actually make using the FPD as user-friendly as possible (as user-friendly as possible). Most customers won't use 20% of the features but will favour a designer that offers a clear interface, easy-to-use tools and solid product preview.

@Radykal - That would be Awesome! Thanks!

Please could you ensure the image selection pane automatically closes once the first image has been added to the stage?

Thanks again!

Thanks @Jeremy.

Some of that made sense, but I'm a little thick when it comes to coding :)

If any of these turn out to be specific issue to my theme please let me know and we'll work something out.

(still interested in hiring you for some custom edits, just waiting on my current developer to finish).

John -

      Delete lines 41-455, functions "Disable FancyBox on MAIN image only", "change position of click to customize button, place under picture", and "change position of click to customize button, place under picture"

I think this is the part that's interfering with MSPC

The one click upload image is what we wanted.. Now how to get ride of * Hover effect " For my purposes I just need the user to mouse over image and see the color ONLY.

No mouse over effect, as that gets buried behind the image load screen.. Screen shot to show what I mean.

In previous versions the mouse over to show color was working with no hover effect.. What css code do I need to implement to get back to that?

Thank you

I agree, the non-closing box for designs, uploads & socials was a show-stopper for almost all test-users.

Hopefully we'll see it fixed in 3.0.4

Hi guys, I'm that simple person you might be talking about :) and I agree.

Are you saying that when selecting a design to go onto the product, the 'Choose from Designs' box should automatically close? This would allow the use to realise that they have in fact added the design rather than not and clicking multiple times.

If so, unfortunately it doesn't look like this change has been made in 3.0.4 :(

If not, I think it needs to happen! Or even with a little flash notice that says 'design added' - something as simple as that would make a massive difference. Can this be done??

Cheers