Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 6, 2020 at 9:39 am #1210265
    adplusdesign

    Hello,
    I’ve used the jQuery solution to move the sale badge from the forum post: https://kriesi.at/support/topic/sale-badge-position/.

    // custom script
add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script>
(function($){
	function h() {
	$('#top .product').each(function() {
		var onsale = $(this).find('.onsale'),
			thumb = $(this).find('.thumbnail_container');

		onsale.appendTo(thumb);
	});
	}

	h();
})(jQuery);
</script>
<?php
}

    It works fine until I’ve added YITH Infinite scrolling plugin. How to modify this script that it will work then the products will be loaded throw ajax?

    May 10, 2020 at 5:33 am #1211582
    Mike

    Hey adplusdesign,
    Sorry for the late reply, please include a link to your page so we can investigate.

    Best regards,
    Mike

    June 3, 2020 at 11:11 am #1219004
    adplusdesign

    Hello,
    Sorry I didn’t see your reply.
    How it should be: https://www.floristshop.ee/sale/
    The page is https://www.floristshop.ee/tootekategooria/floristshop/tooted/materjalid/ and you need to scroll down quite a bit to find the product with sales badge.

    June 7, 2020 at 2:38 am #1220094
    Mike

    Hi,
    Sorry for the late reply and thanks for the links, on your page that is “correct” I see this:
    2020-06-06_201355.png
    Is this really correct?
    I didn’t find this on your /materjalid/ page, but when I re-read your question and see that you are using “YITH Infinite scrolling plugin” which is lazy loading the product grid which may not work with the solution you have used because the script above runs on page load but your plugin adds more items to the grid without loading the page or giving a trigger, so I don’t believe this will work for you.

    Best regards,
    Mike

    June 15, 2020 at 10:00 am #1222576
    adplusdesign

    Hello,
    In your screenshot the sale badge is correct (how the designer wants it to look like).
    In my first post, I’ve asked how to modify the javascript that it will work on lazy-loaded items.
    Right now the better page to look at how the lazy-loaded products sales badge looks like https://www.floristshop.ee/tootekategooria/floristshop/tooted/toovahendid/. You have to scroll down.
    Screenshot:
    https://drive.google.com/file/d/1z0I_bv-gRaRZ_smiaDrmbgYVilvuDwCy/view?usp=sharing

    • This reply was modified 4 years, 4 months ago by adplusdesign.
    June 15, 2020 at 2:17 pm #1222652
    Mike

    Hi,
    Thanks for the screenshot and the link, so if you disable the “YITH Infinite scrolling plugin” then the page loads correctly?
    Typically to exclude media from lazy loading you would use the class skip-lazy and the attribute data-skip-lazy but I can’t find this in their documentation so I’m not sure if these are the exact terms to add to your grid to disable on the page. Try asking the “YITH Infinite scrolling” support if these are the correct terms to use.
    The script above runs on page load and I don’t see any triggers from “YITH Infinite scrolling” when it adds more items to the grid to fire the script, so disabling it on the page is probably your best option.

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.