Slik oppretter du et egendefinert innstillingspanel i WooCommerce

WooCommerce er langt den ledende e-handelstillegget for WordPress. I skrivende stund har den over 3 millioner aktive installasjoner, og er etter hvert bak over 40% av alle nettbutikker.

En av grunnene til WooCommerce sin popularitet er dens utvidbarhet. Som WordPress selv er WooCommerce full av handlinger og filtre som utviklere kan koble til hvis de ønsker å utvide WooCommerces standardfunksjonalitet.

Et godt eksempel på dette er muligheten til å opprette et tilpasset datapanel.

Hva er dekket i denne opplæringen?

Denne opplæringen er delt i to deler. I første del skal vi se på:

• legger til et egendefinert panel til WooCommerce
• legger til egendefinerte felt i panelet
• rensing og lagring av tilpassede feltverdier

Så i del to ser vi på:

• viser egendefinerte felt på produktsiden
• Endre produktprisen avhengig av verdien av egendefinerte felt
• viser tilpassede feltverdier i handlekurven og ordren

Hva er et WooCommerce Custom Data Panel?

Når du lager et nytt produkt i WooCommerce, skriver du inn mesteparten av den kritiske produktinformasjonen, som pris og lager, i Produktdata seksjon.

I skjermbildet over kan du se at Produktdata seksjonen er delt inn i paneler: fanene ned til venstre, f.eks. Generell, Inventar, etc., hver åpne forskjellige paneler i hovedvisningen til høyre.

I denne opplæringen skal vi se på å skape et tilpasset panel for produktdata og legge til noen egendefinerte felt for det. Da ser vi på å bruke de tilpassede feltene på forsiden og lagrer verdiene til kundeordrer.

I vårt eksempel scenario vil vi legge til et "Presentasjonspakke" -panel som inneholder noen egendefinerte felt:

• en avkrysningsboks for å inkludere et gavepakkealternativ for produktet på produktsiden
• en avkrysningsboks for å aktivere et inputfelt hvor en kunde kan legge inn en melding på produktsiden
• et inntastingsfelt for å legge til en pris for alternativet gaveoppslag; prisen vil bli lagt til produktprisen i handlekurven

På baksiden kommer det til å se slik ut:

Og på forsiden vil det se noe ut som dette:

Opprett et nytt plugin

Fordi vi utvider funksjonalitet, skal vi lage et plugin i stedet for å legge til koden vår til et tema. Det betyr at brukerne våre vil kunne beholde denne ekstra funksjonaliteten, selv om de bytter tema på sitt nettsted. Å lage et plugin er ikke tilgjengelig for denne opplæringen, men hvis du trenger litt hjelp, ta en titt på denne Tuts + Coffee Break-kursen når du lager din første plugin: 

Vår plugin skal bestå av to klasser: en til å håndtere ting i administrasjonen, og en til å håndtere alt på forsiden. Vår plugin-filstruktur vil se slik ut:

Admin Class

Først må vi lage vår klasse for å håndtere alt på baksiden. I en mappe som heter klasser, opprett en ny fil som heter klasse-tpwcp-admin.php.

Denne klassen håndterer følgende:

• Opprett den egendefinerte kategorien (fanen er det klikkbare elementet til venstre for produktdata-delen).
• Legg til de egendefinerte feltene til det egendefinerte panelet (panelet er elementet som vises når du klikker på en fane).
• Bestem produkttyper der panelet vil bli aktivert.
• Sanitize og lagre de egendefinerte feltverdiene.

