Blog
Blog - Neues passiert
typo3jqueryjavascriptimagecyclecssjfmulticontentt3blogpowermailsexybookmarksimagecarouselfehlert3jquerypatchcoin-sliderlinuxpagetypehtmlimage cyclemac osfirefoxanalysesnippettastaturxhtmltabscloudeffektjfcloudzoomiossdkiphonexcodeirrebackenstylehooksbackendtyposcriptfadegrafikcross-sliderjquery uithemerollerfollow mebildergalerieimageflow

Feb
17

t3jquery im Backend

Typo3
Gravatar: Jürgen Furrer

Um die t3jquery-Lib im Backend einzubinden, kann man einfach in seinem Code folgendes Script verwenden:


if (t3lib_extMgm::isLoaded('t3jquery')) {
    require_once(t3lib_extMgm::extPath('t3jquery').'class.tx_t3jquery.php');
    $path_to_lib = tx_t3jquery::getJqJSBE();
    $script_to_lib = tx_t3jquery::getJqJSBE(true);
}
Views: 13
Dec
16

Häufige Fehler bei Typo3 mit jQuery (2)

Javascript /Typo3
Gravatar: Jürgen Furrer

t3jquery-Modul fehlt (ADMIN TOOLS)

Ja, die Frage nach dem t3jquery-Modul höre ich oft, das ist aber eigentlich ganz einfach:

Da man das t3jquery-Modul nur dann benötigt, wenn man eine Lokale, individuelle Lib zusammenstellen möchte, wird das Modul einfach nicht angezeigt wenn man die Lib (jQuery, jQuery UI oder jQuery TOOLS) per CDN lädt.

Damit das Modul mit der Individuellen Konfiguration angezeigt wird, muss folgendes gemacht werden:

  1. Extension Manger
  2. t3jquery suchen
  3. Configuration-Tab öffnen
  4. Hacken bei CDN entfernen
  5. UPDATE-Knopf drücken
  6. Komplettes Backend neu laden (F5)

Und VALA, das Modul ist wieder da

 

Views: 124
Dec
15

Häufige Fehler bei Typo3 mit jQuery (1)

Javascript /Typo3
Gravatar:

Doppeltes Laden von jQuery

Der häufigste Fehler der auftritt beim verwenden von Erweiterungen die jQuery verwenden, ist das doppelte Laden der jQuery-Lib.

Das kommt daher, dass jede Erweiterung die jQuery verwendet die Lib mitliefert und diese auch lädt (könnte ja sein, dass jQuery noch nicht geladen ist)

Wenn man nun zwei Erweiterungen auf der gleichen Seite hat die jQuery verwenden, kommt es zu einem Konflikt, denn folgendes passiert:

Nehmen wir an, wir haben ein jQuery-Plugin das hans heisst, und ein jQuery-Plugin das fritz heisst, diese beiden Plugins werden von zwei verschiedenen Erweiterungen geladen, Plugin tx_hans_pi1 und tx_fritz_pi1. Beide Erweiterungen liefern eine jQuery-Lib mit und diese werden in den Header geladen, in der Reihenfolge wie die Erweiterungen auf der Seite eingefügt wurden.

Zuerst kommt das Plugin tx_hans_pi1 und lädt die jQuery-Lib und das jQuery-Plugin hans dann kommt das Plugin tx_fritz_pi1 und lädt wiederum die jQuery-Lib und das jQuery-Plugin fritz.

Somit ist die Reihenfolge der Scripts wie folgt:

  1. jQuery
  2. hans (das Plugin wird registriert)
  3. jQuery (alle Plugins die bis jetzt registriert wurden, sind nicht mehr registriert)
  4. fritz

Wenn jetzt das Plugin fritz aufgerufen wird, dann funktioniert das ohne Probleme, das Plugin hans ist durch das zweite laden der Lib wieder "entladen" worden und wirf einen Fehler "jQuery("#myid").hans is not a function"

Lösen kann man diesen Fehler folgendermassen:

  1. Bei den meisten Modulen kann man das laden der jQuery-Lib unterbinden, also lädt man das jQuery mittels headerData vom fileadmin und deaktiviert jQuery in den Erweiterungen
  2. Viel Erweiterungen unterstützen t3jquery, damit wird das laden der Lib automatisch unterbunden (siehe, imagecycel, imagecarousel, jf360shots etc.)

Beispiel zu der ersten Lösung

Um die erste Lösung umzusetzen, muss das Integrieren der mitgelieferten Lib unterbunden werden, da jede Erweiterung die verwendete JS-Library einbindet, muss das bei jeder Erweiterung gemacht werden, hier einige Bespiel für diverse Erweiterungen (Konstanten):


// imagecycle
plugin.tx_imagecycle_pi1.file.jQueryLibrary =
plugin.tx_imagecycle_pi2.file.jQueryLibrary =
plugin.tx_imagecycle_pi3.file.jQueryLibrary =
plugin.tx_imagecycle_pi4.file.jQueryLibrary =
plugin.tx_imagecycle_pi5.file.jQueryLibrary =

// imagecarousel
plugin.tx_imagecarousel_pi1.file.jQueryLibrary =

// jfmulticontent
plugin.tx_jfmulticontent_pi1.file.jQueryLibrary =

// jf_headerslide
plugin.jf_headerslide.file.pathToMootools =

Jetzt muss die eigene Lib von der Projektseite heruntergeladen werden, oder aus einer Erweiterung kopiert werden. Hier findet man die aktuellen Dateien von jQueryMooTools und Prototype

Die Datei kopiert man dann in den fileadmin-Ordner und bindet diese per Typoscript in die Seite ein:


page.includeJS.file12 = fileadmin/js/jquery.js
Views: 161
Sep
18

Booklet Style

Effekt /Typo3
Gravatar: Jürgen Furrer

Style für Booklet

Ein Typo3-Kollege hat mich auf eine Seite aufmerksam gemacht (ging dabei um ein neues Plugin für imagecycle). Als ich mir dann die Seite weiter angeschaut habe, hab ich dann noch einen interessanten Artikel gefunden...

Dabei ging es um einen Style für das Booklet-Plugin das ich ja bei jfmulticontent verwende.

Gleich mal runterladen und an meine Implementation angepasst und so sieht das dann aus:

Content 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Content 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Content 3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Hier noch das Archiv zum runterladen.

  1. style.css einbinden
  2. Plugineinstellungen
    1. width: 800
    2. height: 500
Views: 132
Aug
20

Typo3 IRRE

Typo3
Gravatar: Jürgen Furrer

IRRE...

...bedeutet nicht, dass jemand in einer Gummizelle steht und mit Medikamenten vollgestopft wird, nein das ist die geniale Einrichtung in Typo3 seine 1:n Verbindungen inline zu verwalten (Inline Relational Record Editing)

Um das aber zu realisieren gibt es einiges zu beachten, der Anfang ist wie so oft bei Typo3 einfach, aber der Schluss, jeder der Typo3 macht, weiss was ich meine.

ext_tables.sql

Klar, wir wollen ja was in die DB schreiben, also fügen wir unser Feld da hinzu:


CREATE TABLE tt_content (
	tx_myext_irre text,
	tx_myext_irre_parentid int(11) DEFAULT '0' NOT NULL,
	tx_myext_irre_parenttable tinytext NOT NULL,

	KEY myext (tx_myext_irre_parentid,sorting)
);

ext_tables.php

Im Backend muss das "Feld" eingebunden werden, das macht man wie immer im ext_tables.php, einfach das Feld im TCA definieren:


$tempColumns = array(
	'tx_myext_irre' => Array (
		'exclude' => 1,
		'label' => 'LLL:EXT:myext/locallang_db.xml:tt_content.tx_myext.irre',
		'config' => array (
			'type' => 'inline',
			'foreign_table' => 'tt_content',
			'foreign_field' => 'tx_myext_irre_parentid',
			'foreign_table_field' => 'tx_myext_irre_parenttable',
			'maxitems' => 1000,
			'appearance' => array(
				'showSynchronizationLink' => FALSE,
				'showAllLocalizationLink' => FALSE,
				'showPossibleLocalizationRecords' => FALSE,
				'showRemovedLocalizationRecords' => FALSE,
				'expandSingle' => TRUE,
				'newRecordLinkAddTitle' => TRUE,
				'useSortable' => TRUE,
			),
			'behaviour' => array(
			),
		)
	),
);

t3lib_div::loadTCA('tt_content');
t3lib_extMgm::addTCAcolumns('tt_content', $tempColumns, 1);
$TCA['tt_content']['types']['list']['subtypes_addlist'][$_EXTKEY.'_pi1'] = 'tx_myext_irre';

