Tässä viestissä opimme lisäämään mukautettuja metakenttiä WooCommercen tuotetietojen metalaatikkoon; kuinka lisätä kenttiä ja miten lisätä oma mukautettu välilehti. Käsittelemme yksityiskohtaisesti kenttien lisäämistä, mihin ne lisätään, kuinka ne tallennetaan ja lopuksi kuinka ne näytetään käyttöliittymässä.
Mukautettujen kenttien lisääminen olemassa oleviin paneeleihin
Ensin tarkastellaan, kuinka kenttä lisätään olemassa oleviin paneeleihin. Meidän on tartuttava kahteen koukkuun; yksi kentän tulostamiseen ja toinen sen arvon tallentamiseen. Ensimmäinen koukku riippuu siitä, millä välilehdellä haluat näyttää kentän.
Tuotetietojen metalaatikko
Muista, että välilehden näkyvyys vaihtelee tuotetyypin mukaan. Esimerkiksi "Yleiset"-välilehti poistetaan, kun vaihdat ryhmiteltyyn tuotetyyppiin. Sinun ei pitäisi siis vain harkita, missä mukautetut kentäsi loogisesti sopivat, vaan sinun on harkittava paneelia, joka on näkyvissä kaikille haluamillesi tuotetyypeille. on luettelo yleisimmistä saatavilla olevista koukuista:
woocommerce_product_options_general_product_data("Yleinen")woocommerce_product_options_inventory_product_data("Varasto"woocommerce_product_options_shipping("Laivaus")woocommerce_product_options_related("Linkitetyt tuotteet")woocommerce_product_options_attributes("Attribuutit")woocommerce_product_options_advanced("Pitkälle kehittynyt")
Lomakkeen syötteen lisääminen
Mitä tulee lomakesyötteen tulostamiseen, voit tulostaa manuaalisesti lomakkeen syötteen HTML:n (esim <input type="text"...>. ), mutta WooCommerce tarjoaa yksinkertaisia toimintoja minkä tahansa tyyppisten kenttien lisäämiseen. Suosittelen käyttämään niitä. Katso täältä WooCommercen yleiskatsaus kaikista mahdollisista syöttötyypeistä ja siitä, mitä argumentteja voit ohjata tulosteen ohjaamiseen.
Mitä tulee tähän opetusohjelmaan, aion lisätä yksinkertaisen tekstisyötteen inventaario-välilehdelle kunkin paketin nimikkeiden lukumäärän kirjoittamiseksi. Mitä tulee avaimeen, jolla mukautettu arvosi tallennetaan, lisää aina alaviiva "_" ennen sitä, minun tapauksessani se on "_number_in_package":
Tallenna ja muokkaa tuotetta. Sinun pitäisi nähdä mukautettu kenttäsi Mainosjakauma-välilehden alareunassa:
Mukautettu kenttä "Numero paketissa" lisätty alareunaan
Huomautus kentän näkyvyydestä tuotetyypistä riippuen
WooCommercen tuotetietojen metaboxissa on paljon Javascriptiä, joka piilottaa ja näyttää sekä kentät että välilehdet/paneelit. Voit helposti hyödyntää tätä, jos haluat kenttäsi näkyvän vain tietyille tuotetyypeille antamalla kentällesi tietyt luokkanimet.
Oletetaan, että haluat kentän näkyvän vain, jos tuote on tyyppiä yksinkertainen tuote, tai haluat sen olevan piilossa, jos tuote on muuttuva tuote. WooCommerce kuuntelee tiettyjä luokkien nimiä, kuten show_if_<producttype>ja, hide_if_<producttype>ja voit yhdistää useita luokkia hienosäätääksesi, milloin kentän pitäisi olla piilossa tai näkyvissä.
Jos esimerkiksi haluan, että kenttäni näkyy vain yksinkertaisille tuotteille; Lisään tämän wrapper_classkentän syötteeseeni:
Voit myös asettaa wrapper_classesim. ‘ show_if_simple show_if_grouped‘, jotta kenttä näkyy vain tuotteille, jotka ovat joko yksinkertaisia tai ryhmiteltyjä. Kokeile itse!
Mukautetun kentän tallentaminen
Tällä hetkellä mitä tahansa kenttään syöttämääsi ei tallenneta. Tehdään se seuraavaksi. Kiinnitämme woocommerce_process_product_metaja tallennamme PHP:n globaalin arvon $_POST(lomakkeen lähetys).
Selitän nopeasti yllä olevan koodin. Voit yksinkertaisesti tallentaa kentän käyttämällä update_post_meta(), mutta uudemmissa WooCommercen versioissa tuotteen käsittelyä on parannettu huomattavasti. Niin kauan kuin sinulla on tuoteobjekti (jonka saamme soittamalla wc_get_product()viestitunnuksella), voit helposti muokata objektissa olevia tuotetietoja ja lopulta soittaa save()kerran päivittääksesi muutokset. Tämä on erittäin hyödyllistä varsinkin, jos haluat tallentaa useita kenttiä – jolloin sinun ei tarvitse suorittaa tietokantatoimintoja jokaiselle kentälle, vain viimeisen kerran, kun soitat save().
Käytä update_meta_data()objektissa jokaiselle tallennettavalle metadatalle.
Yllä olevalla toiminnolla kenttäsi pitäisi nyt tallentua, kun päivität sen editoinnissa! Huomaa myös, että käyttämällä WooCommercen toimintoja kentän tulostamiseen, sinun ei tarvitse hankkia kentän arvoa manuaalisesti ennen kentän tulostamista – se on täysin automaattinen.
Mukautetun kentän näyttäminen käyttöliittymässä
Ensimmäinen vaihe on selvittää, mitä koukkua haluat käyttää mukautetun kentän tulostamiseen. WooCommerce tarjoaa runsaasti saatavilla olevia koukkuja, joiden avulla voit hallita tarkasti, missä haluat tulostaa. Jos olet epävarma, katso plugins/woocommerce/templates/nämä tiedostot ja löydät helposti sopivan koukun. Voit myös ohittaa mallin ja lisätä tulosteen malliin, mutta suosittelen aina koukkujen käyttöä sen sijaan.
Mitä tulee minuun, haluan, että mukautettu kenttäni tulostetaan yksittäisessä tuotteessa metadiv:n sisällä – samalla, kun WooCommerce tulostaa SKU:n ja luokan. Käytän tähän koukkua woocommerce_product_meta_start. Koukkujen sisällä (kuten lähes kaikissa mallikoukuissa) pääset käsiksi globaaliin viestiobjektiin. Noudatan samaa peukalosääntöä kuin pelastaessani kenttäni; käytä get_meta()tuoteobjektissa mukautetun kentän hankkimiseen:
Mukautetun välilehden ja paneelin lisääminen tuotetietojen metalaatikkoon
Jos haluat lisätä kokoelman mukautettuja kenttiä, jotka kuuluvat loogisesti yhteen, voi olla hyvä idea ryhmitellä ne mukautetulle välilehdelle. Mukautetun välilehden lisäämiseksi Tuotetiedot-metalaatikkoon meidän on kytkettävä suodatin itse välilehden lisäämistä varten ja koukku paneelin sisällön tulostamista varten. Lopuksi meidän on vielä lisättävä sama koukku kuin yllä peltojen pelastamiseksi.
Esimerkiksi aion lisätä mukautetun paneelin nimeltä "Lisätiedot", johon haluan lisätä tekstinsyötön, valintaruudun ja numeron syötteen.
Ensin suodatamme woocommerce_product_data_tabsja lisäämme välilehtemme sen joukkoon.
Tässä on joitain hyödyllisiä argumentteja. Voit esimerkiksi classohjata välilehden näkyvyyttä tuotetyypistä riippuen käyttämällä näppäintä. Jos unohdat sen, tutustu yllä mainittuun kentän näkyvyyttä käsittelevään osioon. Muista kuitenkin, että välilehdissä luokat on annettava taulukkona, ei merkkijonona. Voit myös prioritymäärittää, missä välilehti näkyy. Esim. 25:n käyttäminen asettaa välilehden heti "Inventory" jälkeen.
Oletusarvoisesti välilehti näkyy jakoavainkuvakkeena. Valitettavasti (tällä hetkellä) ei ole mahdollista ohjata sitä suodattimen kautta. Jos tämä on sinulle tärkeää, voit lisätä järjestelmänvalvojan CSS:n ja tarjota eri luokan välilehdelle. Tässä on yleiskatsaus käytettävissä olevista kuvakkeista WooCommercessa.
Paneelin ulostulo
Seuraava vaihe on woocommerce_product_data_panelspaneelin sisällön kytkeminen ja tulostaminen. Tärkeä huomautus tässä on aloittaa tuloste attribuutilla, divjolla on idsama nimi kuin annoit näppäimeksi välilehdissä (minun tapauksessani ‘ additional_info‘). Mitä tulee sisältöön, se on sinun päätettävissäsi – voit lisätä mitä tahansa HTML-koodia, mutta suosittelen käyttämään WooCommercen toimintoja lomakekenttien tulostamiseen. Samat edut kenttien piilottamisessa tai näyttämisessä toimivat myös täällä.
Tallennuksen jälkeen sinun pitäisi nyt nähdä välilehti ja sen sisältö Tuotetiedot-metalaatikossa (ellei tuote tietenkään ole ulkoinen tuote).
Jäljelle jää vain tallentamaan mukautettuihin kenttiin syötetyt tiedot, ja käytämme tähän samaa prosessia kuin yllä:
Huomautus: WooCommercessa on yleinen sääntö, jonka mukaan kaikki valintaruudut tallennetaan nimellä " yes", jos ne on valittu, tai tyhjänä merkkijonona, jos niitä ei ole valittu. Noudattamalla WooCommercen sääntöä ja tallentamalla valitun valintaruudun nimellä " yes", tämä varmistaa, että toimin woocommerce_wp_checkbox()tarkoitetulla tavalla, kun se noutaa kenttäni nykyisen arvon.
Johtopäätös
Tässä postauksessa näytän, kuinka voit lisätä mukautettuja kenttiäsi WooCommercen tuotetietojen metalaatikkoon, tallentaa ne, hallita niiden näkyvyyttä ja yksinkertaisen esimerkin kentän tulostamisesta käyttöliittymään. Näytin myös kuinka lisätä mukautettu välilehti metalaatikkoon ja lisätä kentät sinne. Toivottavasti tämä auttoi sinua mukauttamaan WooCommercea itse!