Quickview on Thumbnail Click (Uplift)

[calebweeks]

Hi Swift Team,

Thank you for Uplift and all the frameworks, design and care behind it!

Question: Would it be possible to have Quickview launch when clicking on a product thumbnail in the loop?

I attempted it using David’s code from this forum topic (Quickview on thumbnail click) but was unable at first to get it to work since it was officially an Atelier topic.

I realize this is quite a bit out of the normal scope of support so I totally understand if you need to decline it! But if, for some reason, David or someone might be up for it, why, we’d use it right away (and with loads of gratitude)! 🙂

Thanks so much for having a place to contact you guys and for such kind support when/as able!

[David Martin – Support]

That code will only work if is the homepage:

jQuery(document).ready(function() {
    if ( jQuery("body").hasClass("home") ) {
        // Remove product link            
        jQuery("ul.products li.product a").removeAttr('href');
        // For each product that is clicked, simulate QuickView button click
         jQuery('ul.products').each(function(i, li) {
            jQuery("ul.products li.product a").live( "click", function() {
                jQuery(this).parent().find(".jckqvBtn").trigger( "click" );
            });
        });
    }
});

What is your shop page?

– David.

[calebweeks]

Thanks for the reply, David – that totally worked!

I swapped .hasClass("home") with the Page ID (in my case .hasClass("page-id-890") and it totally worked.

Thank you guys so much!

[calebweeks]

Actually, David, it had one quirk: it also disabled the “Product Title” (underneath the image) from linking to the post.

In a perfect world, clicking on the image/thumbnail would launch Quickview but clicking on the Title would still allow the visitor to visit the actual product page.

I am looking at the code but wanted you to know in case my previous enthusiastic “that did the trick!” message reaches you quickly.

If this isn’t possible, I understand, and thank you again either way!

[calebweeks]

Okay – it’s working (your jQuery code was so easy to read/understand with the comments – thank you for doing that!)

The one adjustmnet I made was to just target the image link itslef and leave the others active.

That was on Line 4 where I specified the class (in this case product-link) for the <a> tag.

Line 4 then became: jQuery("ul.products li.product a.product-link").removeAttr('href');

Thank you again, David, for taking the time to help – it helped so much!

[David Martin – Support]

Glad you were able to work with that, pleased you got it working on your site!

Thanks for reporting that back for other people also.

Cheers,
David.

[calebweeks]

Hi again Swift Team,

Would you have any insight, David, on how to do this in the jQuery with only the desktop?

The PreOrder Button on the image hover doesn’t seem to work on Mobile which makes me think we’ll have to load each item (individual product page) for mobile visitors – would you guys be able to confirm?

Thanks again for all your help and I definitely realize this is out of the scope of normal theme support so if you need to decline, I completely understand. Thanks guys!

[calebweeks]

Hi again guys – just an update that I think it is a simple CSS mistake.

Currently the desktop styles for #jckqv_images_wrap have it with a width: 50%; and then the same #jckqv_summary at 50%. Those rules should target only the Quickview on desktop using @media queries, etc. i.e. @media (min-width: 1020px) {#jckqv_images_wrap {width: 100%;}}

I think that would protect the already included CSS that is targeting the mobile version of the Quickview, etc.

I hope that makes sense! 🙂

Thanks guys!

[calebweeks]

(And I fixed it temporarily with this:

/*WooCommerce Quickview - mobile*/
@media (max-width: 1020px) {
	#jckqv #jckqv_summary, #jckqv #jckqv_images_wrap {
		width: 100%;
	}
}

[Mohammad – SUPPORT]

Hi,
I am glad that you managed to resolve the issue.
Thanks
Mohammad