Lim inn følgende kode i den nye filen. Vi vil gå gjennom det trinnvis etterpå.

 __ ('Giftwrap', 'tpwcp'), // Navnet på panelet 'target' => 'gifwrap_panel', // Vil bli brukt til å lage en ankerlink, så må det være unikt 'class' => array giftwrap_tab ',' show_if_simple ',' show_if_variable '), // Klasse for panelfanen din - hjelper gjem / vis avhengig av produkttype' priority '=> 80, // Hvor panelet ditt skal vises. Som standard er 70 siste gjenstand); returner $ tabs;  / ** * Vis felt for det nye panelet * @se https://docs.woocommerce.com/wc-apidocs/source-function-woocommerce_wp_checkbox.html * @since 1.0.0 * / offentlig funksjon display_giftwrap_fields () ? > 
 
  'include_giftwrap_option', 'label' => __ ('Inkluder gavepakkealternativ', 'tpwcp'), 'desc_tip' => __ ('Velg dette alternativet for å vise gaveoppdateringsalternativer for dette produktet', 'tpwcp'))); woocommerce_wp_checkbox (array ('id' => 'include_custom_message', 'label' => __ ('Inkluder egendefinert melding', 'tpwcp'), 'desc_tip' => __ ('Velg dette alternativet for å tillate kundene å inkludere en egendefinert melding ',' tpwcp ')))); woocommerce_wp_text_input (array ('id' => 'giftwrap_cost', 'label' => __ ('Gavepakke', 'tpwcp'), 'type' => 'tall', 'desc_tip' => __ av gavepakke dette produktet ',' tpwcp ')))); ?> 
 
 update_meta_data ('include_giftwrap_option', sanitize_text_field ($ include_giftwrap_option)); // Lagre include_giftwrap_option innstillingen $ include_custom_message = isset ($ _POST ['include_custom_message'])? 'Ja Nei'; $ produkt-> update_meta_data ('include_custom_message', sanitize_text_field ($ include_custom_message)); // Lagre gavewrap_cost innstillingen $ giftwrap_cost = isset ($ _POST ['giftwrap_cost'])? $ _POST ['giftwrap_cost']: "; $ produkt-> update_meta_data ('giftwrap_cost', sanitize_text_field ($ giftwrap_cost)); $ produkt-> lagre (); 

Opprett fanen Tilpasset

For å lage den egendefinerte fanen henger vi inn i woocommerce_product_data_tabs filter med vår create_giftwrap_tab funksjon. Dette passerer WooCommerce $ faner objekt i, som vi deretter modifiserer ved å bruke følgende parametere:

• merkelapp: Bruk dette til å definere navnet på fanen din.
• mål: Dette brukes til å skape en ankerlink, så det må være unikt.
  
• klasse: en rekke klasser som vil bli brukt på panelet ditt.
• prioritet: Definer hvor du vil at kategorien din skal vises.

Produkttyper

På dette stadiet er det verdt å vurdere hvilke produkttyper vi vil at vårt panel skal være aktivert for. Som standard er det fire WooCommerce produkttyper: enkel, variabel, gruppert og tilknyttet. La oss si for eksempeleksemplaret, at vi bare vil at presentasjonspanelet skal aktiveres for enkle og variable produkttyper.

For å oppnå dette legger vi til show_if_simple og show_if_variable klasser til klasseparameteren ovenfor. Hvis vi ikke vil aktivere panelet for variable produkttyper, vil vi bare utelate show_if_variable klasse.

Legg til egendefinerte felt

Neste krok vi bruker er woocommerce_product_data_panels. Denne handlingen gjør at vi kan sende ut vårt eget oppslag til gavepakkepanelet. I vår klasse, funksjonen display_giftwrap_fields skaper et par div wrappers, innenfor hvilke vi bruker noen WooCommerce funksjoner for å lage egendefinerte felt. 

Legg merke til hvordan id attributt for vår ytre div, giftwrap_panel, samsvarer med verdien vi passerte inn i mål parameteren i vår gavepakkefane ovenfor. Slik vet WooCommerce å vise dette panelet når vi klikker på fanen Giftwrap.

WooCommerce tilpassede feltfunksjoner

I vårt eksempel er de to funksjonene vi bruker for å lage feltene våre:

• woocommerce_wp_checkbox
• woocommerce_wp_text_input

Disse funksjonene leveres av WooCommerce spesielt for å skape tilpassede felt. De tar en rekke argumenter, inkludert:

• id: Dette er IDen til feltet ditt. Det må være unikt, og vi refererer det senere til vår kode.
• merkelapp: Dette er etiketten som det vil vises til brukeren.
• desc_tip: Dette er valgfritt verktøytips som vises når brukeren svinger over spørsmålstegnikonet ved siden av etiketten.

Legg også merke til at woocommerce_wp_text_input funksjonen tar også a type argument, hvor du kan spesifisere Nummer for et nummerinputfelt, eller tekst for et tekstfelt. Vårt felt vil bli brukt til å legge inn en pris, så vi spesifiserer det som Nummer.

Lagre de egendefinerte feltene

Den siste delen av vår admin klasse bruker woocommerce_process_product_meta handling for å lagre våre tilpassede feltverdier.

For å standardisere og optimalisere hvordan den lagrer og henter data, har WooCommerce 3.0 vedtatt en CRUD (Create, Read, Update, Delete) -metode for å sette inn og få produktdata. Du kan finne ut mer om tankegangen bak dette i WooCommerce 3.0-kunngjøringen.

Med dette i tankene, i stedet for de mer kjente get_post_meta og update_post_meta metoder som vi kanskje har brukt tidligere, bruker vi nå $ POST_ID å opprette en WooCommerce $ produktet objekt, og bruk deretter update_meta_data metode for å lagre data. For eksempel:

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

Vær også oppmerksom på at vi er forsiktig med å rense våre data før du lagrer den i databasen. Det finnes mer informasjon om sanitizing data her: 

Main Plugin File

Når du har opprettet din readme.txt fil og hovedpluginfilen din tutsplus-woocommerce-panel.php, Du kan legge til denne koden i hovedfilen din.

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

Dette vil starte administrasjonsklassen din.

Når du aktiverer pluginet ditt på et nettsted (sammen med WooCommerce) og deretter går for å lage et nytt produkt, ser du det nye gavepakkepanelet ditt, sammen med egendefinerte felt. Du kan oppdatere feltene og lagre dem ... Men du ser ikke noe på forsiden enda.

Konklusjon

La oss bare gjenskape hva vi har sett så langt i denne artikkelen.

Vi har sett på et eksempel-scenario for å legge til et egendefinert "Presentasjonspakke" -panel til WooCommerce. Vi har laget et plugin og lagt til en klasse for å lage panelet. Innenfor klassen har vi også brukt WooCommerce-funksjoner for å legge til tilpassede felt, og så har vi sanitisert og lagret disse feltverdiene.