Så här skapar du en anpassad inställningspanel i WooCommerce

WooCommerce är överlägset den ledande plugin för e-handel för WordPress. Vid skrivandet har den över 3 miljoner aktiva installationer och är enligt uppgift bakom 40% av alla online-butiker.

En av anledningarna till WooCommerce popularitet är dess utbyggbarhet. WooCommerce är, som WordPress, full av åtgärder och filter som utvecklare kan ansluta till om de vill utvidga WooCommerces standardfunktionalitet.

Ett bra exempel på detta är möjligheten att skapa en anpassad datapanel.

Vad är täckt i denna handledning?

Denna handledning är uppdelad i två delar. I del ett ska vi titta på:

• Lägger till en anpassad panel till WooCommerce
• Lägga till anpassade fält till panelen
• sanering och lagring av anpassade fältvärden

Sedan i del två ser vi på:

• visar anpassade fält på produktsidan
• ändra produktpriset beroende på värdet av egna fält
• visar anpassade fältvärden i kundvagnen och beställningen

Vad är en WooCommerce Custom Data Panel?

När du skapar en ny produkt i WooCommerce, skriver du in de flesta av den kritiska produktinformationen, till exempel pris och lager, i Produktdata sektion.

I skärmbilden ovan kan du se att Produktdata sektionen är uppdelad i paneler: flikarna ner till vänster, t.ex.. Allmän, Lager, etc., öppna alla olika paneler i huvudvyn till höger.

I den här handledningen kommer vi att titta på att skapa en anpassad panel för produktdata och lägga till några anpassade fält till den. Då tittar vi på att använda de anpassade fälten på framsidan och sparar sina värden till kundorder.

I vårt exemplarscenario kommer vi lägga till en "Presentationspanel" -panel som innehåller några anpassade fält:

• en kryssruta för att inkludera ett presentationsalternativ för produkten på produktsidan
• en kryssruta för att aktivera ett inmatningsfält där en kund kan skriva in ett meddelande på produktsidan
• ett inmatningsfält för att lägga till ett pris för presentförpackningsalternativet; Priset kommer att läggas till produktpriset i vagnen

På baksidan kommer det att se ut så här:

Och på framsidan kommer det att se ut så här:

Skapa ett nytt plugin

Eftersom vi utvidgar funktionaliteten kommer vi att skapa ett plugin istället för att lägga till vår kod till ett tema. Det betyder att våra användare kommer att kunna behålla denna extrafunktion även om de byter platsens tema. Att skapa ett plugin är inte tillgängligt för denna handledning, men om du behöver lite hjälp, ta en titt på denna Tuts + Coffee Break Course när du skapar din första plugin: 

Vår plugin ska bestå av två klasser: en för att hantera saker i admin och en för att hantera allt på framsidan. Vår pluginfilstruktur kommer att se ut så här:

Admin Class

Först måste vi skapa vår klass för att hantera allt på baksidan. I en mapp som heter klasser, skapa en ny fil som heter klass-tpwcp-admin.php.

Denna klass hanterar följande:

• Skapa den anpassade fliken (fliken är det klickbara elementet till vänster om produktdatafektionen).
• Lägg till de anpassade fälten på den anpassade panelen (panelen är det element som visas när du klickar på en flik).
• Bestäm de produkttyper där panelen ska aktiveras.
• Sanitize och spara de anpassade fältvärdena.

Klistra in följande kod i den nya filen. Vi går igenom det steg för steg efteråt.

 __ ('Giftwrap', 'tpwcp'), // Namnet på din panel 'target' => 'gifwrap_panel', // Kommer att användas för att skapa en ankarlänk så måste den vara unik 'class' => array giftwrap_tab "," show_if_simple "," show_if_variable "), // Klass för din flikflik - hjälper till att dölja / visa beroende på produkttyp 'priority' => 80, // Där din panel kommer att visas. Som standard är 70 sista objektet); returnera $ flikar;  / ** * Visa fält för den nya panelen * @see 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' => __ ('Inkludera presentationsalternativ', 'tpwcp'), 'desc_tip' => __ ('Välj det här alternativet för att visa presentationsalternativ för denna produkt', 'tpwcp')))); woocommerce_wp_checkbox (array ('id' => 'include_custom_message', 'label' => __ ('Inkludera anpassat meddelande', 'tpwcp'), 'desc_tip' => __ ('Välj det här alternativet för att tillåta kunder att inkludera ett anpassat meddelande ',' tpwcp ')))); woocommerce_wp_text_input (array ('id' => 'giftwrap_cost', 'label' => __ ('Presentpris', 'tpwcp'), 'typ' => 'nummer', 'desc_tip' => __ av presentförpackning denna produkt ',' tpwcp ')))); ?> 
 
 update_meta_data ('include_giftwrap_option', sanitize_text_field ($ include_giftwrap_option)); // Spara inställningen include_giftwrap_option $ include_custom_message = isset ($ _POST ['include_custom_message'])? 'Ja Nej'; $ product-> update_meta_data ('include_custom_message', sanitize_text_field ($ include_custom_message)); // Spara inställningen giftwrap_cost $ giftwrap_cost = isset ($ _POST ['giftwrap_cost'])? $ _POST ['giftwrap_cost']: "; $ produkt-> update_meta_data ('giftwrap_cost', sanitize_text_field ($ giftwrap_cost)); $ produkt-> spara (); 

