Hinzufügen von eindeutigen Werbebotschaften zwischen bestimmten Produkten, während Isotope / Infinite Scroll verwendet wird

Ich benutze derzeit WooCommerce, um eine Liste von Produkten anzuzeigen, indem ich die folgende Schleife benutze, um das Post-Type “Produkt” anzuzeigen und die Seitennummerierung zu ermöglichen, so dass ich mit Infinite Scroll alle verfügbaren Produkte durchsuchen kann.

Das Problem, das ich habe, ist, dass ich benutzerdefinierte Marketing-Nachrichten zwischen bestimmten Produkten innerhalb der Schleife injizieren möchte.

Ich habe folgendes versucht: http://dancameron.org/code/adding-content-betws-posts-wordpress-loop/ das funktioniert, aber es wiederholt die gleiche eindeutige Nachricht alle x Beiträge, wenn ich es nur einmal anzeigen möchte .

Ich habe auch die Idee, diese Nachrichten mit jQuery mit dem folgenden Beispiel einzufügen:

$('.item:nth-child(2)').before("
<img src='https://wordpress.stackexchange.com/questions/177722/adding-unique-marketing-messages-between-certain-products-whilst-using-isotope-i//img/dressup-slider.jpg' />
");

Wenn ich jedoch das n-te Kind auf eine höhere Zahl einstelle, dann die Menge der angezeigten Produkte und die Seite blättere, wird nichts angezeigt.

Jeder Rat oder jede Richtung in die richtige Richtung wird sehr geschätzt

Die Schleife, die ich verwende:

  'product', 'paged' => $paged, 'posts_per_page' => 15 ) ); while ( $loop->have_posts() ) : $loop->the_post() ?>      

Isotope / Infinite Scroll-Anruf

 var $container = $('.isotope'); var $finishedMsg = 'No more posts to load.'; var $msgText = 'Loading more posts...'; var $loadingImg = 'images/spinner.gif'; $container.imagesLoaded(function(){ $container.isotope({ itemSelector: '.item', //transformsEnabled: false, //animationEngine: 'css', masonry: { columnWidth: '.grid-sizer', gutter: 10 } }); }); $container.infinitescroll({ navSelector : '#page-nav', nextSelector : '#page-nav a', itemSelector : '.item', loading: { finishedMsg: $finishedMsg, img: $loadingImg } }, function(newElements) { var $newElems = $(newElements).css({opacity: 0}); $newElems.imagesLoaded(function(){ $newElems.animate({opacity: 1}); $container.isotope('appended', $newElems, true); WireEvents(); }); } ); 

Solutions Collecting From Web of "Hinzufügen von eindeutigen Werbebotschaften zwischen bestimmten Produkten, während Isotope / Infinite Scroll verwendet wird"

Zwei Gedanken:

1) Hat das Isotop keine Methode, um “Zeug” hinzuzufügen?

2) Was ist mit dem Hinzufügen eines oder mehrerer benutzerdefinierter Felder zum Produkt und dann zum Erstellen eines Elements vor / nach diesem Produkt?

3) Anstatt die Nachricht über die Schleife zu injizieren, erstellen Sie einfach das div / Wrapped mit etwas – ID oder class – und verwenden Sie dann jQuery, um diese mit etwas Zufälligem zu füllen.