Hoe u een paneel met aangepaste instellingen kunt maken in WooCommerce

WooCommerce is verreweg de toonaangevende e-commerce plug-in voor WordPress. Op het moment van schrijven heeft het meer dan 3 miljoen actieve installaties en is naar verluidt achter meer dan 40% van alle online winkels.

Een van de redenen voor de populariteit van WooCommerce is de uitbreidbaarheid. Net als WordPress zelf zit WooCommerce boordevol acties en filters waar ontwikkelaars mee aan de slag kunnen als ze de standaardfunctionaliteit van WooCommerce willen uitbreiden.

Een goed voorbeeld hiervan is de mogelijkheid om een ​​aangepast datapaneel te maken.

Wat zit er in deze zelfstudie?

Deze tutorial is opgesplitst in twee delen. In deel één zullen we kijken naar:

• een aangepast paneel toevoegen aan WooCommerce
• het toevoegen van aangepaste velden aan het paneel
• schoonmaken en aanpassen van aangepaste veldwaarden

Vervolgens zullen we in deel twee kijken naar:

• aangepaste velden weergeven op de productpagina
• de productprijs wijzigen afhankelijk van de waarde van aangepaste velden
• aangepaste veldwaarden weergeven in de winkelwagen en volgorde

Wat is een WooCommerce Custom Data Panel?

Wanneer u een nieuw product in WooCommerce maakt, geeft u de meeste essentiële productinformatie op, zoals prijs en voorraad, in de Productgegevens sectie.

In de bovenstaande schermafbeelding kun je zien dat de Productgegevens sectie is verdeeld in panelen: de tabbladen aan de linkerkant, bijvoorbeeld. Algemeen, Inventaris, enz., elk opent verschillende panelen in het hoofdvenster aan de rechterkant.

In deze zelfstudie gaan we kijken naar het maken van een aangepast paneel voor productgegevens en het toevoegen van aangepaste velden. Vervolgens zullen we kijken naar het gebruik van die aangepaste velden aan de voorkant en hun waarden opslaan in klantbestellingen.

In ons voorbeeldscenario gaan we een 'Giftwrap'-paneel toevoegen met enkele aangepaste velden:

• een selectievakje om een ​​geschenkverpakkingsoptie voor het product op de productpagina op te nemen
• een selectievakje om een ​​invoerveld in te schakelen waar een klant een bericht kan invoeren op de productpagina
• een invoerveld om een ​​prijs toe te voegen voor de cadeauverpakkingsoptie; de prijs wordt toegevoegd aan de productprijs in het winkelwagentje

Aan de achterkant ziet het er zo uit:

En aan de voorkant ziet het er ongeveer zo uit:

Maak een nieuwe plugin

Omdat we de functionaliteit uitbreiden, gaan we een plug-in maken in plaats van onze code aan een thema toe te voegen. Dat betekent dat onze gebruikers deze extra functionaliteit kunnen behouden, zelfs als ze het thema van hun site wijzigen. Het maken van een plug-in is niet mogelijk voor deze zelfstudie, maar als je hulp nodig hebt, kun je deze Tuts + Coffee Break-cursus bekijken over het maken van je eerste plug-in: 

Onze plug-in bestaat uit twee klassen: één om dingen in de admin te verwerken en één om alles aan de voorkant af te handelen. Onze plug-in bestandsstructuur ziet er als volgt uit:

Admin-klasse

Eerst moeten we onze klas maken om alles aan de achterkant te regelen. In een map genaamd klassen, maak een nieuw bestand met de naam class-tpwcp-admin.php.

Deze klasse zal het volgende behandelen:

• Maak het aangepaste tabblad (het tabblad is het aanklikbare element links van het gedeelte Productgegevens).
• Voeg de aangepaste velden toe aan het aangepaste paneel (het paneel is het element dat wordt weergegeven wanneer u op een tabblad klikt).
• Bepaal de productsoorten waar het paneel wordt ingeschakeld.
• Sanitize en sla de aangepaste veldwaarden op.

Plak de volgende code in dat nieuwe bestand. We zullen er stap voor stap doorheen lopen.

 __ ('Giftwrap', 'tpwcp'), // De naam van je paneel 'target' => 'gifwrap_panel', // Wordt gebruikt om een ​​ankerschakel te maken, dus dit moet uniek zijn 'class' => array (' giftwrap_tab ',' show_if_simple ',' show_if_variable '), // Klasse voor uw paneeltabblad - helpt verbergen / weergeven afhankelijk van producttype' prioriteit '=> 80, // Waar uw paneel zal verschijnen. Standaard is 70 het laatste item); return $ tabs;  / ** * Displayvelden voor het nieuwe paneel * zie 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' => __ ('Inclusief cadeauverpakking', 'tpwcp'), 'desc_tip' => __ ('Selecteer deze optie om cadeauverpakkingsopties voor dit product weer te geven', 'tpwcp'))); woocommerce_wp_checkbox (array ('id' => 'include_custom_message', 'label' => __ ('Inclusief aangepast bericht', 'tpwcp'), 'desc_tip' => __ ('Selecteer deze optie om klanten toe te staan ​​een aangepast bericht op te nemen ',' tpwcp '))); woocommerce_wp_text_input (array ('id' => 'giftwrap_cost', 'label' => __ ('Giftwrap-kosten', 'tpwcp'), 'type' => 'nummer', 'desc_tip' => __ ('Voer de kosten in van het inpakken van dit product ',' tpwcp '))); ?> 
 
 update_meta_data ('include_giftwrap_option', sanitize_text_field ($ include_giftwrap_option)); // Sla de include_giftwrap_option-instelling op $ include_custom_message = isset ($ _POST ['include_custom_message'])? 'Ja nee'; $ product-> update_meta_data ('include_custom_message', sanitize_text_field ($ include_custom_message)); // Bewaar de giftwrap_cost-instelling $ giftwrap_cost = isset ($ _POST ['giftwrap_cost'])? $ _POST ['giftwrap_cost']: "; $ product-> update_meta_data ('giftwrap_cost', sanitize_text_field ($ giftwrap_cost)); $ product-> save (); 

