- This topic has 16 replies, 3 voices, and was last updated 4 years, 3 months ago by David.
-
AuthorPosts
-
June 18, 2019 at 4:19 am #933155Krzysztof
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!
June 18, 2019 at 4:43 am #933175DavidStaffCustomer SupportHi 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/
June 18, 2019 at 4:54 am #933180KrzysztofYes, 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.
June 18, 2019 at 5:01 am #933184DavidStaffCustomer SupportAah 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.
June 18, 2019 at 6:13 am #933268KrzysztofI 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.
June 18, 2019 at 6:31 am #933294DavidStaffCustomer SupportYes 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") })
June 19, 2019 at 12:32 am #934191KrzysztofWell 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.
June 19, 2019 at 4:53 am #934414DavidStaffCustomer SupportSorry 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.December 1, 2019 at 7:22 am #1087893LuucHi,
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,
LuucDecember 1, 2019 at 1:42 pm #1088467DavidStaffCustomer SupportHi 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.December 2, 2019 at 12:32 am #1089007KrzysztofHi 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
December 2, 2019 at 3:59 am #1089297DavidStaffCustomer SupportThanks Krzysztof — Luuc let us know if that works.
December 3, 2019 at 11:39 pm #1092690LuucThanks 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.
December 4, 2019 at 5:51 am #1092996LuucReply 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.jswoocommerce.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,
DimaDecember 4, 2019 at 10:36 am #1093510DavidStaffCustomer SupportAs 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; }
-
AuthorPosts
- You must be logged in to reply to this topic.