So erstellen Sie ein benutzerdefiniertes Einstellungsfeld in WooCommerce

WooCommerce ist bei weitem das führende E-Commerce-Plugin für WordPress. Zum jetzigen Zeitpunkt hat es über 3 Millionen aktive Installationen und liegt Berichten zufolge hinter mehr als 40% aller Online-Shops.

Einer der Gründe für die Beliebtheit von WooCommerce ist die Erweiterbarkeit. WooCommerce ist wie WordPress selbst vollgepackt mit Aktionen und Filtern, an die sich Entwickler anschließen können, wenn sie die Standardfunktionalität von WooCommerce erweitern möchten.

Ein gutes Beispiel dafür ist die Möglichkeit, ein benutzerdefiniertes Datenfenster zu erstellen.

Was in diesem Tutorial behandelt wird?

Dieses Tutorial besteht aus zwei Teilen. Im ersten Teil werden wir uns Folgendes ansehen:

• Hinzufügen eines benutzerdefinierten Panels zu WooCommerce
• Hinzufügen benutzerdefinierter Felder zum Panel
• Benutzerdefinierte Feldwerte bereinigen und speichern

Dann schauen wir uns im zweiten Teil an:

• Anzeigen benutzerdefinierter Felder auf der Produktseite
• Ändern des Produktpreises in Abhängigkeit vom Wert der benutzerdefinierten Felder
• Anzeigen von benutzerdefinierten Feldwerten im Warenkorb und in der Bestellung

Was ist ein benutzerdefiniertes Datenfenster von WooCommerce??

Wenn Sie ein neues Produkt in WooCommerce erstellen, geben Sie die meisten wichtigen Produktinformationen wie Preis und Inventar in das Verzeichnis ein Produktdaten Sektion.

Im obigen Screenshot können Sie sehen, dass die Produktdaten Der Abschnitt ist in Felder unterteilt: Die Registerkarten befinden sich links unten, z. Allgemeines, Inventar, usw., öffnen Sie in der Hauptansicht rechts verschiedene Bereiche.

In diesem Lernprogramm werden wir ein benutzerdefiniertes Bedienfeld für Produktdaten erstellen und einige benutzerdefinierte Felder hinzufügen. Anschließend werden wir diese benutzerdefinierten Felder im Frontend verwenden und ihre Werte in Kundenbestellungen speichern.

In unserem Beispielszenario fügen wir ein Fenster "Giftwrap" hinzu, das einige benutzerdefinierte Felder enthält:

• Ein Kontrollkästchen, um eine Geschenkverpackungsoption für das Produkt auf der Produktseite anzugeben
• ein Kontrollkästchen, um ein Eingabefeld zu aktivieren, in das ein Kunde eine Nachricht auf der Produktseite eingeben kann
• ein Eingabefeld zum Hinzufügen eines Preises für die Geschenkverpackungsoption; Der Preis wird zum Produktpreis im Warenkorb hinzugefügt

Am hinteren Ende sieht es so aus:

Und auf der Vorderseite sieht es ungefähr so ​​aus:

Erstellen Sie ein neues Plugin

Da wir die Funktionalität erweitern, werden wir ein Plugin erstellen, anstatt unseren Code einem Design hinzuzufügen. Das bedeutet, dass unsere Benutzer diese zusätzliche Funktionalität auch dann beibehalten können, wenn sie das Thema ihrer Website wechseln. Das Erstellen eines Plugins ist für dieses Lernprogramm nicht geeignet. Wenn Sie jedoch Hilfe benötigen, lesen Sie in diesem Tuts + Coffee Break-Kurs das erste Plugin: 

Unser Plugin wird aus zwei Klassen bestehen: eine für die Verwaltung von Dingen im Admin und eine für alles für das Frontend. Unsere Plugin-Dateistruktur wird folgendermaßen aussehen:

Admin-Klasse

Als Erstes müssen wir unsere Klasse erstellen, um alles am Backend zu erledigen. In einem Ordner namens Klassen, Erstellen Sie eine neue Datei mit dem Namen class-tpwcp-admin.php.

Diese Klasse behandelt Folgendes:

• Erstellen Sie die benutzerdefinierte Registerkarte (die Registerkarte ist das anklickbare Element links neben dem Abschnitt Produktdaten)..
• Fügen Sie die benutzerdefinierten Felder dem benutzerdefinierten Bedienfeld hinzu (das Bedienfeld ist das Element, das angezeigt wird, wenn Sie auf eine Registerkarte klicken)..
• Legen Sie fest, für welche Produkttypen das Panel aktiviert werden soll.
• Bereinigen und speichern Sie die benutzerdefinierten Feldwerte.