Skapa fliken Anpassad

För att skapa den anpassade fliken krokar vi in ​​i woocommerce_product_data_tabs filtrera med vår create_giftwrap_tab fungera. Detta passerar WooCommerce $ flikar objekt i vilket vi sedan modifierar med följande parametrar:

• märka: använd det här för att ange namnet på din flik.
• mål: det här används för att skapa en ankarlänk så det måste vara unikt.
  
• klass: en grupp klasser som kommer att tillämpas på din panel.
• prioritet: Definiera var du vill att din flik ska visas.

Produkttyper

I detta skede är det värt att överväga vilka produkttyper vi vill att vår panel ska vara aktiverad för. Som standard finns det fyra WooCommerce-produkttyper: enkel, variabel, grupperad och ansluten. Låt oss säga för vårt exempel scenario, vi vill bara att vår presentationspanel ska aktiveras för enkla och variabla produkttyper.

För att uppnå detta lägger vi till show_if_simple och show_if_variable klasser till klassparametern ovan. Om vi ​​inte vill aktivera panelen för variabla produkttyper, skulle vi bara släppa bort show_if_variable klass.

Lägg till anpassade fält

Nästa krok vi använder är woocommerce_product_data_panels. Med den här åtgärden kan vi producera vår egen uppmärkning för presentpanelen. I vår klass, funktionen display_giftwrap_fields skapar ett par div wrappers, där vi använder vissa WooCommerce-funktioner för att skapa egna fält. 

Observera hur id attribut för vårt yttre div, giftwrap_panel, matchar det värde vi passerade in i mål parameter i vår presentationsflik ovan. Så här vet WooCommerce att den här panelen visas när vi klickar på fliken Presentationsflik.

WooCommerce anpassade fältfunktioner

I vårt exempel är de två funktionerna vi använder för att skapa våra fält:

• woocommerce_wp_checkbox
• woocommerce_wp_text_input

Dessa funktioner tillhandahålls av WooCommerce specifikt för att skapa egna fält. De tar en rad argument, inklusive:

• id: detta är ditt fältets ID Det måste vara unikt, och vi refererar senare till det i vår kod.
• märka: Detta är etiketten som det kommer att visas för användaren.
• desc_tip: Detta är det valfria verktygstipset som visas när användaren svänger över frågeteckenikonen bredvid etiketten.

Observera också att woocommerce_wp_text_input funktionen tar också a typ argument, där du kan ange siffra för ett nummerinmatningsfält, eller text för ett textfält. Vårt fält kommer att användas för att ange ett pris, så vi specificerar det som siffra.

Spara de anpassade fälten

Den sista delen av vår admin klass använder woocommerce_process_product_meta åtgärder för att spara våra egna fältvärden.

För att standardisera och optimera hur den lagrar och hämtar data, antog WooCommerce 3.0 en CRUD (Skapa, Läs, Uppdatera, Ta bort) -metod för inställning och hämtning av produktdata. Du kan läsa mer om tanken bakom detta i meddelandet WooCommerce 3.0.

Med detta i åtanke, istället för de mer bekanta get_post_meta och update_post_meta metoder som vi kanske har använt tidigare, använder vi nu $ post_id att skapa en WooCommerce $ produkt objekt och använd sedan update_meta_data metod för att spara data. Till exempel:

$ product = wc_get_product ($ post_id); $ include_giftwrap_option = isset ($ _POST ['include_giftwrap_option'])? 'Ja Nej'; $ product-> update_meta_data ('include_giftwrap_option', sanitize_text_field ($ include_giftwrap_option)); $ Produkt-> Spara ();

Observera också att vi är noga med att sanitera våra data innan du sparar den i databasen. Det finns mer information om sanitering av data här: 

Huvudplugins fil

När du har skapat din readme.txt fil och din huvud plugin-fil tutsplus-woocommerce-panel.php, Du kan lägga till den här koden i din huvudfil.

i det();  add_action ('plugins_loaded', 'tpwcp_init');

Detta kommer att initiera din administratorklass.

När du aktiverar ditt plugin på en webbplats (tillsammans med WooCommerce) och sedan går för att skapa en ny produkt, ser du din nya presentationspanel tillgänglig tillsammans med anpassade fält. Du kan uppdatera fälten och spara dem ... Men du kommer inte se något på framsidan än.

Slutsats

Låt oss bara få reda på vad vi hittills har tittat på i den här artikeln.

Vi har tittat på ett exemplarscenario för att lägga till en anpassad "Presentpanel" -panel till WooCommerce. Vi har skapat ett plugin och lagt till en klass för att skapa panelen. Inom klassen har vi också använt WooCommerce-funktioner för att lägga till egna fält, och sedan har vi sanerat och sparat dessa fältvärden.