Selles õpetuses näitan teile, kuidas luua täpsemat kohandatud gravitatsioonivormide väljatüüpi. Väljal on mitu sisendit ja see vajab esitatud väärtuste salvestamiseks ja kuvamiseks spetsiaalset käsitsemist.

Mida me teeme

Selles näites eeldan näidet WordPressi veebisaidi omanikust, kes tegeleb lõunasöögi kohaletoimetamisega töökohas. Omanikul on ankeet, kus inimesed saavad täita, millist lõunasööki nad soovivad ja kui palju igaks nädalapäevaks. Seda saab lahendada tabelitaolise meetodina, mille abil sisestatakse mis tahes kursuse arv igal päeval, mida nad soovivad edastada.

Kursused on vormiredaktoris välja seadistustes redigeeritavad ja neid saab igal ajal muuta. Ja iga vormi esitamise kohta saab veebisaidi omanik täieliku ülevaate esitatud väärtustest:

Ilmselgelt on see vaid näide ja tõenäoliselt peate seda oma juhtumiga kohandama. Kuid selle näite puhul saame võimaluse õppida, kuidas käsitleda mitut sisendit ühel väljal. See peaks andma teile ideid, kuidas oma kohandatud väljatüüpi käsitleda.

Enne kodeerimise alustamist

Enne alustamist vajame koodi lisamise kohta. Saate selle lisada oma teemasse functions.phpvõi pistikprogrammi faili.

Meetod, mille valisin, on objektorienteeritud, mis tähendab klassi loomist, mis laiendab Gravity Formsi GF_Fieldklassi. Soovitan panna klassi oma projektis eraldi faili. Saidi kokkujooksmise vältimiseks peaksite enne klassi kaasamist kontrollima ka Gravity Formsi pistikprogrammi olemasolu.

Kui olete huvitatud, võite vaadata Gravity Formsi dokumentatsiooni saidil GF_Field. Siit leiate rohkem funktsioone ja muutujaid, mida võite oma väljatüübi jaoks vajada.

Klassi laiendamisega GF_Fieldsaame lihtsalt valida, kas tühistada funktsioonid, mida peame muutma. Mis puutub funktsioonidesse, mida me ei alista, siis Gravity Forms käivitab sees määratletud vaikeväärtused GF_Field. Allolevas õpetuses käsitleme ükshaaval iga funktsiooni, mille peame oma kohandatud välja jaoks alistama. Ilma pikema jututa alustame!

Kohandatud väljatüübi loomine

Esimene samm on kohandatud PHP klassi määratlemine, mis laieneb GF_Field. Andke klassile kordumatu nimi ja veenduge, et see oleks teie projekti kaasatud. Pärast klassi määratlust käivitame register()staatilise funktsiooni, GF_Fieldedastades parameetrina meie klassi eksemplari. See initsialiseerib meie klassi ja registreerib välja tüübi.

Ainus nõutav muutuja, mida oma klassi sees vajate, on $type. Klassi muutuja $typepeab olema kordumatu ja see on teie väljatüübi näpunäide. Oma näites panin sellele nimeks " food_delivery".


if (class_exists('GF_Field')) {
    class FoodDelivery extends GF_Field {
        public $type = 'food_delivery';
 
        // The rest of the code is added here...
    }
    GF_Fields::register(new FoodDelivery());
}

Selle väikese koodilõigu abil tuleks meie kohandatud väljatüüp lisada Gravity Forms redaktoris saadaoleva valikuna. Vaikimisi kuvatakse see kasti "Standardväljad" lõpus. Kuna me pole veel oma väljale õiget nime andnud (see on järgmine samm), on nupp tähistatud väärtusena $type.

Välja nime määramine

Järgmine samm on lihtne; lihtsalt andes meie valdkonnale parema nime. Selleks alistame funktsiooni get_form_editor_field_title(). Peame vaid tagastama stringi välja nimega.


public function get_form_editor_field_title() {
    return esc_attr__('Food Delivery', 'txtdomain');
}

Selle funktsiooniga meie klassis värskendatakse välja lisamise nuppu palju parema sildiga.

