Isotope-Cart-ProductAddedFeedback: Unterschied zwischen den Versionen

Aus Contao Community Documentation

K (hat „Isotope-Basket-ProductAddedFeedback“ nach „Isotope-Cart-ProductAddedFeedback“ verschoben: Naming Conventions von Isotope berücksichtigen)
Zeile 15: Zeile 15:
 
==Variante1: Isotope Box und Hooks==
 
==Variante1: Isotope Box und Hooks==
 
Wir erstellen zuerst ein neues Modul. In diesem Tutorial verwende ich den Modulnamen ''IsotopeExt''. Im Ordner TL_ROOT/system/modules erstellen wir folgende Verzeichnisse und Dateien: IsotopeExt/config/config.php, IsotopeExt/IsotopeCartExt.php
 
Wir erstellen zuerst ein neues Modul. In diesem Tutorial verwende ich den Modulnamen ''IsotopeExt''. Im Ordner TL_ROOT/system/modules erstellen wir folgende Verzeichnisse und Dateien: IsotopeExt/config/config.php, IsotopeExt/IsotopeCartExt.php
 +
 +
===Backend Konfiguration===
 +
Dieses Tutorial geht davon aus, dass im Isotope Produktleser Modul unter 'Add product jump to page' keine Seite angewählt ist. Die beschriebene Technik könnte aber auch dann verwendet werden.
  
 
===PHP Konfiguration===
 
===PHP Konfiguration===
Zeile 47: Zeile 50:
 
</source>
 
</source>
  
===Templates===
+
===Templates & Isotope Box===
Nun ist es möglich die erstellten Session Objekte im Frontend zu verwenden.
+
Nun ist es möglich die erstellten Session Objekte im Frontend zu verwenden. Wir verwenden dazu ein angepasstes Produktleser Template. Dazu einfach das entsprechende Template iso_reader_default.tpl von TL_ROOT/modules/Isotope/templates nach TL_ROOT/templates kopieren. Wenn das Template umbenannt wird, nicht vergessen im Modul das umbenannte Template anzuwählen.
 +
Folgende Zeilen am Anfang einfügen:
 +
 
 +
<source lang="php">
 +
<?php
 +
echo $_SESSION['ISOTOPE']['FE_NOTIFY']['html'];
 +
unset($_SESSION['ISOTOPE']['FE_NOTIFY']);
 +
?>
 +
</php>
 +
 
 +
In der Session-Variabel $_SESSION['ISOTOPE']['FE_NOTIFY']['html'] steckt das ganze gerenderte HTML der anzuzeigenden Nachricht. Allerdings noch nicht sichtbar. Mit Javascript lesen wir das HTMl aus und zeigen es in einer Isotope Box an.
 +
Dazu gleich anschliessend an den PHP-Code folgendes einfügen:
 +
<source lang="javascipt">
 +
var notifyCtnr = jQuery("#isotope_notify"); // in mootools use: $('isotope_notify');
 +
if(notifyCtnr.length > 0){
 +
    Isotope.displayBox(notifyCtnr.html());
 +
}
 +
</source>

Version vom 24. Juli 2011, 17:20 Uhr

MsgError.png Unvollständiger Artikel: dieser Artikel ist noch nicht sauber bearbeitet.

Bitte erweitere ihn und entferne erst anschliessend diesen Hinweis.

Isotope-Basket - Feedback wenn neues Produkt im Warenkorb

In der aktuellen Isotope Version (0.2.10 stable), wird dem Benutzer nach erfolgreichem Hinzufügen eines Produktes in den Warenkorb, keine Meldung angezeigt. Mit den Boardmitteln von contao und ein wenig Kreativität kann man das in wenigen Minuten ändern.

Variante1: Isotope Box und Hooks

Wir erstellen zuerst ein neues Modul. In diesem Tutorial verwende ich den Modulnamen IsotopeExt. Im Ordner TL_ROOT/system/modules erstellen wir folgende Verzeichnisse und Dateien: IsotopeExt/config/config.php, IsotopeExt/IsotopeCartExt.php

Backend Konfiguration

Dieses Tutorial geht davon aus, dass im Isotope Produktleser Modul unter 'Add product jump to page' keine Seite angewählt ist. Die beschriebene Technik könnte aber auch dann verwendet werden.

PHP Konfiguration

In der config/config.php folgenden PHP-Code hinzufügen:

$GLOBALS['TL_HOOKS']['iso_addProductToCollection'][] 		= array('IsotopeCartExt', 'addProduct');
$GLOBALS['TL_HOOKS']['iso_addProductToCollection'][] 		= array('IsotopeCartExt', 'createFENotification');

(Am einfachsten eine config.php eines anderen Moduls kopieren und dessen Inhalt ersetzen.)

Damit registrieren wir zwei neue Hooks, die jedes mal aufgerufen werden, wenn ein Produkt dem Warenkorb hinzugefügt wird. Im Folgenden nun die Implementation der zwei registrierten Funktionen.

In der IsotopeBasket.php folgenden Code einfügen:

class IsotopeCartExt extends Model {
	public function addSuccess(){
		$_SESSION['ISOTOPE']['FE_NOTIFY']['messages']['add_success'] = array(
			'class'   => 'add_success',
			'message' => 'Produkt wurde dem Warenkorb hinzugefügt.'
		);
	}
 
	public function createFENotification(IsotopeProduct $objProduct, $intQuantity){
		$objTempl = new FrontendTemplate('iso_notification');
		$objTempl->messages = $_SESSION['ISOTOPE']['FE_NOTIFY']['messages'];
		$_SESSION['ISOTOPE']['FE_NOTIFY']['html'] = $objTempl->parse();
 
		return $intQuantity;
	}
}

Templates & Isotope Box

Nun ist es möglich die erstellten Session Objekte im Frontend zu verwenden. Wir verwenden dazu ein angepasstes Produktleser Template. Dazu einfach das entsprechende Template iso_reader_default.tpl von TL_ROOT/modules/Isotope/templates nach TL_ROOT/templates kopieren. Wenn das Template umbenannt wird, nicht vergessen im Modul das umbenannte Template anzuwählen. Folgende Zeilen am Anfang einfügen:

<?php
echo $_SESSION['ISOTOPE']['FE_NOTIFY']['html'];
unset($_SESSION['ISOTOPE']['FE_NOTIFY']);
?>
</php>
 
In der Session-Variabel $_SESSION['ISOTOPE']['FE_NOTIFY']['html'] steckt das ganze gerenderte HTML der anzuzeigenden Nachricht. Allerdings noch nicht sichtbar. Mit Javascript lesen wir das HTMl aus und zeigen es in einer Isotope Box an. 
Dazu gleich anschliessend an den PHP-Code folgendes einfügen:
<source lang="javascipt">
var notifyCtnr = jQuery("#isotope_notify"); // in mootools use: $('isotope_notify');
if(notifyCtnr.length > 0){
    Isotope.displayBox(notifyCtnr.html());
}
Ansichten
Meine Werkzeuge

Contao Community Documentation

Nein, der Hangout ist noch nicht vorbei, wir schweigen nur. Es heisst ja auch hangout und nicht bryll out.

Christian Schiffler
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge