Embed Size (px)
Citation preview
Ein EIGENES custom field
Erstellen
Joomlacamp Essen 2018 #jc18de
Joomladay Germany 2017 #jd17de
Ich BIN EliSa
Twitter: @elisasophia
Was Sind Custom FielDs?
EingabeFelder -> AusGABE
1. user2. BEITRÄGE3. KONTAKT4. ANDERE
Wo Kann ich SIE VERWENDEN?
1. ERSTELLEN VON Layout/View Overrides
2. ERSTELLEN VON PLUGIN OVERRIDES3. EIN EIGENES FELD PLUGIN ERSTELLEN
WIE KANN MANFELDER
ANPASSEN?
<?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
2. BEISPIEL: ERSTELLEN VON MEDIA OVERRIDES
GalleriesSliders
Lightboxes
VIdeo embed
DaTEPICKER
Calendars
AUTOCOMPLETE
weather WidgetAudio Embed
PDF Display
slideshare
Maps
WELCHE FELDER KANN ICH
ERSTELLEN?
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
BEISPIELDATEIEN RUNTERLADENhttps://github.com /coolcat-creations /plg_fields_addresscomplete /coolcat-creations /plg_fields_addresscomplete
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
<?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>
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.
<?xml version="1.0" encoding="utf-8"?><form> <fields name="fieldparams"> <fieldset name="fieldparams"> </fieldset> </fields></form>
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/
<?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;}
}
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{}
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;
Unser EinGabeFELDFERTIG!
Unsere AUSGABE
FERTIG
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
