{"id":233512,"date":"2023-02-15T17:35:00","date_gmt":"2023-02-15T14:35:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233512"},"modified":"2022-11-11T00:06:09","modified_gmt":"2022-11-10T21:06:09","slug":"esercitazione-creare-un-tipo-di-campo-moduli-di-gravita-personalizzati-avanzati-e-come-gestire-piu-valori-di-input","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/esercitazione-creare-un-tipo-di-campo-moduli-di-gravita-personalizzati-avanzati-e-come-gestire-piu-valori-di-input\/","title":{"rendered":"Esercitazione: creare un tipo di campo Moduli di gravit\u00e0 personalizzati avanzati e come gestire pi\u00f9 valori di input"},"content":{"rendered":"\n

In questo tutorial ti mostrer\u00f2 come creare un tipo di campo Gravity Forms personalizzato avanzato. Il campo avr\u00e0 pi\u00f9 input e richieder\u00e0 una gestione speciale per memorizzare e visualizzare i valori inviati.<\/p>\n

Cosa faremo<\/h2>\n

In questo esempio sto assumendo un esempio di proprietario di un sito Web WordPress che si occupa delle consegne di pranzo sul posto di lavoro. Il proprietario ha un modulo per le persone da compilare che tipo di pranzo vogliono e quanti per ogni giorno della settimana. Questo pu\u00f2 essere risolto come un metodo simile a una tabella per inserire un numero per qualsiasi corso in qualsiasi giorno in cui desiderano essere consegnati.<\/p>\n

\"Esercitazione:<\/a><\/p>\n

I corsi sono modificabili nelle impostazioni del campo nell’editor di moduli e possono essere modificati in qualsiasi momento. E per ogni invio di modulo, il proprietario del sito Web ottiene una panoramica completa dei valori inviati:<\/p>\n

\"Esercitazione:<\/a><\/p>\n

Ovviamente questo \u00e8 solo un esempio e probabilmente dovrai adattarlo al tuo caso. Ma con questo caso di esempio abbiamo la possibilit\u00e0 di imparare a gestire pi\u00f9 input in un singolo campo. Dovrebbe darti alcune idee su come gestire il tuo tipo di campo personalizzato.<\/p>\n

Prima di iniziare a codificare<\/h2>\n

Prima di iniziare abbiamo bisogno di un posto dove aggiungere il nostro codice. Puoi aggiungerlo nel functions.php<\/code>file del tuo tema o del tuo plug-in.<\/p>\n

Il metodo che ho scelto di utilizzare \u00e8 orientato agli oggetti, il che significa creare una classe che estenda la GF_Field<\/code>classe di Gravity Forms. Ti consiglio di mettere la classe in un file separato nel tuo progetto. Dovresti anche verificare che il plug-in Gravity Forms esista prima di includere la tua classe per evitare il crash del tuo sito.<\/p>\n

Se sei interessato puoi dare un’occhiata alla documentazione di Gravity Forms su GF_Field<\/a>. Troverai pi\u00f9 funzioni e variabili di cui potresti aver bisogno per il tuo tipo di campo.<\/p>\n

Estendendo la GF_Field<\/code>classe possiamo semplicemente scegliere di sovrascrivere le funzioni che dobbiamo modificare. Per quanto riguarda le funzioni che non sovrascriviamo, Gravity Forms eseguir\u00e0 il valore predefinito definito all’interno di GF_Field<\/code>. Nel tutorial di seguito esamineremo ogni funzione che dobbiamo sovrascrivere per il nostro campo personalizzato una per una. Senza ulteriori indugi, iniziamo!<\/p>\n

Creazione di un tipo di campo personalizzato<\/h2>\n

Il primo passo \u00e8 definire una classe PHP personalizzata che estenda GF_Field<\/code>. Assegna alla classe un nome univoco e assicurati che sia incluso nel tuo progetto. Dopo la definizione della classe eseguiamo la register()<\/code>funzione static GF_Field<\/code>passando un’istanza della nostra classe come parametro. Questo inizializza la nostra classe e registra il tipo di campo.<\/p>\n

L’unica variabile richiesta di cui hai bisogno all’interno della tua classe \u00e8 $type<\/code>. La variabile di classe $type<\/code>deve essere univoca ed \u00e8 un nome slug del tipo di campo. Nel mio esempio l’ho chiamato ‘ food_delivery<\/code>‘.<\/p>\n

if (class_exists('GF_Field')) {\n    class FoodDelivery extends GF_Field {\n        public $type = 'food_delivery';\n\u00a0\n        \/\/ The rest of the code is added here...\n    }\n    GF_Fields::register(new FoodDelivery());\n}<\/code><\/pre>\n
Con questo piccolo pezzo di codice il nostro tipo di campo personalizzato dovrebbe essere aggiunto come scelta disponibile nell’editor Gravity Forms. Per impostazione predefinita appare alla fine della casella "Campi standard". Poich\u00e9 non abbiamo ancora assegnato un nome corretto al nostro campo (questo \u00e8 il passaggio successivo), il pulsante \u00e8 etichettato come il valore di $type<\/code>.<\/p>\n
\"Esercitazione:<\/a><\/p>\n
Definizione del nome del campo<\/h2>\n
Il passo successivo \u00e8 facile; semplicemente dando al nostro campo un nome migliore. Per fare ci\u00f2 sovrascriviamo la funzione get_form_editor_field_title()<\/code>. Tutto quello che dobbiamo fare \u00e8 restituire una stringa con il nome del campo.<\/p>\n
public function get_form_editor_field_title() {\n    return esc_attr__('Food Delivery', 'txtdomain');\n}<\/code><\/pre>\n
Con questa funzione nella nostra classe il pulsante per aggiungere il campo viene aggiornato con un’etichetta molto migliore.<\/p>\n
Modifica della categoria del campo<\/h2>\n
Questo passaggio \u00e8 facoltativo. Come impostazione predefinita, il nostro tipo di campo personalizzato appare nella casella "Campi standard", ma possiamo cambiarlo. Supponiamo di volere che appaia invece all’interno della casella "Campi avanzati".<\/p>\n
Per cambiare la categoria in cui vogliamo che appaia il campo, sovrascriviamo la funzione get_form_editor_button()<\/code>. Dobbiamo restituire un array associativo con due elementi. Come valore per la chiave ‘ group<\/code>‘ fornisci il nome interno della categoria in cui desideri che appaia il pulsante. Le opzioni disponibili qui sono ‘ standard_fields<\/code>‘, ‘ advanced_fields<\/code>‘, ‘ post_fields<\/code>‘ o ‘ pricing_fields<\/code>‘. (Puoi anche creare la tua categoria, ma non \u00e8 trattata qui). Il secondo elemento nell’array necessita della chiave ‘ text<\/code>‘ e per questo restituiamo semplicemente il nome del campo chiamando get_form_editor_field_title()<\/code>. Questa \u00e8 la funzione che abbiamo appena creato sopra.<\/p>\n
public function get_form_editor_button() {\n    return [\n        'group' => 'advanced_fields',\n        'text'  => $this->get_form_editor_field_title(),\n    ];\n}<\/code><\/pre>\n
Ora il pulsante per aggiungere il nostro tipo di campo personalizzato viene spostato nella casella "Campi avanzati".<\/p>\n
Attivazione delle impostazioni in loco<\/h2>\n
Se hai provato ad aggiungere il tipo di campo in un modulo, potresti aver notato che non ci sono impostazioni. Non puoi nemmeno modificare l’etichetta. Il modo in cui funziona \u00e8 che tutti i tipi di impostazioni sono effettivamente presenti, sono semplicemente tutti nascosti con CSS di Gravity Forms. Dobbiamo definire individualmente quali impostazioni vogliamo abilitare e Gravity Forms mostrer\u00e0 quindi le impostazioni scelte per noi.<\/p>\n
Dobbiamo definire la funzione get_form_editor_field_settings()<\/code>e restituire un array di tutte le impostazioni che non vogliamo nascondere per il nostro tipo di campo. Quali impostazioni vuoi aggiungere dipende interamente da te e dal tuo progetto. Tieni presente che il tuo campo dovrebbe supportare tutte le impostazioni che attivi, altrimenti non ha senso mostrare un’impostazione per esso.<\/p>\n
Ho creato una rapida panoramica dei nomi delle impostazioni di seguito. Questo \u00e8 tutt’altro che un elenco completo, perch\u00e9 ci sono molte impostazioni che sono praticamente utili solo per tipi di campo molto specifici. Ad esempio il formato del telefono, il formato data\/ora e un sacco di impostazioni relative ai campi Posta e Prezzi.<\/p>\n
Scheda Generale<\/h4>\n