Fügen Sie den folgenden Code in die neue Datei ein. Danach gehen wir Schritt für Schritt durch.

 __ ('Giftwrap', 'tpwcp'), // Der Name Ihres Panels 'target' => 'gifwrap_panel', // Wird verwendet, um eine Ankerverknüpfung zu erstellen. Es muss also ein eindeutiges 'class' => array (' giftwrap_tab ',' show_if_simple ',' show_if_variable '), // Klasse für Ihren Panel-Tab - hilft beim Verbergen / Anzeigen je nach Produkttyp' priority '=> 80, // Wo wird Ihr Panel angezeigt? Standardmäßig ist 70 das letzte Element. $ tabs zurückgeben;  / ** * Anzeigefelder für das neue Panel * @siehe https://docs.woocommerce.com/wc-apidocs/source-function-woocommerce_wp_checkbox.html * @since 1.0.0 * / public function display_giftwrap_fields () ? > 
 
  'include_giftwrap_option', 'label' => __ ('Giftwrap-Option einbeziehen', 'tpwcp'), 'desc_tip' => __ ('Wählen Sie diese Option aus, um die Geschenkverpackungsoptionen für dieses Produkt anzuzeigen', 'tpwcp'))); woocommerce_wp_checkbox (array ('id' => 'include_custom_message', 'label' => __ ('Benutzerdefinierte Nachricht einbeziehen', 'tpwcp'), 'desc_tip' => __ ('Wählen Sie diese Option aus, damit Kunden eine benutzerdefinierte Nachricht hinzufügen können ',' tpwcp '))); woocommerce_wp_text_input (array ('id' => 'giftwrap_cost', 'label' => __ ('Giftwrap-Kosten', 'tpwcp'), 'type' => 'number', 'desc_tip' => __ ('Geben Sie die Kosten ein von Geschenkverpackung dieses Produkts ',' tpwcp '))); ?> 
 
 update_meta_data ('include_giftwrap_option', sanitize_text_field ($ include_giftwrap_option)); // Speichern Sie die include_giftwrap_option-Einstellung $ include_custom_message = isset ($ _POST ['include_custom_message'])? 'ja Nein'; $ product-> update_meta_data ('include_custom_message', sanitize_text_field ($ include_custom_message)); // Speichern Sie die Einstellung giftwrap_cost $ giftwrap_cost = isset ($ _POST ['giftwrap_cost'])? $ _POST ['giftwrap_cost']: "; $ product-> update_meta_data ('giftwrap_cost', sanitize_text_field ($ giftwrap_cost)); $ product-> save (); 

Erstellen Sie die benutzerdefinierte Registerkarte

Um die benutzerdefinierte Registerkarte zu erstellen, haken wir uns in die woocommerce_product_data_tabs filtern mit unserem create_giftwrap_tab Funktion. Dies passiert den WooCommerce $ tabs object in, das wir dann mit folgenden Parametern ändern:

• Etikette: Verwenden Sie diese Option, um den Namen Ihrer Registerkarte festzulegen.
• Ziel: Dies wird verwendet, um einen Anker-Link zu erstellen. Er muss eindeutig sein.
  
• Klasse: ein Array von Klassen, die auf Ihr Panel angewendet werden.
• Priorität: Legen Sie fest, wo Ihre Registerkarte angezeigt werden soll.

Produkttypen

An dieser Stelle ist es sinnvoll zu überlegen, für welche Produkttypen unser Panel aktiviert werden soll. Standardmäßig gibt es vier WooCommerce-Produkttypen: Simple, Variable, Grouped und Affiliate. Für unser Beispielszenario möchten wir, dass unser Giftwrap-Bedienfeld nur für einfache und variable Produkttypen aktiviert werden soll.

Um dies zu erreichen, fügen wir die show_if_simple und show_if_variable Klassen zum Klassenparameter oben. Wenn wir das Panel nicht für variable Produkttypen aktivieren möchten, würden wir einfach das show_if_variable Klasse.

Benutzerdefinierte Felder hinzufügen

