Share
WooCommerce is aantoonbaar de meest populaire manier om producten te verkopen met behulp van WordPress. Omdat WordPress ongeveer 25% van het internet en WooCommerce voedt met ongeveer 39% van alle online winkels, is het een veilige gok om de twee in combinatie met elkaar te gebruiken als u producten aan klanten wilt verkopen.
Maar zoals bij elke andere software, zijn er soms momenten waarop wij of onze klanten de functies vaker willen uitbreiden dan wat er uit de doos wordt aangeboden.
Voorbeeld: stel met WooCommerce dat u een eenvoudig product heeft dat u wilt verkopen, maar dat u een beetje meer informatie wilt toevoegen over het product dat aan de voorkant wordt weergegeven.
Met behulp van een aantal hooks van WooCommerce en aangepaste functionaliteit die we zullen schrijven, zullen we bekijken hoe we precies dat kunnen doen.
Voordat we aan de slag gaan, neem ik aan dat u de volgende instellingen (of iets vergelijkbaars) op uw computer hebt:
Voor de rest van de zelfstudie neem ik aan dat dit allemaal is geïnstalleerd, geactiveerd en actief.
Als u WooCommerce specifiek voor deze zelfstudie downloadt, hoeft u zich geen zorgen te maken over zaken als de betaalpagina's, algemene voorwaarden of iets dergelijks. Sterker nog, we zullen alleen geconcentreerd zijn op de meta-box Simple Product door de rest van deze tutorial.
Als het gaat om het werken met WordPress, draagt het begrip aangepaste velden meestal een andere definitie met zich mee:
WordPress heeft de mogelijkheid om postauteurs toe te staan om aangepaste velden aan een bericht toe te wijzen. Deze willekeurige extra informatie staat bekend als meta-data.
Voor niet-ontwikkelaars kan dit soort informatie een beetje ingewikkelder en onnodig zijn. Maar als je eraan gewend bent om ermee te werken, dan is het belangrijk om op te merken dat wanneer ik in deze tutorial verwijs naar aangepaste velden, ik het heb over iets compleet anders.
In plaats daarvan heb ik het over een echt tekstveld dat we zullen introduceren in de Gekoppeld product tabblad van de Eenvoudig product type.
Maar daar komen we later in de tutorial bij. Laten we voorlopig beginnen.
Net als WordPress biedt WooCommerce een API waarmee we een deel van de levenscyclus van onze pagina kunnen volgen. Dus hoewel je misschien al eerder met de WordPress metadata API hebt gewerkt, is het anders met WooCommerce.
Er zijn twee haken die belangrijk zijn om te weten:
Zoals bij alle hooks in WordPress, moeten deze haakjes worden gedefinieerd en vervolgens aangepaste functionaliteit voor hen worden gedefinieerd. Hoewel u dit met procedureel programmeren kunt doen, zal deze zelfstudie de functionaliteit implementeren met behulp van objectgeoriënteerd programmeren.
Eerst definiëren we een klasse die een variabele sindsdien als instantiegegevens heeft. Deze variabele vertegenwoordigt de ID van het invoerveld dat in de gebruikersinterface verschijnt:
Vervolgens initialiseren we deze instantievariabele in de constructor van de klasse:
textfield_id = 'tutsplus_text_field';Op dit moment zijn we klaar om de hierboven genoemde haken te gebruiken. Om dit te doen, voegen we een initialisatiefunctie toe die twee aangepaste functies met de haak registreert.
In de volgende twee secties zullen we precies zien hoe de aangepaste functionaliteit moet worden geïmplementeerd.
1. Een tekstinvoerveld toevoegen
Allereerst willen we een functie toevoegen waaraan verslaafd is
woocommerce_product_options_grouping. In de init-functie die we in het vorige gedeelte hebben gedefinieerd, doen we precies hetzelfde.textfield_id = 'tutsplus_text_field'; openbare functie init () add_action ('woocommerce_product_options_grouping', array ($ this, 'product_options_grouping')); public function product_options_grouping ()Merk op dat ik de functie heb genoemd
product_options_grouping. Ik vind dit het maken van de code een beetje makkelijker te lezen. Hoewel de functie op zich niet zozeer beschrijvend is voor wat de functie doet, heeft deze betrekking op de betreffende haak.Vervolgens moeten we de functie implementeren. Om dit te doen, hebben we wat informatie nodig:
Alle bovenstaande informatie wordt ingesteld in een associatieve array en wordt vervolgens doorgegeven aan woocommerce_wp_text_input. Dit is een WooCommerce API-functie die is ontworpen om een tekstelement uit te voeren met de bovenstaande argumenten.
Accentsconagua
textfield_id = 'tutsplus_text_field'; openbare functie init () add_action ('woocommerce_product_options_grouping', array ($ this, 'product_options_grouping')); public function product_options_grouping () $ description = sanitize_text_field ('Voer een beschrijving in die wordt weergegeven voor degenen die het product bekijken.'); $ placeholder = sanitize_text_field ('Plaag je product met een korte beschrijving.'); $ args = array ('id' => $ this-> textfield_id, 'label' => sanitize_text_field ('Product Teaser'), 'placeholder' => 'Plaag je product met een korte beschrijving', 'desc_tip' => true , 'description' => $ beschrijving,); woocommerce_wp_text_input ($ args); Op dit punt hebben we het eerste deel van de plug-in gedaan. We moeten de code die alles in gang zet, nog schrijven en we moeten de code die de informatie in de database slaat nog schrijven, dus laten we daar nu voor zorgen.
Voeg vervolgens de volgende regels toe aan de in het methode:
Voeg daarna de
add_custom_linked_field_savefunctie.textfield_id]) || wp_verify_nonce (sanitize_key ($ _POST ['woocommerce_meta_nonce']), 'woocommerce_save_data'))) return false; $ product_teaser = sanitize_text_field (wp_unslash ($ _POST [$ this-> textfield_id])); update_post_meta ($ post_id, $ this-> textfield_id, esc_attr ($ product_teaser));Ik zal een beetje praten over de implementatie van de functie in de volgende sectie.
De gegevens zuiveren
Let op in de bovenstaande functie, er gebeuren drie dingen:
- We controleren of er verschillende nonce-waarden aanwezig zijn. Zo niet, dan keren we terug
vals. Dit is een standaard veiligheidsmaatregel. De nonce-waarden worden gedetecteerd door specifiek te kijken naar wat WooCommerce in de broncode biedt.- Sanitize de gegevens in de
$ _POSTverzameling die overeenkomt met de invoer van de gebruiker.- Sla de informatie op in de tabel met metadata voor posten.
Merk op dat we eigenlijk niets doen om de informatie aan de voorkant te tonen, dus er is geen oproep voor
get_post_meta. Dit is echter hoe we informatie over de front-end zullen weergeven.3. De teaser weergeven aan de voorkant
Om informatie over de front-end weer te geven, hebben we een cursus nodig die veel van hetzelfde werk zal doen dat we al hebben gedaan. Concreet hebben we nodig:
Dit opzetten is eigenlijk niet zo moeilijk, omdat we dit al hebben gedaan, dus ik ga de klas in zijn geheel hieronder doorgeven; Ik zal echter een paar opmerkingen maken over de manier waarop we deze klasse gaan instellen na de sprong:
textfield_id = 'tutsplus_text_field'; openbare functie init () add_action ('woocommerce_product_thumbnails', array ($ this, 'product_thumbnails')); public function product_thumbnails () $ teaser = get_post_meta (get_the_ID (), $ this-> textfield_id, true); if (empty ($ teaser)) return; echo esc_html ($ teaser); Het eindresultaat zou ongeveer zo moeten zijn:
Op dit moment hebben we een aantal overtollige code. Specifiek gebruiken de openbare en de administratieve klassen beide een textfield_ID en zet het op in hun constructor. Dit is een codegeur omdat deze in strijd is met het hele DROGE principe van objectgeoriënteerd programmeren.
Er zijn een aantal manieren waarop we dit kunnen beperken, zoals het doorgeven van de waarde aan de constructeurs wanneer de klassen worden geïnstantieerd, met behulp van een eenvoudig ontwerppatroon om informatie tussen de twee klassen te orkestreren, enzovoort.
In het bestand bij deze zelfstudie, die kan worden gedownload via de link in de zijbalk, ziet u hoe ik de waarde heb doorgegeven aan de constructor om het een beetje eenvoudiger te beheren.
Ten tweede merk ik op dat ik de woocommerce_product_thumbnails haak om de informatie weer te geven. Er zijn een aantal hooks beschikbaar die WooCommerce ter beschikking stelt, en ik koos deze eenvoudig uit de beschikbare hooks om het weer te geven. U kunt zich vrij voelen om de documentatie te doorzoeken om te bepalen welke haak het beste aansluit op uw behoeften.
Ten slotte is het laatste wat we moeten doen om een bootstrap-bestand op te zetten waarmee de plug-in wordt gestart. We hebben dit gedaan in een aantal van mijn eerdere tutorials, dus ik ga hier niet te veel tijd aan besteden.
Hier is de code voor hoe ik het uit elkaar haal:
in het(); else $ plugin = new TutsPlus_Custom_WooCommerce_Display ('tutsplus_text_field'); $ Plugin-> init (); Merk op dat ik de afhankelijkheden deel en vervolgens, nadat de functie is geactiveerd, controleer ik of het dashboard wordt weergegeven of niet. Als dat het geval is, wordt het juiste deel van de plug-in geladen; anders wordt het standaardbeeldscherm geladen, dat u op de productpagina kunt zien.
Op dit punt hebben we alles behandeld wat we in de introductie van de tutorial wilden doen:
Vergeet niet de laatste werkende demo te downloaden van de zijbalk van deze pagina. Het is de grote blauwe knop in de zijbalk. Verder, als je geïnteresseerd bent in WooCommerce, vergeet dan niet om enkele van onze andere tutorials of enkele items die we op onze marktplaats hebben te bekijken.
Zoals gewoonlijk, als je op zoek bent naar ander WordPress-gerelateerd materiaal, kun je al mijn vorige tutorials op mijn profielpagina vinden en kun je me volgen op mijn blog of op Twitter.
Vergeet niet om vragen of opmerkingen achter te laten in de feed!
