Ein EIGENES custom field Erstellen. Joomlacamp Essen 2018 #jc18de

Größe: px

Ab Seite anzeigen:

Download "Ein EIGENES custom field Erstellen. Joomlacamp Essen 2018 #jc18de"

Hildegard Friedrich
vor 5 Jahren
Abrufe

1 Ein EIGENES custom field Erstellen Joomlacamp Essen 2018 #jc18de

2 Ich BIN EliSa Joomladay Germany 2017 #jd17de

3 EingabeFelder -> AusGABE Was Sind Custom FielDs?

4 Wo Kann ich SIE VERWENDEN? 1. user 2. BEITRÄGE 3. KONTAKT 4. ANDERE

5 WIE KANN MAN FELDER ANPASSEN? 1. ERSTELLEN VON Layout/View Overrides 2. ERSTELLEN VON PLUGIN OVERRIDES 3. EIN EIGENES FELD PLUGIN ERSTELLEN

6 1. BEISPIEL: ERSTELLEN VON Layout/View Overrides <?php //Colour in rgb $colour = $userfields['colourfield']->value; list($r, $g, $b) = sscanf($colour, "#%02x%02x%02x"); $rgbcolour = $r.','.$g.','.$b; // CSS Definieren $css = "body.site { background:.$colour."; }\n"; $css.= ".page-header, a { color:.$colour."; }\n"; $css.= ".arbeitgeberbox { background-color:rgba(". $rgbcolour.",0.1); border:1px solid ". $colour. "; padding:20px; }\n"; $css.= ".merkmale { text-align:center; font-size:1.2em; font-weight:bold; background-color:rgba(". $rgbcolour.",0.3); border:1px solid ". $colour. "; color:". $colour. "; padding:10px; }\n";

7 2. BEISPIEL: ERSTELLEN VON MEDIA OVERRIDES

8 VIdeo embed PDF Display WELCHE FELDER KANN ICH ERSTELLEN? Maps Lightboxes weather Widget Calendars Audio Embed Galleries Sliders AUTOCOMPLETE DaTEPICKER slideshare

9 addresscomplete.xml params addresscomplete..xml fields addresscomplete..php addresscomplete.php tmpl addresscomplete..php language en-gb en-gb.plg_fields_addresscomplete.ini en-gb.plg_fields_addresscomplete.sys.ini STRUKTUR

10 BEISPIELDATEIEN RUNTERLADEN /coolcat-creations /plg_fields_addresscomplete /coolcat-creations /plg_fields_addresscomplete

11 InstallAtions- DATEI ADDRESSCOMPLETE.xml Diese Datei ist die Manifest Datei für dein Plugin. Hier stehen alle wichtigen Informationen für die Installation. Außerdem kannst du hier auch globale Parameter für das Feld hinzufügen.

12 <?xml version="1.0" encoding="utf-8"?> <extension type="plugin" version="3.7.0" group="fields" method="upgrade"> <name>plg_fields_addresscomplete</name> <author>elisa Foltyn</author> <creationdate> </creationdate> <copyright>coolcat creations, Elisa Foltyn</copyright> <license>gnu General Public License version 2 or later</license> <author >joomla@coolcat-creations.com</author > <authorurl> <version>1.0.1</version> <description>plg_fields_addresscomplete_desc</description> <files> <filename plugin="addresscomplete">addresscomplete.php</filename> <folder>fields</folder> <folder>language</folder> <folder>params</folder> <folder>tmpl</folder> </files> <language folder="language"> <language tag="en-gb">en-gb.plg_fields_addresscomplete.ini</language> <language tag="en-gb">en-gb.plg_fields_addresscomplete.sys.ini</language> </language> <config> <fields name="params"> <fieldset name="basic"> </fieldset> </fields> </config> <updateservers> <server type="extension" priority="1" name="address complete Joomla! Custom Field Update Site > </server> </updateservers> </extension>

