Desplazamiento infinito con mampostería en woocommerce no funciona

2 minutos de lectura

avatar de usuario
Liza

Me enfrento a un problema desagradable al integrar el complemento de desplazamiento infinito en WordPress con el tema que usa mampostería.

Tengo la última versión de desplazamiento infinito, 2.6.2, y he agregado este código en la sección de devolución de llamada del complemento:

// 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 );
});

pero no funciona, agrega la opacidad a los nuevos elementos pero no agrega las posiciones, etc., por lo que no funciona del todo; los nuevos artículos van en la parte superior de la página sobre los productos antiguos.

El guión se parece a:

/* <![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});\"}";
/ ]]> */

la mampostería se parece a:

// 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
            });
        }
    });
});

El plugin de scroll infinito para wordpress: Aquí está el enlace tiene una opción llamada behavior donde puedes elegir el Albañileríay, por supuesto, debe elegir los selectores correctos y luego funcionará a la perfección, para ver más opciones de desarrollo a las que puede acceder el sitio web de los desarrolladores

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad