Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WooCommerce

Erstellen Sie ein Produktarchiv mit Registerkarten für Ihren WooCommerce Store

by
Length:LongLanguages:

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

In diesem Tutorial erfahren Sie, wie Sie Ihren WooCommerce-Shop ein wenig stilvoller gestalten, indem Sie das Produktarchiv mit Registerkarten organisieren. Wir erstellen Registerkarten mit einem mehrspaltigen Layout, einem mehrzeiligen Karussell und einem Rasterlayout.

Was werden wir schaffen

In den nächsten Schritten werden wir ein WordPress-Plugin erstellen, in dem wir die erforderlichen Shortcodes einrichten. Wenn Sie Ihr WooCommerce-Produktarchiv weiterentwickeln möchten, können Sie es in einen Gutenberg-Block konvertieren, mit Elementor als Widget verwenden oder in Visual Composer integrieren.

Dieses Produktarchiv mit Registerkarten eignet sich perfekt für die Anzeige der neuesten, vorgestellten, verkauften und meistverkauften Produkte wie folgt:

tabbed product archive in woocommerce
Unser Produktarchiv mit Registerkarten und Karussell -Steuerelementen

Also lasst uns anfangen!

1. Erstellung von einem WordPress-Plugin

Erstellen Sie auf Ihrer WordPress-Site unter wp-content/plugins einen Ordner mit dem Namen "woocommerce-products" (möglicherweise nicht der ursprünglichste Name) und erstellen Sie dann in diesem Ordner eine PHP-Datei mit demselben Namen. Öffnen Sie die Datei und fügen Sie den folgenden Code ein (ändern Sie die Details entsprechend Ihren eigenen):

Hier haben wir lediglich unseren Plugin-Namen definiert und einige Meta-Informationen bereitgestellt.

Enqueue-Skripte und -Stile

Für unser WooCommerce-Produktarchiv-Plugin müssen wir als Nächstes die erforderlichen Skripte und Stile in die Queue stellen. Fügen Sie den folgenden Codeausschnitt hinzu:

Zunächst haben wir eine grundlegende CSS-Datei hinzugefügt, um unsere Stile zu speichern. Als nächstes haben wir das eingebaute imageLoaded-Plugin (das mit dem WordPress-Kern geliefert wird) geladen. Um das Karussell zu erstellen, verwenden wir das äußerst beliebte jQuery-Plugin owlCarousel. Und natürlich die main js file.

Hinweis: Kontrollieren Sie, dass diese Dateien Ihrem Plugin-Ordner in den entsprechenden Unterordnern hinzugefügt werden.

Weitere Informationen zur Erstellung von WordPress-Plugins und Shortcodes oder weitere Informationen zur Verwendung von owl.js finden Sie in den empfohlenen Tutorials zu Tuts+:

2. Erstellen Sie einen Tab-Shortcode

In diesem Schritt erstellen wir einen Tab-Shortcode. Es wird tatsächlich aus zwei Shortcodes bestehen; den übergeordneten Registerkartencontainer und dann die untergeordneten Registerkartenelemente. Fügen Sie für den ersten übergeordneten Container diesen Code zur PHP-Datei hinzu:

Dieser Shortcode fordert keine Attribute, aber es wird nur die Tab-Elemente darin eingeschlossen.

Wenn Sie von Tab-Elementen sprechen, fügen Sie als Nächstes den folgenden Code hinzu, um Child Tab-Element zu erstellen:

Dieser Shortcode hat zwei Attribute; den Titel und den aktiven Anzeiger, falls Sie die Zielregisterkarte beim ersten Laden aktivieren möchten.

Bei Verwendung im WordPress-Editor sehen die beiden Shortcodes zusammen folgendermaßen aus:

Wenn Sie sie zu diesem Zeitpunkt zu Ihrer Startseite hinzufügen und dann das Ergebnis in Ihrem Browser anzeigen, wird eine nicht gestaltete und nicht funktionierende HTML-Ausgabe angezeigt. Also lasst es uns beheben.

3. Fügen Sie jQuery hinzu, um den Inhalt mit Registerkarten zu aktivieren

Gehen Sie zur Datei main.js und fügen Sie den Code ein

Ich werde diesen ganzen Code nicht im Detail beschreiben, aber die Logik hier unterstützt die Tab-Funktionalität. Wenn Sie nicht mit JavaScript oder jQuery vertraut sind, empfehle ich diesen erstaunlichen kostenlosen Kurs für Anfänger:

Gestalten Sie die Tabs

Jetzt funktionieren die Registerkarten, aber sie sehen immer noch hässlich aus. Fügen wir also einige grundlegende CSS hinzu:

4. Erstellen Sie den Shortcode für WooCommerce-Produkte

Wir machen große Fortschritte. Unser WooCommerce-Produktarchiv mit Registerkarten ist fast da! Es ist an der Zeit, einen Shortcode für die Produkte zu erstellen. Dadurch werden die Produkte mit einer Abfrage abgerufen und aus diesen Ergebnissen eine Reihe von Arrays erstellt: vorgestellte, verkaufte und meistverkaufte Produkte. Anschließend wird der Inhalt dieser Arrays ausgegeben, um uns unsere Produktregisterkarten zu geben.

Fügen Sie diesen Code der PHP-Datei hinzu:

Der hier erstellte Shortcode weist mehrere Attribute auf:

  • Layout - Es kann ein Raster oder ein Karussell sein
  • Autoplay - richtig oder falsch, das ist eine zusätzliche Option für das Karussell-Layout
  • Columns - Hier können Sie angeben, wie viele Spalten Sie haben möchten
  • Rows - Sie entsprichen den Spalten und gelten nur für das Karusselllayout
  • Menge/Quantity - Die Anzahl der anzuzeigenden Elemente
  • Typ/Type - hier können Sie aktuelle Produkte, Bestseller, Verkauf oder vorgestellte Produkte angeben

Ein Hinweis zu unseren Karussellzeilen

Wenn Sie ein Karussell haben, wird jedes Produkt zu einem Karussellartikel - normales Verhalten, wenn Sie eine Reihe haben. Was passiert jedoch, wenn Sie zwei, drei oder vier Reihen pro Karussellartikel möchten?

In diesem Fall müssten Sie jede dieser Möglichkeiten in eine Hülle einwickeln, die als Karussellelement fungiert. Und Sie haben die Frage: Tun Sie dies mit JavaScript oder mit PHP? Ich bevorzuge die zweite Option, da JS einige Verzögerungen bei der Ausführung hat. Wenn Sie also den Shortcode untersuchen, finden Sie Folgendes:

Beachten Sie das

gleich danach

Das ist ähnluch wie for Schleife. Wir benötigen ein Inkrement, um unsere Abfrage zu durchlaufen und jeweils zwei, jeweils drei und jeweils vier Produktelemente in das Karussellelement-Wrapper-Markup einzubinden.

Sie werden das % bemerken, das der Modulo-Operator ist. Es gibt den Rest einer Teilung; 0, wenn die Zahl genau durch 2/3/4 teilbar ist, und 1, wenn nicht. Und mit jeder Schleife müssen wir den Zähler erhöhen mit:

Das geschieht direkt nach dem Code:

5. Hinzufügung Owl Styles 🦉�

6. Bessern Sie den Karussellglitchh aktiven Registerkarte angezeigt. Wenn Sie jedoch von Registerkarte zu Registerkarte wechseln, wird Ihr Karusselllayout angezeigt wird brechen. Auf der Registerkarte Änderungsereignis muss unser Karussell aktualisiert werden. Fügen Sie also ganz am Anfang der Datei die Funktion hinzu::

<!--wp:separator -->). Wenn Sie den klassischen Editor haben, kopieren Sie einfach die Shortcodes..

ein schönes Layout, wie dieses, sehen!>

Repo auf Github, um den Quellcode vollständig abzurufen. Ich hoffe, Sie finden es nützlich, danke fürs Lesen!!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.