Luo mukautettuja WooCommerce-tuotevälilehtiä mukautetuilla kentillä

Kun tarkastelet tuotetta WooCommercessa, tuotteen tiedot näkyvät välilehdissä. Nämä välilehdet on korjannut ja luonut WooCommerce, sinun hallinnassasi. Tämä viesti näyttää sinulle, kuinka voit lisätä koodia, jonka avulla kirjoittajat voivat lisätä tuotteisiin mukautettuja välilehtiä, joissa on mukautettua sisältöä.

Vastuuvapauslauseke: WooCommerce-laajennus nimeltä WooCommerce Tab Manager tarjoaa tämän ominaisuuden. Se ei kuitenkaan ole ilmaista. En ole itse testannut sitä, mutta sikäli kuin näen, se tukee vain välilehden sisällön WYSIWYG-editoria (mitä näet, mitä saat). Tämä viesti on sinulle, joka haluat hienosäätää välilehden sisältöä tai haluat kirjoittaa koodin itse maksamatta toisesta laajennuksesta.

Käytämme Advanced Custom Fields (ACF) -laajennusta prosessin yksinkertaistamiseksi. Mutta sinun pitäisi pystyä melko helposti korvaamaan ACF: n osa omalla mukautetulla koodillasi, jos et halua käyttää laajennusta. ACF:stä tulee ilmainen versio ja Pro-versio. ACF Prossa on näppärä kenttätyyppi: toistin, joka sopii täydellisesti tällaiseen käyttöön. Jos sinulla ei kuitenkaan ole tai haluat ostaa Pro-lisenssiä, älä huoli. Alla oleva koodin opetusohjelma näyttää, kuinka voit lisätä kenttiä käyttämällä sekä ilmaista versiota että toistinta Pro-versiossa.

Jos et ole vielä perehtynyt ACF:ään, ACF auttaa meitä helpon post-meta-kenttien asettamisessa – kaikenlaisten. Voit helposti lisätä editorin, tiedostovalitsimen, päivämäärä- tai värivalitsimen, postauksen tai kategorian valitsimen, joka tukee useita valintoja ja uudelleenjärjestämistä, ja paljon muuta. Voimme saavuttaa saman ilman ACF:ää, mutta silloin meidän pitäisi koodata itse metabox-sisällön näyttö ja tallennus.

Mitä teemme

Yksinkertaisesti sanottuna haluamme sallia mukautettujen välilehtien lisäämisen tuotenäkymään. Jokainen välilehti tukee otsikkoa, joka näytetään välilehden otsikona, ja sisältöä, joka näytetään, kun välilehteä napsautetaan. Mukautetut välilehdet riippuvat todellakin projektin tyypistä tai tarpeistasi; ehkä tarvitset välilehtiä teknisiä tietoja varten, välilehden tiedostoineen (esim. käyttöoppaat ja vastaavat), lisätietoja tai mukautetun kyselyn, joka näyttää liittyvät tuotteet.

Tässä opetusohjelmassa pidämme sen yksinkertaisena lisäämällä välilehden sisältöön WYSIWYG-editorin. Kuten edellä mainittiin, muita kenttätyyppejä (esim. tiedostot tai viestikysely) on helppo ottaa käyttöön, se johtuu vain erosta kirjoittamasi koodissa, joka näyttää välilehden sisällön – mikä ei liity tähän opetusohjelmaan.

Jos sinulla on ACF Pro ja haluat käyttää toistinta useiden välilehtien lisäämiseen helposti; ohittaa seuraavan osan. Jos sinulla on vain ilmainen ACF-versio, jatka. Toistinkentän puuttumisen haittana on, että sinun on määritettävä kiinteä määrä välilehtiä. Joten kirjoittaja ei voi tehdä rajattomasti välilehtiä, kuten he voivat tehdä toistimella. Mutta tämä ilmainen ratkaisu toimii mainiosti verkkokaupoissa, joissa haluat vain tietyn (määrän) mukautettuja välilehtiä.

