Bug in the way shop quick view works

2 replies · opened Mar 8, 2018

Ttrmc1973Mar 8, 2018

View the shop page here:
http://preview.themeforest.net/item/canvas-the-multipurpose-html5-template/full_screen_preview/9228123?_ga=2.229065816.550269222.1520470279-651757903.1516138265

Mouse over the girl in the dress and click Quick View.
You can see that the ajax window pops up and behind it the Add to Cart and Quick View overlay disappears (which is good).
Now click the x at the top right to close the lightbox.
You can see that the Add to Cart and Quick View links are back on the image as if you are hovered over them but you aren't. These should not be there for multiple reasons. One, the image is raised up now when it wasn't raised up with the overlay on before clicking quick view. Two, you can move to the other shop items and do the same thing and get in a situation where you have multiple items with the overlay on the page at once. You have to physically hover and then mouse away to get rid of each of them. This problem gets much worse when you have even more products on the page. Please advise.

Thanks,
Travis

SSemicolon WebSTAFFMar 8, 2018

Hello,

This is a Default Functionality of the Magnific Popup Plugin where in the Last Clicked Lightbox Trigger is automatically focused. To fix this, simply find the following code in the js/functions.js File:

if( $lightboxAjaxEl.length > 0 ) {
	$lightboxAjaxEl.magnificPopup({
		type: 'ajax',
		closeBtnInside: false,
		callbacks: {
			ajaxContentAdded: function(mfpResponse) {
				SEMICOLON.widget.loadFlexSlider();
				SEMICOLON.initialize.resizeVideos();
				SEMICOLON.widget.masonryThumbs();
			},
			open: function() {
				$body.addClass('ohidden');
			},
			close: function() {
				$body.removeClass('ohidden');
			}
		}
	});
}

and replace it with:

if( $lightboxAjaxEl.length > 0 ) {
	$lightboxAjaxEl.magnificPopup({
		type: 'ajax',
		closeBtnInside: false,
		autoFocusLast: false,
		callbacks: {
			ajaxContentAdded: function(mfpResponse) {
				SEMICOLON.widget.loadFlexSlider();
				SEMICOLON.initialize.resizeVideos();
				SEMICOLON.widget.masonryThumbs();
			},
			open: function() {
				$body.addClass('ohidden');
			},
			close: function() {
				$body.removeClass('ohidden');
			}
		}
	});
}

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Ttrmc1973Mar 8, 2018

Works great - thanks. I didn't look at the full Magnific Popup documentation.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard