Best Practices

Die Programmierung von individuellen Templateanpassungen ist mit Tools wie z.B. Firebug in der Regel deutlich einfacher und effizienter zu bewerkstelligen.

Wir möchten daher auf dieser Seite nützliche Tools sowie Tipps und Tricks zur Templateanpassung vorstellen.

Smarty Debugging

Das in JTL-Shop3 integrierte Templatesystem Smarty bringt eine optionale Debugkonsole mit, die zum Nachschlagen von Templatevariablen und Werten verwendet werden kann.

Smarter Smarty Debug (AJAX-Integration)

Das kostenlose Plugin Smarter Smarty Debug von unserem Servicepartner Kreativkonzentrat erweitert den JTL-Shop3 um eine benutzerfreundliche Smarty Debugkonsole.

Nach Installation des Plugins steht eine Debug-Konsole über die Tastenkombination STRG + RETURN zur Verfügung.

Folgende Informationen werden ausgelesen und angezeigt:

  • Smarty-Variablen
  • PHP-Fehler
  • geladene Templates
  • eigene Debug-Ausgaben
  • registrierte Plugin-Hooks

Über eine integrierte Suchfunktion finden Sie schnell den gewünschten Knoten, Wert oder Pfad.

Mehr Informationen und einen Downloadlink finden Sie unter http://kreativkonzentrat.de/plugins/smarter-smarty-debug

Standard Smarty Debug-Konsole (Popup)

Die Standard-Smarty-Debug-Konsole kann in JTL-Shop3 folgendermaßen per Plugin aktiviert werden:

  • Anmelden im Admin-Bereich des Shops
  • Im Admin-Menü Plugins -> Pluginverwaltung wählen
  • Bei Verfügbare (nicht installierte) Plugins Häkchen setzen bei Smarty Debug und Installieren klicken
  • Im Admin-Menü Plugins -> Plugins -> Smarty Debug wählen, Smarty Debug aktivieren=JA setzen und Speichern-Button klicken.
  • Shop-URL aufrufen. Die Smarty-Debug-Konsole wird als Popup geladen.

Firebug-Addon für den Mozilla Firefox-Browser

Bei der Entwicklung von individuellen Shop-Themes benötigt man ein leistungsfähiges Tool, um den CSS und HTML-Code einer Seite effizient analysieren und testen zu können.

Das Tool Firebug ist ein Addon für den Mozilla Firefox-Browser.
Es unterstützt Webentwickler beim Editieren, Debuggen und Analysieren von CSS-, HTML- und JavaScript-Code auf beliebigen Internetseiten.

Firebug-Key Features:

  • HTML-Ausgabecode der Seite analysieren und live im Browser bearbeiten
  • CSS-Regeln zu Elementen auf der Seite analysieren und live im Browser bearbeiten
  • JavaScript Debugging, Konsole und Fehleranalyse

Firebug Tutorials im Netz

Die folgenden Tutorials zeigen, wie man mit Firebug effizient Webseiten analysieren und Code-Änderungen testen kann

Eigenen Code validieren und testen

  • W3C HTML Validator
    Der Validator des W3C prüft Ihre Seite anhand URL oder Datei-Upload auf validen Quelltext. Fehlerhafter xHTML-Quelltext ist häufig die Ursache für unterschiedliche Darstellungen in verschiedenen Browsern.
  • W3C CSS Validation Service
    Häufig sind Syntaxfehler im CSS-Quelltext die Ursache für scheinbar nicht funktionierende CSS-Regeln. Mit dem W3C CSS Validation Service können Sie Ihre CSS-Dateien auf validen Quelltext prüfen.