Välja kategooria muutmine

See samm on valikuline. Vaikimisi kuvatakse meie kohandatud väljatüüp kastis „Standardsed väljad", kuid me saame seda muuta. Oletame, et tahame, et see ilmuks kastis „Täpsemad väljad”.

Kategooria muutmiseks, milles välja kuvatakse, alistame funktsiooni get_form_editor_button(). Peame tagastama kahe elemendiga assotsiatiivse massiivi. Võtme väärtusena groupesitate selle kategooria sisemise nime, milles soovite nuppu kuvada. Siin on saadaval valikud " standard_fields", " advanced_fields", " post_fields" või " pricing_fields". (Saate luua ka oma kategooria, kuid seda siin ei käsitleta). Massiivi teine element vajab võtit ‘ text‘ ja selleks tagastame lihtsalt välja nime, helistades get_form_editor_field_title(). See on funktsioon, mille me just ülal lõime.

Nüüd on kohandatud väljatüübi lisamise nupp teisaldatud kasti "Täpsemad väljad".

Väljaseadete aktiveerimine

Kui olete proovinud vormile välja tüüpi lisada, võisite märgata, et sätteid pole üldse. Te ei saa isegi silti muuta. See toimib nii, et tegelikult on olemas kõik tüüpi sätted, need on Gravity Formsi CSS-iga lihtsalt peidetud. Peame individuaalselt määratlema, milliseid seadeid tahame lubada, ja Gravity Forms kuvab seejärel meie jaoks valitud seaded.

Peame määratlema funktsiooni get_form_editor_field_settings()ja tagastama kõigi sätete massiivi, mida me ei soovi oma väljatüübi puhul peita. Milliseid seadeid soovite lisada, sõltub täielikult teie ja teie projektist. Pidage meeles, et teie väli peaks toetama kõiki aktiveeritud sätteid, vastasel juhul pole selle seadete kuvamine mõttetu.

Olen loonud allpool kiire ülevaate seadete nimedest. See pole kaugeltki täielik loetelu – kuna on palju sätteid, mis on kasulikud ainult väga konkreetsete väljatüüpide puhul. Näiteks telefoni vorming, kuupäeva/kellaaja vorming ja terve hulk sätteid, mis on seotud väljadega Postitus ja Hinnakujundus.

Üldine vahekaart

Välja silt:label_setting
Välja kirjeldus:description_setting
Valikud:choices_setting
Nõutud:rules_setting
Duplikaate pole:duplicate_setting
Luba veerud:columns_setting
Luba valik "vali kõik":select_all_choices_setting
Luba valik "muu":other_choice_setting

Välimus vahekaart

Kohatäide:placeholder_setting
Välja sildi nähtavus ja kirjelduse paigutus:label_placement_setting
Kohandatud kinnitussõnum:error_message_setting
Kohandatud CSS-klass:css_class_setting
Välja suurus:size_setting

Vahekaart Täpsemalt

Administraatorivälja silt:admin_label_setting
Vaikeväärtus:default_value_setting
Luba parooli sisestamine:password_field_setting
Sunni SSL:force_ssl_field_setting
Nähtavus:visibility_setting
Luba välja dünaamiliselt täita:prepopulate_field_setting
Luba tingimusloogika:conditional_logic_field_setting
Luba lehe tingimusloogika:conditional_logic_page_setting

Meie näite puhul on kõige olulisemad välja silt, kirjeldus, valikud ja see, kas väli on kohustuslik või mitte. Lubame ka CSS-klassi, kohandatud valideerimissõnumi ja tingimusliku loogika sätteid.


public function get_form_editor_field_settings() {
    return [
        'label_setting',
        'choices_setting',
        'description_setting',
        'rules_setting',
        'error_message_setting',
        'css_class_setting',
        'conditional_logic_field_setting'
    ];
}

Värskendage vormiredaktorit ja nüüd peaksite meie väljale ilmuma kõik valitud sätted ja vahelehed. Gravity Forms haldab ja salvestab kõik seaded automaatselt.