Die möglichen Einstellungen in config.appearance können im IRRE-Tutorial nachgeslesen werden.

Aber jetzt...

...kommts, wir verwenden im tt_content eine Relation zu tt_content!

Wenn ich nun einen IRRE-Datensatz erstelle, dann wird dieser Content auf der Seite abgespeichert, auf der auch mein Parent liegt, das führt natürlich zu doppelter Anzeige, denn die Page wird automatisch alle tt_content's rendern.

Was tun?

Typo3 währe nicht Typo3, wenn es keine HOOKS geben würde, und genau das ist der Ansatz für die Manipulation die wir jetzt machen, wir werden alle IRRE-Datensätze von unserer Erweiterung abfangen und umleiten.

ext_localconf.php

Wir registrieren zuerst den HOOK in der ext_localconf.php:


$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['t3lib/class.t3lib_tcemain.php']['processDatamapClass'][$_EXTKEY] = 'EXT:'.$_EXTKEY.'/lib/class.tx_myext_tcemain.php:&tx_myext_tcemain';

lib/class.tx_myext_tcemain.php

Damit alles funktioniert benötigen wir auch die Datei die den Ensprechenden HOOK beinhaltet:


<?php
class tx_myext_tcemain
{
	public function processDatamap_preProcessFieldArray(array &$incomingFieldArray, $table, $id, t3lib_TCEmain &$pObj) {
		if ($incomingFieldArray['list_type'] != 'myext_pi1') {
			if (is_array($pObj->datamap['tt_content'])) {
				foreach ($pObj->datamap['tt_content'] as $key => $val) {
					if ($val['list_type'] == 'myext_pi1') {
						// Change the colPos of the IRRE tt_content values
						$incomingFieldArray['colPos'] = 93;
						// Workaround for templavoila
						if (t3lib_extMgm::isLoaded('templavoila')) {
							$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['tx_templavoila_tcemain']['doNotInsertElementRefsToPage'] = TRUE;
						}

					}
				}
			}
		}
	}
}

if (defined('TYPO3_MODE') && $TYPO3_CONF_VARS[TYPO3_MODE]['XCLASS']['ext/myext/lib/class.tx_myext_tcemain.php']) {
	include_once($TYPO3_CONF_VARS[TYPO3_MODE]['XCLASS']['ext/myext/lib/class.tx_myext_tcemain.php']);
}

?>

Hier wird nun vor dem Speichern des Datensatzes (IRRE oder Parent) überprüft,  ob es sich um einen tt_content im IRRE meiner EXT handelt. In diesem Fall wird der Wert im Feld colPos auf "93" angepasst.

WICHTIG ist, dass man sich vor Augen hällt, dass dieser HOOK JEDESMAL beim Speichern eines Datensatzes durchgelaufen wird, bei jedem Datentyp in Typo3!

Unschön dabei ist, ...

...dass die neue Spalte nicht bekannt ist, und so beim Editieren der Einträge in den Columns die Information steht "[ INVALID VALUE ("93") ]" das kann man aber umgehen in dem man die Spalte 93 registriert und das macht man wo?

Genau in der

ext_tables.php


if (TYPO3_MODE == 'BE') {
	if (! isset($TCA['tt_content']['columns']['colPos']['config']['items'][93])) {
		// Add the new colPos to the array, only if the ID does not exist...
		$TCA['tt_content']['columns']['colPos']['config']['items'][93] = array ($_EXTKEY.'||'.$_EXTKEY.'||||||||', 93);
	}
}

Und schon heisst die colPos 93 "myext"

Was fehlt?

Das be_layout macht uns durch den Workaround einen Strich, leider habe ich bis jetzt nicht herausgefunden wie ich bei Konfiguriertem be_layout den "[ INVALID VALUE ("93") ]" ersetzen kann, das einzige mir bekannte ist, dass man die colPos 93 im be_layout ebenfalls konfiguriert.

Vielleicht weiss auch jemand da draussen in den Weiten des Internets, wie man das Feld colPos selektiv im IRRE deaktivieren kann, dann schreibt mir einen Kommentar mit der Lösung, Bitte!

Danke und Gruss

Tags: typo3, irre, hooks
Views: 417