Problem with YITH Wishlist icon in impreza grid for later loaded items

Hi Thomas

I suppose that you’re using AJAX loading for your ATW buttons; that is totally fine, but if your theme (or anyone) loads new products in the page via JS, you’ll need an explicit integration, in order to trigger ATW loading for the new elements

Specifically, I’d suggest you to get back to your theme’s developers and refer to them the following info:

You can simply re-init wishlist by executing the following JS code
$(document).trigger( 'yith_wcwl_init' );
once infinite loading is done, and has loaded new elements in the page.
You could add this code directly in your JS code, if you want, or you could provide us with a trigger to use to execute our code in the rigth moment

Hey There,

Impreza gave me this code:

<script>
jQuery(document).ajaxSuccess(function(event, xhr, settings) {
if ( settings.data.indexOf('us_ajax_grid') !== -1) {
    setTimeout(function(){
        jQuery(document).trigger( 'yith_wcwl_init' );
    },50);
}
});
</script>

It works, but only for a couple more products. At about 80 products it stops working.

Any idea?

Best regards

Hi again

I tested the category page you originally posted, and every product, including ones loaded after infinite scrolling, appears to have an ATW button
I scrolled till the end of the page, and I couldn’t replicate

Anyway, what’s strange in the code that thems’s developers sent you is that they init the ATW button after a given timout from AJAX call successfull conclusion
This makes me think that it is not the approriate moment to re-init wishlsit, and they’re waiting for something else to happen, before doing re-init (maybe DOM processing and product addition?)

Now, 50ms could be enough to load all new products in the page, but this really depends on your system (and with that I mean PC on which your browser is running, not your server!)
So a better choice would be to have a proper trigger executed once all products are added to the page

Note, anyway, that I might be wrong, and you definitely need to discuss this with theme’s develoepers

If you test it here. you can see, that the ATW buttons won’t be loaded at a certan depth:

https://mhp.togemaxx.de/neu

here is the screenshot of where it happens:

• This reply was modified 3 years, 6 months ago by togemaxxmedia.

Sorry, they updated the code to the following

<script>
jQuery(document).on('resize', function(){
	jQuery(document).trigger( 'yith_wcwl_init' );
})
</script>

but the result was the same for both.

And with this information, and the following quote they completely set you responsible for this.

Please ask the developer of the plugin to investigate the issue. Note that we do not provide support for third-party plugins that aren’t to Impreza.

• This reply was modified 3 years, 6 months ago by togemaxxmedia.

Hi again

I just checked your site, and indeed it seems my original assumptions where wrong
Re-init process is working smoothly on every new set of products loaded; anyway, for some reason just a subset of ATW buttons are loaded

I assume that we’re hitting a cap caused by the high amount of data posted to the server when page contains a lot of products
A good solution would be to just re-init products that have been added to the page by last loading event
Here a modified version of the code that theme’s support passed to you

jQuery(document).ajaxSuccess(function(event, xhr, settings) {
if ( settings.data.indexOf('us_ajax_grid') !== -1) {
    setTimeout(function(){
        jQuery(document).trigger( 'yith_infs_added_elem', [ jQuery(document).find( '.product' ).slice( -12 ) ] );
    },50);
}
});

Please, replace previous code and let me know if this helps

Hey there,

Thanks for the code, it works but not quite optimal. Because of these 2 Propblems:

1. The latest loaded couple of products get the Buttons, just if the next couple is Trigered to load. That looks a bit weird on long produkt lists
2. The bigger problem is, that your code completely kills the Impreza carousel. You can find brands and Products on the homepage, both should be carousels (not the one right before the footer)

Is there another solution?

Thanks and best regards

Hi again

so, let’s start with second problem
I’ve loaded your homepage, I can see the code in place, but I have no problem with the carousels: I cannot find any js error in console, an slider appears to be workign just fine
Refer to this screencast of my test

Regarding the first issue, instead, my best guess is that the code is runnign to early, before products are added to the page, so it ends up re-initing last products already in the page
This is just an idea, so I’m not sure if next suggestion will have any effect; anyway I’d ask you to kindly tweak timeout time, to see if this helps

To give you an example, you could try to increase it so 150ms, like this

jQuery(document).ajaxSuccess(function(event, xhr, settings) {
if ( settings.data.indexOf('us_ajax_grid') !== -1) {
    setTimeout(function(){
        jQuery(document).trigger( 'yith_infs_added_elem', [ jQuery(document).find( '.product' ).slice( -12 ) ] );
    },150);
}
});

Or even more (delay won’t be much noticable anyway, until we’re in this order of magnitude)
Let me know if this helps

Hi,

I have the same problem. I tried plugin with Restoration and Drile themes. The button does not work after loading products via the “Load more” button or with the infinite scrolling.

I deactivated all plugins but the problem persisted.

I also tried these custom codes, no response.

Website

Kind regards