Jätkake ja lisage valikute loendisse mõned üksused, et meil oleks, millega töötada. Siin on see, mille olen näitena üles seadnud:

Kohandatud vaikevalikute määratlemine

Kui olete harjunud Gravity Formsis nt raadionuppe või märkeruutusid kasutama, olete ilmselt märganud, et need on varustatud selliste valikutega nagu "Esimene valik", "Teine valik", "Kolmas valik". See on Gravity Formsi vaikekäitumine, kui ühtegi valikut pole salvestatud (varem) ja see käivitub ainult nende konkreetsete väljatüüpide puhul. Kuid meie kohandatud väljatüübi puhul valikuid ei täideta. See muudab selle pisut tülikaks, kuna te ei näe nuppu "+", et lisada mõni muu valik. Peaksite kasutama nuppu "Hulgilisa/Eelmääratletud valikud", lisama sinna mõned valikud ja pärast seda pääsete valikute lisamiseks juurde "+" nuppudele. Kuid mõningaid kohandatud valikuid on lihtne määratleda – vajate vaid klassimassiivi muutuja määratlemistpublic $choicesja Gravity Forms loovad automaatselt teie väljale eelmääratletud valikud, kui lisate selle oma vormidele.

Märkus. See on klassi muutuja, mille saate lisada klassi ülaossa, otse alla public $type. Iga valik peab olema massiiv, kusjuures valik peab olema võtme „ text” väärtus.

Pidage meeles, et kui olete välja juba vormile lisanud, siis see valikuid tagasiulatuvalt ei täida. See jõustub ainult siis, kui lisate vormile uue välja.

Märkus: Gravity Formsis näib olevat võimalik lisada valueigale valikule ka klahvid ‘ ‘. Kuid ma ei saanud seda tööle – väärtused muutuvad automaatselt samadeks, mis valikutekst.

Välja väärtuse defineerimine massiivina

Järgmine samm on üsna lihtne, kuid vajalik. Gravity Forms’i väljade vaikeväärtustena on stringid. Meil on vaja, et väärtus oleks massiiv, kuna töötame mitme sisendiga. Selleks määratleme funktsiooni is_value_submission_array()ja tagastame true.


public function is_value_submission_array() {
    return true;
}

See tagab, et saame oma mitme sisendi sisestatud väärtusega korralikult töötada.

Välja väljundi renderdamine

Kui tegemist on välja väljundi renderdamisega, tuleb arvestada paari asjaga.

Kõigepealt peate valima kahe funktsiooni vahel; get_field_input()või get_field_content(). Esimese meetodi puhul renderdab Gravity Forms teie väljale automaatselt ümbrisloendi elemendi, sildi, kirjelduse ja valideerimise konteineri ning teie juhite ainult sisemise välja väljundit. Teise meetodi puhul seda ei juhtu ja teie kontrollite rohkem välja väljundit. Siiski peate sildi, kirjelduse ja veateated käsitsi renderdama. Esimene meetod get_field_input()on enamikul juhtudel täiesti sobiv.

Teine asi, mida tuleb meeles pidada, on see, et välja renderdusfunktsioon mõjutab kolme erinevat asukohta. Need kolm on välja väljundi renderdamine esiservas, välja eelvaade vormiredaktoris ja lõpuks ka väli kirje redigeerimisel. Õnneks pakub Gravity Forms funktsioone, mis võimaldavad hõlpsalt määrata, millises vaates me oleme. Tavaliselt renderdaksite välja kõigil kolmel juhul ühtemoodi. Kuid kuna suure ja paljude sisenditega tabeli renderdamine muutub vormiredaktoris tarbetuks kohmakaks, olen otsustanud vormiredaktoris välja renderdada erinevalt.