Opetusohjelma ACF ilmaiselle versiolle

ACF-kenttien lisääminen

Uuden metaboxin lisääminen kenttineen on todella helppoa ACF:n avulla. Sinulla on kaksi vaihtoehtoa; käytä ACF:n käyttöliittymää kaiken määrittämiseen tai lisää kentät koodin mukaan. Yleensä kenttien määrittäminen adminissa on tapa edetä. Mutta jos sinun on varmistettava, että kentät ovat useilla WordPress-sivustoilla (esim. localhost-kehitys, testipalvelin ja live-palvelin), saatat hyötyä kenttien lisäämisestä koodin mukaan teemassasi tai laajennuksessasi.

Sinun on määritettävä seuraavat:

• Ryhmä, joka näyttää, kun viestityyppi on yhtä suuri kuin WooCommerce-tuotteet
• Tekstinsyöttö välilehden otsikolle
• Mitä kenttiä haluat välilehden sisällölle. Esimerkkinä lisäämme WYSIWYG-editorin.
• (Valinnainen) Muita välilehtien otsikoita ja välilehtien sisältöjä niin monelle välilehdelle, jota haluamme tukea.

Muista kenttien nimet, sillä sinun on viitattava niihin myöhemmin. Olen määrittänyt välilehden otsikon muotoon tab_titleja WYSIWYG-kentän muotoon tab_contents.

Jos haluat mieluummin lisätä kentät koodin mukaan, tässä on esimerkki. Lisää tämä teema- functions.phptai laajennustiedostoosi:

Jos haluat enemmän kuin yhden välilehden, lisää vain toinen välilehden otsikko ja sisältö -merkin jälkeen line #19. Muista vain pitää nameainutlaatuinen.

Kun muokkaamme tuotetta, meidän pitäisi nähdä tämä metalaatikko:

Mukautettujen välilehtien tulostaminen

WooCommercen avulla voimme suodattaa woocommerce_product_tabsvälilehtien käsittelyä. Tämän suodattimen argumenttina saat taulukon kaikille välilehdille. Taulukko koostuu kunkin välilehden matriiseista, joissa on yksilölliset avaimet. Mutta kunkin välilehden matriisi ei sisällä välilehden sisällön todellista tulosta. Sen sijaan se odottaa takaisinsoittoa – funktion nimeä, jota WooCommerce suorittaa välilehden sisällön tulostamiseksi.

