{"id":233459,"date":"2023-02-15T17:24:00","date_gmt":"2023-02-15T14:24:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233459"},"modified":"2022-11-10T23:48:08","modified_gmt":"2022-11-10T20:48:08","slug":"handledning-skapa-en-avancerad-faelttyp-foer-anpassade-gravitationsformulaer-och-hur-man-hanterar-flera-inmatningsvaerden","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/handledning-skapa-en-avancerad-faelttyp-foer-anpassade-gravitationsformulaer-och-hur-man-hanterar-flera-inmatningsvaerden\/","title":{"rendered":"Handledning: Skapa en avancerad f\u00e4lttyp f\u00f6r anpassade gravitationsformul\u00e4r och hur man hanterar flera inmatningsv\u00e4rden"},"content":{"rendered":"\n

I den h\u00e4r handledningen visar jag dig hur du skapar en avancerad anpassad Gravity Forms-f\u00e4lttyp. F\u00e4ltet kommer att ha flera inmatningar och kommer att beh\u00f6va speciell hantering f\u00f6r att lagra och visa de inskickade v\u00e4rdena.<\/p>\n

Vad vi ska g\u00f6ra<\/h2>\n

I det h\u00e4r exemplet utg\u00e5r jag fr\u00e5n ett exempel p\u00e5 en WordPress-webbplats\u00e4gare som sysslar med lunchleveranser p\u00e5 en arbetsplats. \u00c4garen har ett formul\u00e4r d\u00e4r folk kan fylla i vilken typ av lunch de vill ha och hur m\u00e5nga f\u00f6r varje dag i veckan. Detta kan l\u00f6sas som en tabellliknande metod f\u00f6r att mata in ett nummer f\u00f6r vilken kurs som helst p\u00e5 vilken dag de vill ha leverans.<\/p>\n

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

Kurserna \u00e4r redigerbara i f\u00e4ltets inst\u00e4llningar i formul\u00e4rredigeraren och kan \u00e4ndras n\u00e4r som helst. Och f\u00f6r varje formul\u00e4rinl\u00e4mning f\u00e5r webbplats\u00e4garen en fullst\u00e4ndig \u00f6versikt \u00f6ver de inl\u00e4mnade v\u00e4rdena:<\/p>\n

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

Uppenbarligen \u00e4r detta bara ett exempel och du m\u00e5ste f\u00f6rmodligen anpassa detta till ditt fall. Men med det h\u00e4r exemplet f\u00e5r vi en chans att l\u00e4ra oss hur man hanterar flera input i ett enda f\u00e4lt. Det borde ge dig n\u00e5gra id\u00e9er om hur du hanterar din egen anpassade f\u00e4lttyp.<\/p>\n

Innan du b\u00f6rjar koda<\/h2>\n

Innan vi b\u00f6rjar beh\u00f6ver vi en plats f\u00f6r att l\u00e4gga till v\u00e5r kod. Du kan l\u00e4gga till detta i ditt tema functions.php<\/code>eller din plugin-fil.<\/p>\n

Metoden jag har valt att g\u00e5 efter \u00e4r objektorienterad, vilket inneb\u00e4r att skapa en klass som ut\u00f6kar Gravity Forms GF_Field<\/code>klass. Jag rekommenderar att du l\u00e4gger klassen i en separat fil i ditt projekt. Du b\u00f6r ocks\u00e5 kontrollera att Gravity Forms plugin finns innan du inkluderar din klass f\u00f6r att f\u00f6rhindra att din webbplats kraschar.<\/p>\n

Om du \u00e4r intresserad kan du ta en titt p\u00e5 Gravity Forms dokumentation p\u00e5 GF_Field<\/a>. Du hittar fler funktioner och variabler som du kan beh\u00f6va f\u00f6r din f\u00e4lttyp.<\/p>\n

Genom att ut\u00f6ka GF_Field<\/code>klassen kan vi helt enkelt v\u00e4lja att \u00e5sidos\u00e4tta de funktioner vi beh\u00f6ver \u00e4ndra. N\u00e4r det g\u00e4ller de funktioner vi inte \u00e5sidos\u00e4tter, kommer Gravity Forms att k\u00f6ra standarden som definieras inuti GF_Field<\/code>. I handledningen nedan g\u00e5r vi igenom varje funktion vi beh\u00f6ver \u00e5sidos\u00e4tta f\u00f6r v\u00e5rt anpassade f\u00e4lt en efter en. Utan vidare, l\u00e5t oss b\u00f6rja!<\/p>\n

Skapa en anpassad f\u00e4lttyp<\/h2>\n

Det f\u00f6rsta steget \u00e4r att definiera en anpassad PHP-klass som ut\u00f6kar GF_Field<\/code>. Ge klassen ett unikt namn och se till att det ing\u00e5r i ditt projekt. Efter klassdefinitionen k\u00f6r vi den register()<\/code>statiska funktionen GF_Field<\/code>genom att skicka en instans av v\u00e5r klass som parameter. Detta initierar v\u00e5r klass och registrerar f\u00e4lttypen.<\/p>\n

Den enda obligatoriska variabeln du beh\u00f6ver i din klass \u00e4r $type<\/code>. Klassvariabeln $type<\/code>m\u00e5ste vara unik och \u00e4r ett snigelnamn f\u00f6r din f\u00e4lttyp. I mitt exempel har jag d\u00f6pt det till ’ 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
Med denna lilla kodbit b\u00f6r v\u00e5r anpassade f\u00e4lttyp l\u00e4ggas till som ett tillg\u00e4ngligt val i Gravity Forms-redigeraren. Som standard visas den i slutet av "Standardf\u00e4lt"-rutan. Eftersom vi inte har gett v\u00e5rt f\u00e4lt ett r\u00e4tt namn \u00e4n (det \u00e4r n\u00e4sta steg), \u00e4r knappen m\u00e4rkt som v\u00e4rdet p\u00e5 $type<\/code>.<\/p>\n
\"Handledning:<\/a><\/p>\n
Definiera f\u00e4ltets namn<\/h2>\n
N\u00e4sta steg \u00e4r l\u00e4tt; helt enkelt ge v\u00e5rt omr\u00e5de ett b\u00e4ttre namn. F\u00f6r att g\u00f6ra det \u00e5sidos\u00e4tter vi funktionen get_form_editor_field_title()<\/code>. Allt vi beh\u00f6ver g\u00f6ra \u00e4r att returnera en str\u00e4ng med f\u00e4ltets namn.<\/p>\n
public function get_form_editor_field_title() {\n    return esc_attr__('Food Delivery', 'txtdomain');\n}<\/code><\/pre>\n
Med denna funktion i v\u00e5r klass uppdateras knappen f\u00f6r att l\u00e4gga till f\u00e4ltet med en mycket b\u00e4ttre etikett.<\/p>\n
\u00c4ndra f\u00e4ltkategori<\/h2>\n
Detta steg \u00e4r valfritt. Som standard visas v\u00e5r anpassade f\u00e4lttyp i rutan "Standardf\u00e4lt", men vi kan \u00e4ndra det. L\u00e5t oss anta att vi vill att det ska visas i rutan "Avancerade f\u00e4lt" ist\u00e4llet.<\/p>\n
F\u00f6r att \u00e4ndra kategorin vi vill att f\u00e4ltet ska visas i \u00e5sidos\u00e4tter vi funktionen get_form_editor_button()<\/code>. Vi m\u00e5ste returnera en associativ array med tv\u00e5 element. Som v\u00e4rde till nyckeln ’ group<\/code>’ anger du det interna namnet p\u00e5 kategorin du vill att knappen ska visas i. Tillg\u00e4ngliga alternativ h\u00e4r \u00e4r ’ standard_fields<\/code>’, ’ advanced_fields<\/code>’, ’ post_fields<\/code>’ eller ’ pricing_fields<\/code>’. (Du kan ocks\u00e5 skapa din egen kategori, men det tas inte upp h\u00e4r). Det andra elementet i arrayen beh\u00f6ver nyckeln ’ text<\/code>’ och f\u00f6r det returnerar vi helt enkelt f\u00e4ltets namn genom att anropa get_form_editor_field_title()<\/code>. Det h\u00e4r \u00e4r funktionen vi just skapat ovan.<\/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
Nu flyttas knappen f\u00f6r att l\u00e4gga till v\u00e5r anpassade f\u00e4lttyp till rutan "Avancerade f\u00e4lt".<\/p>\n
Aktiverar f\u00e4ltinst\u00e4llningar<\/h2>\n
Om du har f\u00f6rs\u00f6kt l\u00e4gga till f\u00e4lttypen i ett formul\u00e4r kanske du har m\u00e4rkt att det inte finns n\u00e5gra inst\u00e4llningar alls. Du kan inte ens redigera etiketten. S\u00e4ttet detta fungerar \u00e4r att alla typer av inst\u00e4llningar faktiskt finns d\u00e4r, de \u00e4r helt enkelt alla dolda med CSS av Gravity Forms. Vi m\u00e5ste definiera individuellt vilka inst\u00e4llningar vi vill aktivera, och Gravity Forms visar sedan de valda inst\u00e4llningarna \u00e5t oss.<\/p>\n
Vi m\u00e5ste definiera funktionen get_form_editor_field_settings()<\/code>och returnera en upps\u00e4ttning av alla inst\u00e4llningar som vi inte vill d\u00f6lja f\u00f6r v\u00e5r f\u00e4lttyp. Vilka inst\u00e4llningar du vill l\u00e4gga till \u00e4r helt upp till dig och ditt projekt. T\u00e4nk p\u00e5 att ditt f\u00e4lt ska st\u00f6dja vilka inst\u00e4llningar du \u00e4n aktiverar, annars \u00e4r det meningsl\u00f6st att visa en inst\u00e4llning f\u00f6r det.<\/p>\n
Jag har skapat en snabb \u00f6versikt \u00f6ver inst\u00e4llningarnas namn nedan. Detta \u00e4r l\u00e5ngt ifr\u00e5n en komplett lista \u2013 eftersom det finns m\u00e5nga inst\u00e4llningar som i stort sett bara \u00e4r anv\u00e4ndbara f\u00f6r mycket specifika f\u00e4lttyper. Till exempel telefonformat, datum\/tidsformat och en hel massa inst\u00e4llningar som \u00e4r relaterade till Postf\u00e4lt och Prisf\u00e4lt.<\/p>\n
Fliken Allm\u00e4nt<\/h4>\n