Ja lõpuks peame tagama, et kõik sisendid saavad õige nameatribuudi, et Gravity Forms saaks vormi esitamisel selle väärtuse koguda. Kõik Gravity Formsi sisendid vajavad nameatribuute, mis järgivad seda reeglit: name="input_{FIELD_ID}"(mitmevaliku väljad kasutavad täiendavat ID-d, kuid me ei pea oma juhtumi puhul selle pärast muretsema). Meil on juurdepääs välja ID-le, kuna see on klassi muutuja (alates GF_Field). Kuid meie puhul oleme Gravity Formsile öelnud, et väärtus on massiiv, mitte ainsuse väärtus (eelmine samm), seega lisame atribuudi name järele sulud; name="input_{FIELD_ID}[]". Seega, kui vormi sees on välja ID-ga 4, peaks nimeatribuut olema " input_4[]".

Ma valin selle kasutamise, get_field_input()millel on kolm parameetrit. Esimene parameeter on vormiobjekt, mida me oma näite jaoks tegelikult ei vaja. Teine parameeter on praegune väärtus. See võib olla kas välja väärtus ajast, $_POSTmil vormi prooviti esitada, kuid see ei õnnestunud. Saame säilitada eelmised esitatud väärtused. Või kui funktsioon töötab kirje redigeerimisel, on väärtus esituses salvestatud väärtus. Hiljem käsitleme väärtust lähemalt. Ja kolmas parameeter on sisestusobjekt, mida me ka oma näite jaoks ei vaja.

Alustame juurutamist get_field_input(), mis ootab lõplikku renderdust stringina. Otsustan otsekohe tagastada tühja stringi, kui oleme vormiredaktoris – sest ma ei taha selles vaates renderdada täistabelit. Meetodi $this->is_form_editor()abil saame kontrollida, kas oleme vormi muutmise sees või mitte. Võite selle vahele jätta või renderdada midagi muud, kui soovite vormiredaktoris välja eelvaadet näha.

Järgmine samm on HTML-i koostamine tabeli jaoks, mis loob veergude ja iga kursuse elemendi jaoks ridade arvu päevade massiivi. Kuid kuna vajame juurdepääsu päevade massiivile (tabeli veergudele) mitmes kohas, peaksime selle määratlema klassimuutujana, muutes selle juurdepääsetavaks kõigi selle sees olevate funktsioonide kaudu. Ma määratlen klassi muutuja $delivery_dayspäevade massiiviga, mille jaoks tahan kohaletoimetamist pakkuda.


class FoodDelivery extends GF_Field {
    public $type = 'food_delivery';
 
    private $delivery_days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
 