13 FELD- PARAMETER PARAMS/ ADDRESSCOMPLETE.xml Hier kannst du Parameter für das Feld hinzufügen. Im Beispiel-Projekt ist nur eine leere Parameter-Hülle hinterlegt. Wenn du hier zum Beispiel den Platzhaltertext des Eingabefeldes beeinflussen willst, kannst du in der XML Datei ein Feld einfügen mit dem du den Placeholder individualisieren kannst.

14 <?xml version="1.0" encoding="utf-8"?> <form> <fields name="fieldparams"> <fieldset name="fieldparams"> </fieldset> </fields> </form>

15 EINGABEFELD FIELDS/ ADDRESSCOMPLETE.PHP Unser Feld ist ein einfaches Text-Eingabefeld bei dem durch die Vergabe einer speziellen Klasse und das Hinzufügen eines Skriptes ein Address Autocomplete Feld gezaubert wird. Wir erweitern also das vorhandene JFormText Feld mir Hilfe von class JFormFieldAdresscomplete extends JFormFieldText Um das Feld zu erstellen kann man die Setup Methode oder die Getinput Methode verwenden. Dokumentation Algolia:

16 <?php /** Joomla.Plugin Fields.Addresscomplete * Copyright (C) 2018 COOLCAT creations. All rights reserved. GNU General Public License version 2 or later; see LICENSE.txt */ defined('_jexec') or die(); JFormHelper::loadFieldClass('text'); class JFormFieldAddresscomplete extends JFormFieldText { protected $type = 'Addresscomplete'; public function getinput() { $doc = JFactory::getDocument(); $doc->addscript(' array(), array('defer' => 'defer')); $doc->addscriptdeclaration('document.addeventlistener("domcontentloaded", function(event) { var placesautocomplete = places({ container: document.queryselector(".address-input") }); });'); $placeholder = JText::_('PLG_FIELDS_ADDRESSCOMPLETE_DESTINATION'); $field = '<input return $field; } name="'. $this->name. '" id="'. $this->id. '" class="address-input" placeholder="'. $placeholder. '">'; }

17 Initialisierung des FELD PLUGINS PLUGIN HAUPTDATEI ADDRESSCOMPLETE.php Damit das Feld überhaupt angezeigt wird, muss es im Plugin aufgerufen werden. Das erreichen wir mit wenigen Zeilen Code: <?php /** Joomla.Plugin Fields.Addresscomplete * Copyright (C) 2018 COOLCAT creations. All rights reserved. GNU General Public License version 2 or later; see LICENSE.txt */ defined('_jexec') or die; JLoader::import('components.com_fields.libraries.fieldsplugin', JPATH_ADMINISTRATOR); class PlgFieldsAddresscomplete extends FieldsPlugin { }

18 AUSGABE IM FRONTEND TMPL /ADDRESSCOMPLETE.PHP Im Beispiel-Projekt wird die Nutzereingabe als Wert in der Datenbank gespeichert und so im Frontend ausgegeben: <?php /** Joomla.Plugin Fields.Addresscomplete * Copyright (C) 2018 COOLCAT creations. All rights reserved. GNU General Public License version 2 or later; see LICENSE.txt */ defined('_jexec') or die; if (!$field->value $field->value == '-1') { return; } echo $field->value;

19 FERTIG! Unser EinGabeFELD

20 FERTIG Unsere AUSGABE

21 MEHR KREATIV WERDEN DARAUS MACHEN! travel.custom-fields.net Auf der Beispiel Webseite sieht man, was man mit einer einfachen Adress-Eingabe alles erreichen kann. - Beispiele: - Wetter anzeigen - Flickr Galerie - Open Street Map anzeigen

Ähnliche Dokumente

Template Programmierung mit Joomla!

Joomla! DAY TM AUSTRIA 2015 Template Programmierung mit Joomla! Inhalt Einstieg in die Joomla! Template Programmierung Inhalt Einleitung Planung Joomla! Template Programmierung Joomla! Template Demo Fragen