Two Steps where there were one

Posted over 6 years by Jeremy Aaron Horland

Post a topic
Implemented
J
Jeremy Aaron Horland

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?


3 Votes


40 Comments

Sorted by
J

Jason posted over 6 years

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


Attachments (1)

0 Votes

J

John Reimann posted over 6 years

Sorry for such a big delay in reply. I've been working with other parts of the website (kinda hoping this will be sorted in next update), as fiddling with code makes me a little nervous. I'll give it a little longer and if it's not addressed I'll have a play based on the advice you've given above  Thanks again.

0 Votes

J

Jeremy Aaron Horland posted over 6 years

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

0 Votes

J

John Reimann posted over 6 years

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).



0 Votes

J

Jeremy Aaron Horland posted over 6 years

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.

0 Votes

J

Jeremy Aaron Horland posted over 6 years

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.

0 Votes

J

John Reimann posted over 6 years

@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.

0 Votes

J

John Reimann posted over 6 years

@ Jeremy - Just Realised: It's quite possible I didn't implement it correctly but although your code works fine on desktop, it's not working on mobile devices (I tried Ipad and Iphone).

0 Votes

J

John Reimann posted over 6 years

Hi @Jeremy,


I just pasted your code - Worked a Treat with images!


Is there any way I replicate the function for the "custom Text" upload zone? 

So that once user has typed their text and clicked "Add Text" the side panel closes.

And if you're really feeling generous - If they click on that text a 2nd time the side panel re-opens so they can re-enter/edit that text block.


Thanks buddy.


0 Votes

J

John Reimann posted over 6 years

Hi Jeremy,


Sorry for delay in reply (been really busy).

That's awesome! Thanks so much.


re: skype - That would be great. I have a developer working on some other site functions at the moment, but once that finally gets done (and i know what budget I have left) perhaps I could give you shout.


Thanks again.

0 Votes

J

Jeremy Aaron Horland posted over 6 years

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>

 


0 Votes

J

Jeremy Aaron Horland posted over 6 years

John -- my Skype is JeremyHorland 


I prefer text to video chat in most cases.

0 Votes

J

John Reimann posted over 6 years

@Radykal - Fantastic - Thank you!

0 Votes

rady kal

rady kal posted over 6 years Admin

I will also add an option that will handle the behavior, as soon as an element is added the dialog closes. That means the ones who need this feature can turn it off/on.

0 Votes

J

John Reimann posted over 6 years

@Jeremy - Thanks buddy. Perhaps we can have a chat on Skype and go from there? And yes - If you could paste your code here that would be great. thanks

0 Votes

J

John Reimann posted over 6 years

@Radykal - I've just installed latest update.


Although the 1st image is added to the stage, the selection pane remains open.

On a mobile device it is not clear how to close this pane, the "X" doesn't do anything. I eventually realised you have to swipe it.

Is it possible to make this pane close automatically after adding picture?

0 Votes

J

Jeremy Aaron Horland posted over 6 years

John, I don't know the rules about work and contact on this forum, but I would be glad to consult for and or work for you.


I would also be glad to release the jQuery / javascript for you to copy and paste in a script plug-in.


Ess --  tho I don't use two photos in -this- one, I intend to use multiple photos for the "class picture" part of this project in  the next phase.


Unfortunately, I cannot access canvas objects directly yet, as it is harder to find them in DOM inspectors. If I could, I would recommend a way to trigger the uploader via javascript and add a button.


Radikal seems committed to making this product better on a regular schedule. Make sure they understand your dilemma and they will probably see the need to fix it.



0 Votes

E

Ess Green posted over 6 years

Hi Jeremy,


Yep works for me too, awesome! But you cannot add 2 images to the product so why are you bothered about the multiple upload?


To be clearer - when I add an image to the cake, I can't add another. There doesn't seem to be a way to get back to my uploaded images without deleting the one currently on the cake and then clicking 'Click here to add image +'. Is that by choice?


0 Votes

J

John Reimann posted over 6 years

Hi Jeremy,


Great Job - It seems to be working fine for me :)


(Don't suppose you're available for customising my FPD install?)

0 Votes

J

Jeremy Aaron Horland posted over 6 years

Ess, John, et al


I have a javascript patch for this, which requires "CSS & JAVASCRIPT TOOLKIT" or some other plug in


if you could help me test, it is available at :   https://www.youcookie.com/product/boy-scouts-of-america-large-portrait-cake-photo-topper/


if you would like I can paste it here.


As I am unable to determine if an uploaded item is solo or first in list (yet) it inserts the first uploaded item in all cases.   I want this to switch to the behavior above, and may get there on the next round of javascript patching.


The timeouts are no longer "ugly guesses" but instead test for the "loading" state and wait until images are loaded in designer platen.

0 Votes

E

Ess Green posted over 6 years

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

0 Votes

J

Jeremy Aaron Horland posted over 6 years

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




0 Votes

J

John Reimann posted over 6 years

@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!

0 Votes

A

Alexander Moritz posted over 6 years

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.

0 Votes

J

Jeremy Aaron Horland posted over 6 years

I'd have to agree, the closing or hiding of the panel is a vital step, it needs to close after someone has placed an item, either a design, or a photo uploaded, or a social photo...    I'd say this :


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

in the case of multiple items :  close panel after choice made

in the case of designs and social images :  close panel after choice made


   -- I am already doing this with "forced" javascript hooks, but I don't like depending on timeout-and-sniff javascript.


Anyone else agree?

0 Votes

Login or Sign up to post a comment