joomla · design - ein eigenes custom field erstellen · 2018-02-05 · eingabefeld fields/...
TRANSCRIPT
![Page 1: Joomla · Design - Ein EIGENES custom field Erstellen · 2018-02-05 · EINGABEFELD FIELDS/ ADDRESSCOMPLETE.PHP Unser Feld ist ein einfaches Text-Eingabefeld bei dem durch die Vergabe](https://reader033.vdokument.com/reader033/viewer/2022042420/5f37429bc12fe12cab08304a/html5/thumbnails/1.jpg)
Ein EIGENES custom field
Erstellen
Joomlacamp Essen 2018 #jc18de
![Page 2: Joomla · Design - Ein EIGENES custom field Erstellen · 2018-02-05 · EINGABEFELD FIELDS/ ADDRESSCOMPLETE.PHP Unser Feld ist ein einfaches Text-Eingabefeld bei dem durch die Vergabe](https://reader033.vdokument.com/reader033/viewer/2022042420/5f37429bc12fe12cab08304a/html5/thumbnails/2.jpg)
Joomladay Germany 2017 #jd17de
Ich BIN EliSa
Twitter: @elisasophia
![Page 3: Joomla · Design - Ein EIGENES custom field Erstellen · 2018-02-05 · EINGABEFELD FIELDS/ ADDRESSCOMPLETE.PHP Unser Feld ist ein einfaches Text-Eingabefeld bei dem durch die Vergabe](https://reader033.vdokument.com/reader033/viewer/2022042420/5f37429bc12fe12cab08304a/html5/thumbnails/3.jpg)
Was Sind Custom FielDs?
EingabeFelder -> AusGABE
![Page 4: Joomla · Design - Ein EIGENES custom field Erstellen · 2018-02-05 · EINGABEFELD FIELDS/ ADDRESSCOMPLETE.PHP Unser Feld ist ein einfaches Text-Eingabefeld bei dem durch die Vergabe](https://reader033.vdokument.com/reader033/viewer/2022042420/5f37429bc12fe12cab08304a/html5/thumbnails/4.jpg)
1. user2. BEITRÄGE3. KONTAKT4. ANDERE
Wo Kann ich SIE VERWENDEN?
![Page 5: Joomla · Design - Ein EIGENES custom field Erstellen · 2018-02-05 · EINGABEFELD FIELDS/ ADDRESSCOMPLETE.PHP Unser Feld ist ein einfaches Text-Eingabefeld bei dem durch die Vergabe](https://reader033.vdokument.com/reader033/viewer/2022042420/5f37429bc12fe12cab08304a/html5/thumbnails/5.jpg)
1. ERSTELLEN VON Layout/View Overrides
2. ERSTELLEN VON PLUGIN OVERRIDES3. EIN EIGENES FELD PLUGIN ERSTELLEN
WIE KANN MANFELDER
ANPASSEN?
![Page 6: Joomla · Design - Ein EIGENES custom field Erstellen · 2018-02-05 · EINGABEFELD FIELDS/ ADDRESSCOMPLETE.PHP Unser Feld ist ein einfaches Text-Eingabefeld bei dem durch die Vergabe](https://reader033.vdokument.com/reader033/viewer/2022042420/5f37429bc12fe12cab08304a/html5/thumbnails/6.jpg)
<?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";
1. BEISPIEL: ERSTELLEN VON Layout/View Overrides
![Page 7: Joomla · Design - Ein EIGENES custom field Erstellen · 2018-02-05 · EINGABEFELD FIELDS/ ADDRESSCOMPLETE.PHP Unser Feld ist ein einfaches Text-Eingabefeld bei dem durch die Vergabe](https://reader033.vdokument.com/reader033/viewer/2022042420/5f37429bc12fe12cab08304a/html5/thumbnails/7.jpg)
2. BEISPIEL: ERSTELLEN VON MEDIA OVERRIDES
![Page 8: Joomla · Design - Ein EIGENES custom field Erstellen · 2018-02-05 · EINGABEFELD FIELDS/ ADDRESSCOMPLETE.PHP Unser Feld ist ein einfaches Text-Eingabefeld bei dem durch die Vergabe](https://reader033.vdokument.com/reader033/viewer/2022042420/5f37429bc12fe12cab08304a/html5/thumbnails/8.jpg)
GalleriesSliders
Lightboxes
VIdeo embed
DaTEPICKER
Calendars
AUTOCOMPLETE
weather WidgetAudio Embed
PDF Display
slideshare
Maps
WELCHE FELDER KANN ICH
ERSTELLEN?
![Page 9: Joomla · Design - Ein EIGENES custom field Erstellen · 2018-02-05 · EINGABEFELD FIELDS/ ADDRESSCOMPLETE.PHP Unser Feld ist ein einfaches Text-Eingabefeld bei dem durch die Vergabe](https://reader033.vdokument.com/reader033/viewer/2022042420/5f37429bc12fe12cab08304a/html5/thumbnails/9.jpg)
STRUKTUR! 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
![Page 10: Joomla · Design - Ein EIGENES custom field Erstellen · 2018-02-05 · EINGABEFELD FIELDS/ ADDRESSCOMPLETE.PHP Unser Feld ist ein einfaches Text-Eingabefeld bei dem durch die Vergabe](https://reader033.vdokument.com/reader033/viewer/2022042420/5f37429bc12fe12cab08304a/html5/thumbnails/10.jpg)
BEISPIELDATEIEN RUNTERLADENhttps://github.com /coolcat-creations /plg_fields_addresscomplete /coolcat-creations /plg_fields_addresscomplete
![Page 11: Joomla · Design - Ein EIGENES custom field Erstellen · 2018-02-05 · EINGABEFELD FIELDS/ ADDRESSCOMPLETE.PHP Unser Feld ist ein einfaches Text-Eingabefeld bei dem durch die Vergabe](https://reader033.vdokument.com/reader033/viewer/2022042420/5f37429bc12fe12cab08304a/html5/thumbnails/11.jpg)
InstallAtions- DATEI
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.
ADDRESSCOMPLETE.xml
![Page 12: Joomla · Design - Ein EIGENES custom field Erstellen · 2018-02-05 · EINGABEFELD FIELDS/ ADDRESSCOMPLETE.PHP Unser Feld ist ein einfaches Text-Eingabefeld bei dem durch die Vergabe](https://reader033.vdokument.com/reader033/viewer/2022042420/5f37429bc12fe12cab08304a/html5/thumbnails/12.jpg)
<?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>05-02-2018</creationDate> <copyright>COOLCAT creations, Elisa Foltyn</copyright> <license>GNU General Public License version 2 or later</license> <authorEmail>[email protected]</authorEmail> <authorUrl>www.coolcat-creations.com</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”>https://raw.githubusercontent.com/coolcat-creations/plg_fields_addresscomplete/master/manifest.xml
</server> </updateservers></extension>
![Page 13: Joomla · Design - Ein EIGENES custom field Erstellen · 2018-02-05 · EINGABEFELD FIELDS/ ADDRESSCOMPLETE.PHP Unser Feld ist ein einfaches Text-Eingabefeld bei dem durch die Vergabe](https://reader033.vdokument.com/reader033/viewer/2022042420/5f37429bc12fe12cab08304a/html5/thumbnails/13.jpg)
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.
![Page 14: Joomla · Design - Ein EIGENES custom field Erstellen · 2018-02-05 · EINGABEFELD FIELDS/ ADDRESSCOMPLETE.PHP Unser Feld ist ein einfaches Text-Eingabefeld bei dem durch die Vergabe](https://reader033.vdokument.com/reader033/viewer/2022042420/5f37429bc12fe12cab08304a/html5/thumbnails/14.jpg)
<?xml version="1.0" encoding="utf-8"?><form> <fields name="fieldparams"> <fieldset name="fieldparams"> </fieldset> </fields></form>
![Page 15: Joomla · Design - Ein EIGENES custom field Erstellen · 2018-02-05 · EINGABEFELD FIELDS/ ADDRESSCOMPLETE.PHP Unser Feld ist ein einfaches Text-Eingabefeld bei dem durch die Vergabe](https://reader033.vdokument.com/reader033/viewer/2022042420/5f37429bc12fe12cab08304a/html5/thumbnails/15.jpg)
EINGABEFELD
FIELDS/ADDRESSCOMPLETE.PHP Unser Feld ist ein einfaches Text-Eingabefeld bei dem durch die Vergabe einer speziellen Klasse und das Hinzufügen eines Skriptesein Address Autocomplete Feld gezaubert wird.
Wir erweitern also das vorhandene JFormText Feld mir Hilfe vonclass JFormFieldAdresscomplete extends JFormFieldText
Um das Feld zu erstellen kann man die Setup Methode oder die Getinput Methode verwenden.Dokumentation Algolia: https://community.algolia.com/places/
![Page 16: Joomla · Design - Ein EIGENES custom field Erstellen · 2018-02-05 · EINGABEFELD FIELDS/ ADDRESSCOMPLETE.PHP Unser Feld ist ein einfaches Text-Eingabefeld bei dem durch die Vergabe](https://reader033.vdokument.com/reader033/viewer/2022042420/5f37429bc12fe12cab08304a/html5/thumbnails/16.jpg)
<?php/** * @package Joomla.Plugin * @subpackage Fields.Addresscomplete * * @copyright Copyright (C) 2018 COOLCAT creations. All rights reserved. * @license 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('https://cdn.jsdelivr.net/npm/[email protected]', 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 name="' . $this->name . '" id="' . $this->id . '" class="address-input" placeholder="' . $placeholder . '">';return $field;}
}
![Page 17: Joomla · Design - Ein EIGENES custom field Erstellen · 2018-02-05 · EINGABEFELD FIELDS/ ADDRESSCOMPLETE.PHP Unser Feld ist ein einfaches Text-Eingabefeld bei dem durch die Vergabe](https://reader033.vdokument.com/reader033/viewer/2022042420/5f37429bc12fe12cab08304a/html5/thumbnails/17.jpg)
PLUGIN HAUPTDATEI
Initialisierung des FELD PLUGINS ADDRESSCOMPLETE.phpDamit das Feld überhaupt angezeigt wird, muss es im Plugin aufgerufen werden. Das erreichen wir mit wenigen Zeilen Code:
<?php/** * @package Joomla.Plugin * @subpackage Fields.Addresscomplete * * @copyright Copyright (C) 2018 COOLCAT creations. All rights reserved. * @license 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{}
![Page 18: Joomla · Design - Ein EIGENES custom field Erstellen · 2018-02-05 · EINGABEFELD FIELDS/ ADDRESSCOMPLETE.PHP Unser Feld ist ein einfaches Text-Eingabefeld bei dem durch die Vergabe](https://reader033.vdokument.com/reader033/viewer/2022042420/5f37429bc12fe12cab08304a/html5/thumbnails/18.jpg)
AUSGABEIM FRONTEND
TMPL /ADDRESSCOMPLETE.PHP Im Beispiel-Projekt wird die Nutzereingabe als Wert in der Datenbank gespeichert und so im Frontend ausgegeben:
<?php/** * @package Joomla.Plugin * @subpackage Fields.Addresscomplete * * @copyright Copyright (C) 2018 COOLCAT creations. All rights reserved. * @license 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;
![Page 19: Joomla · Design - Ein EIGENES custom field Erstellen · 2018-02-05 · EINGABEFELD FIELDS/ ADDRESSCOMPLETE.PHP Unser Feld ist ein einfaches Text-Eingabefeld bei dem durch die Vergabe](https://reader033.vdokument.com/reader033/viewer/2022042420/5f37429bc12fe12cab08304a/html5/thumbnails/19.jpg)
Unser EinGabeFELDFERTIG!
![Page 20: Joomla · Design - Ein EIGENES custom field Erstellen · 2018-02-05 · EINGABEFELD FIELDS/ ADDRESSCOMPLETE.PHP Unser Feld ist ein einfaches Text-Eingabefeld bei dem durch die Vergabe](https://reader033.vdokument.com/reader033/viewer/2022042420/5f37429bc12fe12cab08304a/html5/thumbnails/20.jpg)
Unsere AUSGABE
FERTIG
![Page 21: Joomla · Design - Ein EIGENES custom field Erstellen · 2018-02-05 · EINGABEFELD FIELDS/ ADDRESSCOMPLETE.PHP Unser Feld ist ein einfaches Text-Eingabefeld bei dem durch die Vergabe](https://reader033.vdokument.com/reader033/viewer/2022042420/5f37429bc12fe12cab08304a/html5/thumbnails/21.jpg)
KREATIV WERDENMEHR
DARAUS MACHEN! travel.Custom-FielDs.NETAuf der Beispiel Webseite sieht man, was man mit einer einfachen Adress-Eingabe alles erreichen kann.
- Beispiele: - Wetter anzeigen- Flickr Galerie- Open Street Map anzeigen