Maak het aangepaste tabblad

Om het aangepaste tabblad te maken, haken we in op woocommerce_product_data_tabs filter met behulp van onze create_giftwrap_tab functie. Dit gaat door de WooCommerce $ tabs object in, die we vervolgens aanpassen met behulp van de volgende parameters:

• label: gebruik dit om de naam van uw tabblad te definiëren.
• doelwit: dit wordt gebruikt om een ​​ankerschakel te maken, dus dit moet uniek zijn.
  
• klasse: een reeks klassen die op uw panel wordt toegepast.
• prioriteit: definieer waar u uw tabblad wilt laten verschijnen.

Producttypen

In deze fase is het de moeite waard om te overwegen voor welke productsoorten we ons panel willen inschakelen. Standaard zijn er vier producttypen van WooCommerce: eenvoudig, variabel, gegroepeerd en gelieerd. Laten we voor ons voorbeeldscenario zeggen dat we alleen willen dat ons Giftwrap-paneel wordt ingeschakeld voor eenvoudige en variabele producttypen.

Om dit te bereiken, voegen we de show_if_simple en show_if_variable klassen naar de bovenstaande klassenparameter. Als we het panel voor variabele producttypen niet wilden inschakelen, zouden we de show_if_variable klasse.

Aangepaste velden toevoegen

De volgende haak die we gebruiken is woocommerce_product_data_panels. Met deze actie kunnen we onze eigen markup voor het paneel Giftwrap uitvoeren. In onze klas, de functie display_giftwrap_fields maakt er een paar div wrappers, waarin we enkele WooCommerce-functies gebruiken om aangepaste velden te maken. 

Merk op hoe het ID kaart kenmerk voor onze uiterlijke div, giftwrap_panel, komt overeen met de waarde die we hebben doorgegeven in de doelwit parameter van ons cadeaupapje hierboven. Dit is hoe WooCommerce dit paneel kan weergeven wanneer we op het tabblad Cadeaupapier klikken.

WooCommerce Aangepaste veldfuncties

In ons voorbeeld zijn de twee functies die we gebruiken om onze velden te maken:

• woocommerce_wp_checkbox
• woocommerce_wp_text_input

Deze functies worden door WooCommerce geleverd, speciaal voor het maken van aangepaste velden. Ze nemen een reeks argumenten, waaronder:

• ID kaart: dit is de ID van uw veld. Het moet uniek zijn en we zullen er later naar verwijzen in onze code.
• label: dit is het label zoals het voor de gebruiker zal verschijnen.
• desc_tip: dit is de optionele tooltip die verschijnt wanneer de gebruiker boven het vraagteken naast het label zweeft.

Merk ook op dat de woocommerce_wp_text_input functie duurt ook een type argument, waar u kunt specificeren aantal voor een numeriek invoerveld, of tekst voor een tekstinvoerveld. Ons veld zal worden gebruikt om een ​​prijs in te voeren, dus we specificeren het als aantal.

Sla de aangepaste velden op

Het laatste deel van onze beheerdersklasse gebruikt de woocommerce_process_product_meta actie om onze aangepaste veldwaarden op te slaan.

Om te standaardiseren en te optimaliseren hoe het gegevens opslaat en ophaalt, heeft WooCommerce 3.0 een CRUD-methode (Create, Read, Update, Delete) aangenomen voor het instellen en verkrijgen van productgegevens. Je kunt meer te weten komen over de gedachte hierachter in de WooCommerce 3.0-aankondiging.

Met dit in gedachten, in plaats van het meer bekende get_post_meta en update_post_meta methoden die we in het verleden misschien hebben gebruikt, gebruiken we nu de $ post_id om een ​​WooCommerce te maken $ product object en pas dan de update_meta_data methode om gegevens te bewaren. Bijvoorbeeld:

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

Houd er ook rekening mee dat we onze gegevens zorgvuldig opschonen voordat deze in de database worden opgeslagen. Hier is meer informatie over het ontsmetten van gegevens: 

Hoofdplugin-bestand

Wanneer u uw hebt gemaakt readme.txt bestand en uw belangrijkste plugin-bestand tutsplus-woocommerce-panel.php, je kunt deze code toevoegen aan je hoofdbestand.

in het();  add_action ('plugins_loaded', 'tpwcp_init');

Hiermee wordt uw beheerdersklasse gestart.

Wanneer u uw plug-in op een site activeert (samen met WooCommerce) en vervolgens een nieuw product maakt, ziet u uw nieuwe Giftwrap-venster beschikbaar, samen met aangepaste velden. U kunt de velden bijwerken en ze opslaan ... Maar u ziet nog niets aan de voorkant.

Conclusie

Laten we kort herhalen wat we tot nu toe in dit artikel hebben bekeken.

We hebben gekeken naar een voorbeeldscenario voor het toevoegen van een aangepast 'Giftwrap'-paneel aan WooCommerce. We hebben een plug-in gemaakt en een klas toegevoegd om het paneel te maken. In de klas hebben we ook WooCommerce-functies gebruikt om aangepaste velden toe te voegen en vervolgens hebben we die veldwaarden opgeschoond en opgeslagen.