Two Steps where there were one
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?
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>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.
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.
@ 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).
@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.
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.
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.
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