[Resolved] Woocommerce – show secondary image with infinite load

Home Forums Support [Resolved] Woocommerce – show secondary image with infinite load

Home Forums Support Woocommerce – show secondary image with infinite load

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #933155
    Krzysztof

    Hi,

    I’m using GP Premium with “Load More Products for WooCommerce” – a plugin by BoRocket. I also have enabled to display secondary product image on hover on category pages. The problem is that it doesn’t work on dynamically added content.

    Can you tell me please what JS function do I have to run to enable switching images?

    I see in the code that the images are loaded correctly so I just need to have them switch.

    Thank you and have a nice day!

    #933175
    David
    Staff
    Customer Support

    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/

    #933180
    Krzysztof

    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.

    #933184
    David
    Staff
    Customer Support

    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.

    #933268
    Krzysztof

    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.

    #933294
    David
    Staff
    Customer Support

    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")
    })
    #934191
    Krzysztof

    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.

    #934414
    David
    Staff
    Customer Support

    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.

    #1087893
    Luuc

    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

    #1088467
    David
    Staff
    Customer Support

    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.

    #1089007
    Krzysztof

    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

    #1089297
    David
    Staff
    Customer Support

    Thanks Krzysztof — Luuc let us know if that works.

    #1092690
    Luuc

    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.

    #1092996
    Luuc

    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

    #1093510
    David
    Staff
    Customer Support

    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;
    }
Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.