0006617: Pictureswipe overlay not closing properly on article details page - OXID eShop bugtrack

ID	Project	Category	View Status	Date Submitted	Last Update

0006617	Flow theme	Theme	public	2017-04-05 17:20	2017-04-06 10:58

Reporter	Kvist	Assigned To
Priority	normal	Severity	major	Reproducibility	always
Status	closed	Resolution	duplicate
Product Version	1.0.0

Summary	0006617: Pictureswipe overlay not closing properly on article details page
Description	As already stated here, http://forum.oxid-esales.com/showthread.php?t=40322, when selecting a variant and opening the zoom for an article picture on the details page and closing it, the "un-zoomed" image doesn't get reset properly, as the pictureswipe overlay does not get closed properly.
Steps To Reproduce	1. Open an article details page 2. Click on an article image to open the pictureswipe overlay 3. Close the overlay by clicking the close button, somewhere else or scroll down
Additional Information	The solution is almost too simple to believe, but believe me, it's true. I've spent five full hours tracing this issue and I think I know what I'm talking about. Please read this carefully as there is a lot going on... One note ahead: The only reason it works in the Demo Shop is because the JavaScript there is simply broken. If you look in a browser inspector, you will see an error gets thrown when selecting a variant, complaining oxTag is not defined. You will learn why this leads to the whole thing to work soon. Now for the reason this issue occurs in the first place: In the file "application/views/flow/tpl/page/details/inc/productmain.tpl", in the block "details_productmain_zoom", the two photoswipe scripts are added via an oxscript included. Right after, we have an event handler on document.ready which executes "Flow.initDetailsEvents". In this function, Flow.setPhotoSwipe is called, which sets an event handler on the zoom picture. This event handler initializes the photoswipe container on click. When photoswipe gets initialized, the framework saves the current class of the overlay, which is "pswp", into a variable "_initialClass". When the overlay is destroyed, the contents of this variable gets re-applied to the overlay. Now what I found is, that this event handler gets set twice, which leads to photoswipe getting initialized twice. This means the following happens: * On the first initializiation, everything is fine, the class "pswp" gets saved into "_initialClass" and THEN, photoswipe starts to add all the other classes to the overlay. * The second initialization now takes the FULL class of the overlay with all the "--visible" and stuff, and saves it to "_initialClass". Basically, we have have two instances of this variable for only one element. * When you destroy the overlay, the first destroy happens and saves "pswp" back to the overlay. Then, the second destroy happens and saves the FULL class to the overlay leaving it right in the middle of the screen. Now, why this whole initialization and setting of the event handler happens twice is because when the variant selection happens, the responsible part in oxvarselect.min.js first adds the script returned by oxscript add to the page and then checks if a "WidgetHandler" exists. If this is not the case, the scripts returned by oxscript add get evaluated directly, which sets the event handler a second time. Now as I finally found out the source of this behavior, I was looking for this WidgetHandler and found its definition in "out/azure/src/js/widgets/oxwidgetshandler.js", but more strangely this script gets never included. When copying it to the Flow theme and including it in base.tpl, suddenly everything worked like a charm. I don't know if base.tpl is the right place to include this script, but it seemed like it is. Neither do I know if you simply forgot to include this script at all, because it isn't even included in Azure. I'd really like to know what went wrong there, but I hope this helps you fix this issue. Please have me know what's the intention of checking for a class that never exists, as this could have broken a lot more stuff. Just if you want to know: Again to the reason why it works in the demo shop... The "standard" initialization via the template always gets executed, because it's done by the browser but after this, a JavaScript error occurs (this could be by missing oxTags as in the demo shop or any other JS error), preventing the subsequent evaluation of the script and thus the second setting of the event handler performing the initializiation. Long story short to fix: 1. Copy "out/azure/src/js/widgets/oxwidgetshandler.js" to your theme 2. Include it in your "application/[theme]/tpl/layout/base.tpl" somewhere after jQuery 3. Enjoy working Photoswipe!
Tags	No tags attached.