    public function get_form_editor_field_title() {
        ...
}

See on vaid näide! Võib-olla soovite tuua veergude massiivi mujalt, mis pole kõvakoodiga.

Lähme tagasi get_field_input()ja koostame oma sisenditega tabeli. Kõigepealt liigun üle klassi muutuja ja genereerin tabeli pealkirjad. Seejärel vaatan valikute valikute väljaseadesse sisestatud valikuid. Sellele pääseb juurde klassimuutujast (alates GF_Field) $this->choices. Iga valiku jaoks esitan sisendi õige nime atribuutidega. Meil on juurdepääs välja ID-le GF_Fieldklassi muutujast $this->id.

Kui see kood on paigas, peaksime kasutajaliideses saama kena tabeli, mis on meie väljatüübi jaoks renderdatud! Ilmselt on HTML täielikult teie otsustada, see on vaid põhinäide.

Jätame selle funktsiooni praegu, kuid tuleme selle juurde hiljem tagasi, et esitatud väärtust käsitleda!

Väärtuse õige salvestamine

Praeguse seisuga salvestab Gravity Forms meie välja ühemõõtmelise massiivina, mis on täidetud sisestatud väärtuste ja tühjade stringidega, kus sisend oli tühi. Puudub teave selle kohta, millisele päevale või valikule väärtus kuulub, peale indeksi. Peame muutma selle ühemõõtmelise massiivi mitmemõõtmeliseks assotsiatiivseks massiiviks, kuhu salvestame päeva ja valikusildi. Seejärel saame hõlpsasti juurde pääseda näiteks salvestatud arvu väärtusele $value['Ham sandwich']['Monday']. Pärast seda massiivi teisendust peame ka massiivi serialiseerima, et Gravity Forms saaks väärtuse õigesti andmebaasi salvestada.

Peame selle väärtusmassiivi mitmesse kohta teisendama, nii et ma määratlen selle jaoks eraldi funktsiooni. Funktsioon aktsepteerib ühemõõtmelist massiivi ja teisendab selle mitmemõõtmeliseks massiiviks, kus on salvestatud päevade ja valikute väärtused:

See salvestab päevade nimed ja valikud otse välja väärtuse sisse. Sel viisil toimides on võimalik valikuid hiljem muuta ilma vanu kirjeid rikkumata.

Nüüd pöördume esitatud väärtuse salvestamist käsitleva funktsiooni alistamise juurde; get_value_save_entry(). Sellel on viis parameetrit, kuid vajame ainult esimest, mis on esitatud väärtus. Funktsiooni sees edastame väärtuse meie ülaltoodud kohandatud funktsioonile, järjestame selle tagastamise ja lõpuks tagastame uue väärtuse.

Sel hetkel salvestab Gravity Forms meie väärtused edukalt just nii, nagu me neid soovime! Salvestatud väärtus on nüüd aga järjestatud massiiv, mida Gravity Forms rõõmuga otse välja kajab. Peame rakendama funktsioone, et muuta see koledast serialiseeritud massiivist ilusaks väljundiks kõikjal, kus seda vajame.

Esitatud väärtuse kuvamine

Meil on kolm kohta, kus peame oma välja väärtuse väljundit muutma; kirjete loend, vaadates ühte kirjet ja Gravity Formsi liitmärgendites. Ühendamismärgendeid kasutatakse kõige sagedamini meiliteatistes. Näiteks {all_fields}on liitmärgend, mis kuvab meilides esitatud vormide täielikud väärtused.

Kuna renderdame sama väljundit kolmel erineval juhul, on mõttekas teha selle jaoks eraldi funktsioon. Olen määratlenud kohandatud funktsiooni, mis aktsepteerib väärtust; parameetrina järjestamata mitmemõõtmeline massiiv. Seejärel koostab funktsioon HTML-i, mis kuvab massiivi kaunil viisil ja tagastab stringi. Olen valinud pesastatud <ul>loendi, kuid saate väljundit igal juhul muuta.

Suurepärane, alustame esimesest: kirjete loendist: get_value_entry_list(). Siin saate valida täieliku väljundi väljastamiseks, kuid loendivaate jaoks võib see muutuda üsna kohmakaks ja kauaks, seega olen valinud lihtsalt fikseeritud stringi tagastamise, mis selgitab, et kasutaja peab täieliku ülevaate nägemiseks sisestama sisestuse üksikasjadesse.


public function get_value_entry_list($value, $entry, $field_id, $columns, $form) {
    return __('Enter details to see delivery details', 'txtdomain');
}

See on muidugi täielikult teie otsustada, näiteks võite valida ainult esimese x märkide arvu kuvamise.

Teine funktsioon on see, mis mõjutab üksiku kirje vaadet get_value_entry_detail():

Me lihtsalt tühistame massiivi WordPressi funktsiooniga [maybe_unserialize](https://developer.wordpress.org/reference/functions/maybe_unserialize/)()ja tagastame oma kohandatud funktsiooni stringi väljundi.

Lõplik funktsioon mõjutab liitmismärgendeid ja veenduge, et meie välja väärtus näeb hea välja ka meilides: get_value_merge_tag().

Pange tähele, et me ei pea selle funktsiooni väärtust tühistama.

Kui need kolm funktsiooni on paigas, peaksid kõik esitatud väärtused igal pool päris head välja nägema! Näiteks saadetud kirje vaatamisel:

Siiski on üks oluline asi puudu! Siinkohal meie sisendid ei säilita varem esitatud väärtusi ja see on üsna halb.

Säilitage meie sisendites varem esitatud väärtus

Peamiselt on kaks juhtumit, kus peame tagama, et sisendid säilitaksid eelnevalt esitatud väärtused. Esimene juhtum on siis, kui vormi esitamine ebaõnnestus (näiteks unustas kasutaja kohustusliku välja). Praegu kaotavad kõik meie sisendid kõik varem sisestatud väärtused ja kasutaja peab kõik väärtused uuesti sisestama. Teiseks, kui saidi omanik kirjet redigeerib, ei täideta sisestusi esitatud väärtustega, mis muudab väärtuste korrektse redigeerimise üsna võimatuks.

Selle parandamiseks pöördume tagasi funktsiooni juurde get_field_input(). Selle funktsiooni teine parameeter on väärtus. Kuid pidage meeles, et see funktsioon mõjutab nii esiserva renderdamist kui ka kirje redigeerimist. See on oluline, kuna salvestatud väärtus on neil kahel juhul erinev. Kui oleme eesotsas ja käsitleme vormi esitamist, on väärtus varem mainitud ühemõõtmelise massiivi vormingus. Ja kui me muudame kirjet, on väärtus järjestikuse mitmemõõtmelise massiivi vormingus. Seega peame esitatud väärtuse õigesti tõlkima, get_field_input()et tegelikele väärtustele hõlpsasti juurde pääseda.

Ülaltoodud koodis loome enne väljaväljundi jaoks HTML-i loomise alustamist muutuja $table_value, mis sisaldab õigesti tõlgitud väärtust. Kasutame GF_Fieldfunktsiooni is_entry_detail(), et kontrollida, kas me muudame kirjet või mitte. Ja siis on meie sisendite jaoks lihtne juurde pääseda õigetele väärtustele ja määrata need sisendite valueatribuutidena:

Ülaltoodud värskendamise get_field_input()korral peaksid kõik meie kohandatud sisendid olema alati täidetud eelmise väärtusega; olenemata sellest, kas see on kirje redigeerimine või vormi esitamise uuesti proovimine.

Praeguseks on kõik, mis puudutab meie väärtuste renderdamist ja salvestamist, tehtud ja töötab täielikult. Kuid on veel üks asi, mille peame kindlasti parandama.

Tehke meie põllupassi "nõutav" valideerimine

Gravity Forms kontrollib, kas välja väärtus on tühi või mitte. See on sageli vajalik, kui väli on seatud vajalikuks. Kui väli on kohustuslik, ei saa te vormi esitada, kui see on tühi, eks? Meie jaoks on probleem selles, et meil on mitu sisendit ja me tahame lubada, et mõned neist oleksid tühjad. See muutub probleemiks, kui meie väli on nõutud. Gravity Forms tõlgendab kahjuks sõna "kas see on tühi" valesti ja nõuab kõigi sisendite täitmist. Seega peame lisama reegli, mis ütleb, et kui vähemalt üks meie paljudest sisenditest on täidetud, ei ole välja koguväärtus tühi.

Viimane funktsioon, mille peame oma klassis alistama, on is_value_submission_empty(). Selle funktsiooni parameetrina saame ainult vormi ID, seega peame välja väärtuse ekstraheerima, kasutades selle $_POSTmassiivist toomiseks funktsiooni Gravity Forms: rgpost('input_<FIELD ID>'). Tagastus peaks olema ühemõõtmeline massiiv, mida oleme varem näinud. Peame vaid massiivi läbima ja naasta, falsekui leiame kuskilt väärtuse. Vastasel juhul tagastame true, kuna välja väärtus on tõepoolest täiesti tühi.

Kui ülaltoodud funktsioon on paigas, ei nurju meie väli esitamine, kui see on seatud kohustuslikuks ja vähemalt üks sisestus on täidetud.

Järeldus ja lõplik kood

See õpetus on teile üksikasjalikult näidanud, kuidas luua gravitatsioonivormide jaoks oma kohandatud täpsem väljatüüp. Isegi kui teie projekt erineb minu näitest, loodan, et teil on mõned näpunäited ja a-ha. Ma leian, et Gravity Formsi dokumentatsioon on mõnel juhul üsna puudulik ja see on paljude katse-eksituse tulemus! Igatahes, loodetavasti on sellest teile kasu olnud!

Viitamiseks siin on täielik kood tervikuna:

: awhitepixel.com