Woocommerce - show secondary image with infinite load

Hi there,

similar issue here raised on that plugin - seems there is an option in the plugin to reinitialize JS scripts:

https://wordpress.org/support/topic/apply-hover-effect-after-infinite-scroll/

Yes, I know about this field. But I need to know what is the function I have to reinitialize in order to switch images.

The guy in that post wrote his own code so he new exactly what to run. But I don't. I need to know the name of the function that is used in GP to paste it in that field.

Aah sorry - it's part of the standard woocommerce plugin using an anonymous function as part of this JS:

woocommerce.min.js

I would think the plugin author should be aware of this as its a default function of woo.

I don't understand. Do you mean that the JS script switching images is a part of woocommerce?

I highly doubt that since woocommerce doesn't show the second image. There is no config option to do that and this is very much theme related. I don't see why it would have a JS doing that.

Yes it's a woocommerce function - this is the exact part of the script where it uses a jQuery hover function to change the secondary images opacity:

if (l(".wc-has-gallery .wc-product-image").hover(function () {
        l(this).find(".secondary-image").css("opacity", "1")
    }, function () {
        l(this).find(".secondary-image").css("opacity", "0")
})

Well look at that. I'm surprised that such code was in woocommerce JS.

However the code you posted didn't work (even after i switched all the "l" to "jQuery") but I wrote my own code that did the trick

let wcImgs = QQ.findAll(".wc-has-gallery .wc-product-image");

if(wcImgs.length){
  wcImgs.forEach(function(img){
    img.addEventListener('mouseenter', function () {
        QQ.findFirst(".secondary-image", this).style.opacity ="1";
    });
    img.addEventListener('mouseout', function () {
        QQ.findFirst(".secondary-image", this).style.opacity = "0";
    });
  })
}

P.S. QQ is a library of helpers that I made for myself. You should change it to document.querySelectorAll etc. in all cases.

Sorry that code wasn't meant to be a solution - its the actual code Woo uses.
But really glad to hear you got it resolved, and thanks for sharing the code.

Hi,

I don't know if I can still reply to an old topic, but here goes nothing...
I run into the same issue and I also need the code that the infinite load plugin has to run when loading a new page.

The code from Krzysztof doesn't work for me (probably because I have no QQ library), but I don't know how to modify the code so it works for me.

Would love to hear any tips to get this to work, since I love the GP theme and want to keep using it!

Kind regards,
Luuc

Hi there,

if you can share a link to the site where we can see the issue we may be able to provide a fix.
I would also suggest asking the infinite load plugin author as the JS being used is part of the woo plugin so they should be supporting.

Hi Luc

Let me modify my code so that it doesn't use the QQ library.

let wcImgs = document.querySelectorAll(".wc-has-gallery .wc-product-image");

if(wcImgs.length){
  wcImgs.forEach(function(img){
    img.addEventListener('mouseenter', function () {
        document.querySelector(".secondary-image", this).style.opacity ="1";
    });
    img.addEventListener('mouseout', function () {
        document.querySelector(".secondary-image", this).style.opacity = "0";
    });
  })
}

It should work fine now

Thanks Krzysztof -- Luuc let us know if that works.

Thanks for all the help. Unfortunately I can't get it to work with that code Krysztof. I tried pasting it in the 'after update' as well as the 'before update' part.

The link is: https://webshop.elohimtest.nl/winkel/

I'll also contact the author of the plugin to see if he can fix it.

Reply from author:

The code from woocommerce can be found in woocommerce.min.js.
Please check the woocommerce.js file – https://github.com/woocommerce/woocommerce/blob/master/assets/js/frontend/woocommerce.js

woocommerce.min.js is the same just everything in single line.

I don’t see there code you provided. The code in the example is code from your theme Javascript file.

We have a field where you can add Javascript code to. Plugin settings page tab Javascript field After Update. You can contact your theme developers and ask them to provide a code to re-initialize events for the images.

Regards,
Dima

As GP uses the standard woocommerce templates and scripts it really is the Plugin authors responsibility to ensure the woo script is re-initialized on load....

Instead of relying on the JS - try this CSS:

.wc-has-gallery .secondary-image:hover {
    opacity: 1 !important;
}