Kun olet funktion sisällä, voit käyttää global $postnykyistä viestiobjektia, tai jos haluat WooCommercen luoman tuoteobjektin, tee yksinkertaisesti global $product. Tarvitsemme viestitunnuksen, jotta voimme noutaa mukautettujen kenttiemme arvon ACF-toiminnolla [get_field](https://www.advancedcustomfields.com/resources/get_field/)(). Alla olevassa koodiesimerkissä haemme vain välilehden otsikon ja tarkistamme, onko tämä tyhjä vai ei. Jos se ei ole, se lisää uuden välilehden taulukkoon. On järkevää olla lisäämättä välilehtiä, joissa välilehden otsikko on tyhjä.

Huomaa, että voit priorityohjata välilehden sijaintia painikkeella. Jos esimerkiksi asetat sen arvoon 1, välilehti tulee näkyviin ensimmäisenä, ennen kaikkia WooCommercen välilehtiä. Määritä funktion nimi callbackelementille " ". Määrittelemme rivissä #17toiminnon, jota WooCommerce suorittaa välilehden sisällön tulostamiseksi.

Nämä välilehden takaisinkutsutoiminnot saavat kaksi parametria; nykyisen välilehden kaikkien arvojen avain ja taulukkoelementti. Takaisinsoittotoiminnossamme tulostamme välilehden otsikon uudelleen viitaten toimitettuun $tabtaulukkoon. WooCommerce toistaa niiden välilehtien otsikot sisällä, h2joten teemme samoin. Ja sitten käytämme get_field()saamaan välilehden sisällön arvon ja yksinkertaisesti toistamaan arvon. Säädä riviä #23sopimaan mihin tahansa lisäämääsi kenttätyyppiin (esim. lähetä objektin valitsin, kuvat tai jotain muuta).

Huomaa, että olen käärinyt kaiken if-tarkistukseen, joka tarkistaa, onko sekä WooCommerce että ACF aktivoitu. Tämä on hyvä käytäntö estääksesi sivustosi rikkoutumisen.

Ja siinä se! Olet nyt onnistuneesti luonut koodin mukautettujen WooCommerce-välilehtien lisäämiseksi!

Jos haluat tehdä tämän ACF Pron toistinkentän avulla, joka tukee rajatonta määrää välilehtiä, lue eteenpäin.

Opetusohjelma ACF Prolle ja toistimelle

ACF-kenttien lisääminen

Lisää ryhmäsi joko ACF:n järjestelmänvalvojan käyttöliittymällä tai lisäämällä ne koodilla teema- tai laajennustiedostoihin. Meidän on määritettävä seuraavat:

• Ryhmä, joka näyttää, kun viestityyppi on yhtä suuri kuin WooCommerce-tuote
• Toistin, jossa on seuraavat alakentät:
  • Tekstinsyöttö välilehden otsikolle
  • Mitä kenttiä haluat välilehden sisällölle.

Näin määrität sen ACF-järjestelmänvalvojan avulla:

Tai voit lisätä ryhmän koodilla seuraavasti:

Joka tapauksessa sinun pitäisi päätyä tähän metalaatikkoon, kun muokkaat tuotteita:

Mukautettujen välilehtien tulostaminen

Mukautettujen välilehtien näyttäminen on hyvin samanlaista kuin mitä teimme yllä ilmaisessa versiossa. Suodatamme woocommerce_product_tabs, mutta tässä käymme läpi jokaisen toistimen toistetun kohteen. Tarvitsemme tavan tunnistaa toistimen jokainen elementti avaimilla, joten luomme avaimen itse käyttämällä silmukan sijaintia ja välilehden otsikon slug-versiota. Takaisinsoittofunktiossa poimimme silmukan sijainnin avaimesta ja käytämme tätä viittaamaan toistimemme taulukkoon.

Suodatintoimintomme sisällä haemme toistimen arvon ja tarkistamme, ettei se ole tyhjä. Määrittelemme sitten laskurimuuttujan, joka alkaa 0:sta (taulukot alkavat aina paikasta 0), jota lisäämme 1:llä kullekin silmukan sisällä olevalle elementille (rivillä #18). Jokaisen toistinkohteen silmukassa määritämme ne kaikki samaan takaisinsoittotoimintoon. Käytämme WordPressin toimintoa [sanitize_title](https://developer.wordpress.org/reference/functions/sanitize_title/)()välilehden otsikon muuntamiseen sen slug-versioksi ja lisäämme sen avaimeen.

Takaisinsoittofunktiossamme rivillä #31 - 32teemme joitain yksinkertaisia ​​merkkijonokäsittelyjä laskurin arvon poimimiseksi (joka alkaa 0:sta ja kasvaa 1:llä jokaiselle kohteelle). Käytämme tätä sitten yksinkertaisesti toistintaulukon indeksinä oikean välilehden sisältökentän hakemiseksi.

Ja siinä se! Olet nyt ottanut käyttöön rajattoman määrän mukautettuja välilehtiä WooCommerceen!

Muista, että voit korvata WYSIWYG:n millä tahansa kentällä. Sinun tarvitsee vain muuttaa tapaa, jolla tulostat kentän rivillä #23.

Johtopäätös

Oman koodin kirjoittaminen mukautettujen WooCommerce-välilehtien lisäämistä varten on todella helppoa, kun olet ymmärtänyt WooCommercen peruskäsitteen. Se ei edes vaadi paljon koodia. Tämä on aivan hyvä ratkaisu sinulle, joka et halua tai pysty investoimaan laajennuslisensseihin tai tarvitset vain yksinkertaisen ratkaisun verkkokauppaasi.