Wie bekomme ich jetpacks unendliche Scroll zur Arbeit mit Woocommerce?

Ich versuche, Jetpkacks unendliche Scrollfunktion mit der WooCommerce-Produktarchivvorlage zu kombinieren.

Ich habe nach der Installation von Jetpack den folgenden Code zu meinem Thema hinzugefügt, und ich sehe die sticky footer, die angezeigt wird, wenn infinite scroll aktiviert ist, und ich sehe das Laden von sieben Produkten anstelle der normalen Ausgabe, was mich zu der unendlichen Scroll führt function wird ausgetriggers:

function mytheme_infinite_scroll_init() { add_theme_support( 'infinite-scroll', array( 'container' => 'content', 'render' => 'mytheme_infinite_scroll_render', 'footer' => 'wrapper', ) ); } add_action( 'init', 'mytheme_infinite_scroll_init' ); function mytheme_infinite_scroll_render() { //get_template_part( 'loop' ); wc_get_template_part( 'content', 'product' ); } 

Die normalen Online-Tutorials sagen zu benutzen

 get_template_part('loop'); 

innerhalb der Renderfunktion, um unendliche Scroll-Arbeit zu haben. Aber da ich versuche, dies nicht für normale Posts zu tun, sondern speziell für WooCommerce, /woocommerce/templates ich in die Datei archive-template.php in /woocommerce/templates und sehe, was ich davon /woocommerce/templates dass sie diesen Produktarchivteil von anzeigen Die Seite:

    

Wenn ich diese Datei anschaue, sehe ich:

 wc_get_template_part( 'content', 'product' ); 

Wenn ich das also in meine unendliche Scroll-Renderfunktion einfüge:

 function mytheme_infinite_scroll_render() { wc_get_template_part( 'content', 'product' ); } 

Ich bekomme es immer noch nicht zur Arbeit.

Interessanterweise, wenn ich in /woocommerce/templates/archive-product.php und den wc_get_template_part( 'content', 'product' ); Teil der Datei, sehe ich das Unendlich-Scroll-Loader-Symbol. Aber natürlich sind keine Produkte seit diesem Teil auskommentiert.

Ich schreibe diese Frage, um zu sehen, ob jemand eine Idee davon hat, was ich hier vermisse. Ich sehe die klebrige Fußzeile, also weiß ich, dass diese unendliche Schriftrolle abfeuert, aber ich denke, mein Problem ist herauszufinden, welche Codezeile ich verwenden soll

Solutions Collecting From Web of "Wie bekomme ich jetpacks unendliche Scroll zur Arbeit mit Woocommerce?"

Das Problem liegt im 'container' => 'content' .

Der container Parameter ist das corestück des Hinzufügens von endlosem Bildlauf zu Ihrem Design: Er gibt die ID des HTML-Elements an, zu dem infinite scroll weitere Posts hinzufügen soll.

Sie müssen eine ID (zum Beispiel: product-wrapper ) zum product-wrapper Wrapping-Element hinzufügen, das ein neuer Wert für den container Parameter sein wird.

'container' => 'product-wrapper'

Dieses Wrapping-Element ist

    , das in der woocommerce/templates/loop/loop-start.php wird. Fügen Sie also einfach eine ID hinzu

      .

      Dies bedeutet, dass Sie diese Datei bearbeiten müssen. Best Practice dafür ist, Woocommerce-Ordner zum Stammverzeichnis Ihres Themas hinzuzufügen und jede Datei, die Sie bearbeiten müssen, aus dem woocommerce/templates Ordner zu übernehmen. Diese Methode überschreibt die Woocommerce-Standarddatei.

      woocommerce/templates Sie darauf, den Dateipfad genau wie in woocommerce/templates zu verfolgen, in Ihrem Fall wird es woocommerce/loop/loop-start.php innerhalb Ihres Theme-Stammordners sein. Der Pfad ist im Prinzip der gleiche, außer dass templates in Ihrem Themenpfad nicht enthalten sind.

      Diese Methode schützt die Datei davor, von Woocommerce Update überschrieben zu werden, und Sie haben einen Überblick über Dateien, die Sie in Woocommerce bearbeitet haben.

      Ihre function sollte also so aussehen:

       function mytheme_infinite_scroll_init() { add_theme_support( 'infinite-scroll', array( 'container' => 'product-wrapper', 'render' => 'mytheme_infinite_scroll_render', 'footer' => 'wrapper', ) ); } 

      Diesen Teil hast du richtig gemacht: wc_get_template_part( 'content', 'product' ); Das wird Ihnen eine Liste von Produkten aus der Produktschleife geben.

      Es gibt eine detaillierte Erklärung zu jedem Parameter von Infinite Scroll hier: https://jetpack.com/support/infinite-scroll/

      Hoffe das hilft