Der nächste Haken, den wir verwenden, ist woocommerce_product_data_panels. Mit dieser Aktion können wir unser eigenes Markup für das Giftwrap-Bedienfeld ausgeben. In unserer Klasse die Funktion display_giftwrap_fields schafft ein paar div Wrapper, in denen wir einige WooCommerce-Funktionen verwenden, um benutzerdefinierte Felder zu erstellen. 

Beachten Sie, wie die Ich würde Attribut für unser Äußeres div, giftwrap_panel, stimmt mit dem Wert überein, den wir in übergeben haben Ziel Parameter unserer Geschenkverpackung oben. So weiß WooCommerce diese Anzeige, wenn wir auf die Registerkarte Geschenkverpackung klicken.

Benutzerdefinierte Feldfunktionen von WooCommerce

In unserem Beispiel sind die zwei Funktionen, die wir zum Erstellen unserer Felder verwenden, die folgenden:

• woocommerce_wp_checkbox
• woocommerce_wp_text_input

Diese Funktionen werden von WooCommerce speziell zum Erstellen von benutzerdefinierten Feldern bereitgestellt. Sie benötigen eine Reihe von Argumenten, darunter:

• Ich würde: Dies ist die ID Ihres Feldes. Es muss eindeutig sein, und wir werden später in unserem Code darauf verweisen.
• Etikette: Dies ist das Etikett, wie es dem Benutzer angezeigt wird.
• desc_tip: Dies ist der optionale QuickInfo, der angezeigt wird, wenn der Benutzer über dem Fragezeichen neben dem Etikett steht.

Beachten Sie auch, dass die woocommerce_wp_text_input Funktion nimmt auch ein Art Argument, wo Sie angeben können Nummer für ein Zahleneingabefeld oder Text für ein Texteingabefeld. Unser Feld wird für die Eingabe eines Preises verwendet, daher geben wir ihn als an Nummer.

Speichern Sie die benutzerdefinierten Felder

Der letzte Teil unserer Admin-Klasse verwendet die woocommerce_process_product_meta Aktion zum Speichern unserer benutzerdefinierten Feldwerte.

Um die Speicherung und den Abruf von Daten zu standardisieren und zu optimieren, hat WooCommerce 3.0 eine CRUD-Methode (Create, Read, Update, Delete) zum Einstellen und Abrufen von Produktdaten eingeführt. Weitere Informationen dazu finden Sie in der WooCommerce 3.0-Ankündigung.

In diesem Sinne statt des Vertrauten get_post_meta und update_post_meta Methoden, die wir in der Vergangenheit verwendet haben könnten, verwenden wir jetzt die $ post_id einen WooCommerce erstellen $ Produkt Objekt und wenden Sie dann die update_meta_data Methode zum Speichern von Daten. Zum Beispiel:

$ product = wc_get_product ($ post_id); $ include_giftwrap_option = isset ($ _POST ['include_giftwrap_option'])? 'ja Nein'; $ product-> update_meta_data ('include_giftwrap_option', sanitize_text_field ($ include_giftwrap_option)); $ product-> save ();

Bitte beachten Sie auch, dass wir unsere Daten sorgfältig säubern, bevor Sie sie in der Datenbank speichern. Weitere Informationen zur Datenbereinigung finden Sie hier: 

Haupt-Plugin-Datei

Wenn Sie Ihr erstellt haben readme.txt Datei und Ihre Haupt-Plugin-Datei tutsplus-woocommerce-panel.php, Sie können diesen Code zu Ihrer Hauptdatei hinzufügen.

drin();  add_action ('plugins_loaded', 'tpwcp_init');

Dadurch wird Ihre Admin-Klasse initiiert.

Wenn Sie Ihr Plugin auf einer Site (zusammen mit WooCommerce) aktivieren und dann ein neues Produkt erstellen, wird Ihr neues Giftwrap-Fenster mit benutzerdefinierten Feldern angezeigt. Sie können die Felder aktualisieren und speichern. Am Frontend wird jedoch noch nichts angezeigt.

Fazit

Lassen Sie uns kurz zusammenfassen, was wir in diesem Artikel bisher betrachtet haben.

Wir haben ein Beispielszenario für das Hinzufügen eines benutzerdefinierten 'Giftwrap'-Fensters zu WooCommerce betrachtet. Wir haben ein Plugin erstellt und eine Klasse hinzugefügt, um das Panel zu erstellen. Innerhalb der Klasse haben wir auch WooCommerce-Funktionen verwendet, um benutzerdefinierte Felder hinzuzufügen. Anschließend haben wir diese Feldwerte bereinigt und gespeichert.