5
Ich habe ein unangenehmes Problem mit der Integration der unendlichen Scroll-Plugin in Wordpress mit dem Thema, das mit Mauerwerk ist.Infinite Scroll mit Mauerwerk in Woocommerce funktioniert nicht
ich die neueste Version von unendlichem Scroll habe, 2.6.2, und ich habe diesen Code in dem Callback-Abschnitt des Plugins hinzugefügt:
// hide new items while they are loading
var $newElems = jQuery(newElements).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry('appended', $newElems, true);
});
aber es funktioniert nicht, fügt es die Opazität auf den neuen Elemente, aber es fügt nicht die Positionen usw. hinzu, also nicht ganz funktioniert; Die neuen Artikel werden oben auf der Seite über die alten Produkte angezeigt.
Script wie folgt aussieht:
/* <![CDATA[/
var infinite_scroll = "{\"loading\":{\"msgText\":\"Loading...<\\/em>\",\"finishedMsg\":\"No additional products.<\\/em>\",\"img\":\"http:\\/\\/www.test.com\\\/wp-content\\\/plugins\\\/infinite-scroll\\\/img\\\/ajax-loader.gif\"},\"nextSelector\":\".next\",\"navSelector\":\".woo-pagination\",\"itemSelector\":\"li.product\",\"contentSelector\":\"ul.products\",\"debug\":false,\"behavior\":\"\",\"callback\":\"\\\/\\\/ hide new items while they are loading\r\nvar $newElems = jQuery(newElements).css({ opacity: 0 });\r\n\\/\\/ ensure that images load before adding to masonry layout\r\n$newElems.imagesLoaded(function(){\r\n\\/\\/ show elems now they're ready\r\n$newElems.animate({ opacity: 1 });\r\n$container.masonry('appended', $newElems, true);\r\n});\"}";
/]]> */
das Mauerwerk wie folgt aussieht:
// Only fire masonry if the window is an appropriate size and images are loaded
jQuery(function(){
var $container = jQuery('ul.products');
$container.imagesLoaded(function(){
if (jQuery(window).width() > 767) {
$container.masonry({
itemSelector : 'li.product',
columnWidth : 295,
isFitWidth: true,
gutterWidth : 2
});
}
});
});