Automatische Template Doku

aggrosoft · October 11, 2011, 4:58pm

Hallo nochmal,

So einen haben wir noch - nachdem heute auf der Mailing Liste aufkam ob Oxid einen Template Debug Modus wie im alten yaml Template einbauen kann (diese kleinen Roten Kästchen die anzeigen welche Template Datei wo geparst wurde) haben wir einen Smarty Filter gebaut der das automatisch macht.

Im Moment spuckt der Filter HTML Kommentare aus, wer mit firebug umgehen kann dem sollte das aber reichen. Und wem nicht - es ist wieder WTFPL und Verbesserungen sind natürlich gerne gesehen (oder behaltet es für euch, mir auch wurscht ).

Das schöne an dem Filter ist das keine einzige Template Datei angefasst werden muss, es müssen nur 2 Dateien kopiert und ein Modul aktiviert werden - fertig.

Also hier geht’s los, diese Datei nach core/smarty/plugins/prefilter.debugtpl.php - diese Datei steuert die Ausgabe und kann gerne angepasst werden, aber passt auf das ihr euch nicht alles zerschiesst - denn nicht nur der <body> inhalt läuft da durch:

<?php
function smarty_prefilter_debugtpl($sSource, &$oSmartyCompiler)
{    
return "
<!-- ". $oSmartyCompiler->_current_file ." -->
".$sSource."
<!-- EOF ". $oSmartyCompiler->_current_file ." -->
";
}

So nun das Modul das den Filter aktiviert unter modules/debugtpl/debugtpl.php

<?php

class debugtpl extends debugtpl_parent{
    protected function _fillCommonSmartyProperties( $oSmarty ){
        parent::_fillCommonSmartyProperties($oSmarty);
       
        include_once getShopBasePath().'core/smarty/plugins/prefilter.debugtpl.php';
        $oSmarty->register_prefilter('smarty_prefilter_debugtpl');
    }
}

Und noch den Moduleintrag setzen:

oxutilsview => debugtpl/debugtpl

Fertig, wichtig ist dass ihr noch den tmp leert - sonst kommt nichts raus. Hier ein screen von der Ausgabe in Firebug:

holgt · October 11, 2011, 5:02pm

sehr schöner Ansatz, Danke schön !

Hebsacker · October 11, 2011, 5:07pm

krustel -kram-such…

irgendwo waren hier doch die Bewertungsbuttons…

ah - hier:

aggrosoft · October 11, 2011, 5:15pm

Kleine Anmerkung noch, das Ding kommt nicht mit HTML Kommentaren Klar die um includes gelegt werden - also wenn die Seite danach komisch aussieht habt ihr statt nem smarty nen html kommentar benutzt um etwas auszublenden (ihr Verbrecher ;)).

Hebsacker · October 11, 2011, 5:49pm

da läufts: http://4-5.stahlwarenhaus-hebsacker.de/

pixelproduzenten · October 12, 2011, 8:36am

sehr cool! … danke für diesen kleinen Schnipsel Arbeitserleichterung

pixelproduzenten · October 12, 2011, 9:03am

… kleine Spielerei, wenn der Template Debug Modus das Layout nicht dauerhaft zerschießen soll … oder der Shop bereits produktiv läuft … und wem HTML-Kommentare nicht ausreichen

<div id="tpl-debug-on"><img src="http://www.mricons.com/store/png/115107_32418_32_power_switch_icon.png"></div>

span.tpl-debug{display: none; color: red; border: 1px dotted red;}
div#tpl-debug-on{ position: absolute; left: 10px; top: 35px; border: 1px solid white; padding: 5px; cursor: pointer;}

$('#tpl-debug-on').hover(function(){
$('span.tpl-debug').css({"display":"inline"})
}, function(){
$('span.tpl-debug').css({"display":"none"})
});

Hebsacker · October 12, 2011, 9:10am

supi - bau ich heute Nachmittag ein!

leofonic · October 12, 2011, 10:22am

Tolle Sache, danke!
Eine Idee noch: eine Abfrage auf isAdmin, dann bleibt das Backend benutzbar auch wenn man Ausgaben macht:


<?php 
class debugtpl extends debugtpl_parent{ 
    protected function _fillCommonSmartyProperties( $oSmarty ){ 
        parent::_fillCommonSmartyProperties($oSmarty); 
        if (!$this->isAdmin()){
            include_once getShopBasePath().'core/smarty/plugins/prefilter.debugtpl.php'; 
            $oSmarty->register_prefilter('smarty_prefilter_debugtpl'); 
        }
    } 
}

Hebsacker · October 12, 2011, 12:08pm

…immer her mit den Verbesserungen - ich integriere die dann unter http://4-5.stahlwarenhaus-hebsacker.de

Hebsacker · October 12, 2011, 10:10pm

öhm…

Wo genau muss ich denn den dritten Codeblock hinbasteln?

$('#tpl-debug-on').hover(function(){
$('span.tpl-debug').css({"display":"inline"})
}, function(){
$('span.tpl-debug').css({"display":"none"})
});

pixelproduzenten · October 12, 2011, 10:20pm

hallo ray … öhhhm entweder inline als <script> oder extern in eine Javascript-Datei für jQuery-Funktionen

z.Bsp:

Hebsacker · October 12, 2011, 10:38pm

inline - im selben div wie der Button (also im header)

Uncaught exception: ReferenceError: Undefined variable: $
Error thrown at line 2, column 4 in http://4-5.stahlwarenhaus-hebsacker.de/:
    $(document).ready(function() {

avenger · October 13, 2011, 11:58am

[QUOTE=pixelproduzenten;70649]hallo ray … öhhhm entweder inline als <script> oder extern in eine Javascript-Datei für jQuery-Funktionen

z.Bsp:

Evtl. “[{literal}][{/literal}]” vergessen?

Ich habe mir da 'ne andere Lösung gebastelt, die ich besser finde: mit “Klick” auf den Schalter kann man die Template-Namen anzeigen bzw. verstecken…

Mit dem “Hover” ist das dann schlecht, wenn man das mal in Ruhe betrachten will, oder der Bereich außerhalt des Viewports liegt…

$(document).ready(function(){
  $('#tpl-debug-on').click(function() {
    var debug_elem=$('span.tpl-debug'),display,image,background_color;

    if (debug_elem.length)
    {
      if (debug_elem.first().css('display')=='inline')
      {
        display='none';
        image='debug_tpl_off.png';
        background_color='white';
      }
      else
      {
        display='inline';
        image='debug_tpl_on.png';
        background_color='red';
      }
      debug_elem.css({'display':display});
      $(this)
        .children('img')
        .attr('src',img_dir+image)
      $(this).css('background-color',background_color);
    }
  });
});

Hebsacker · October 13, 2011, 12:30pm

ich bekomm immer noch

$ is not defined
$(document).ready(function(){

avenger · October 13, 2011, 12:32pm

[QUOTE=Hebsacker;70705]ich bekomm immer noch

$ is not defined
$(document).ready(function(){

[/QUOTE]
Hast Du das nach dem Laden von jQuery eingebaut?

Hebsacker · October 13, 2011, 12:54pm

momentan?
als erstes im header-div

<div id="header" class="clear">
  <div id="tpl-debug-on">
    <img src="http://www.mricons.com/store/png/115107_32418_32_power_switch_icon.png">
	[{literal}]
	<script type="text/javascript">
    $(document).ready(function() {
    $('#tpl-debug-on').hover(function(){
    $('span.tpl-debug').css({"display":"inline"})
    }, function(){
    $('span.tpl-debug').css({"display":"none"})
    });
    });
    </script>
	[{/literal}]
  </div>
  [{include file="widget/header/languages.tpl"}]
  [{include file="widget/header/currencies.tpl"}]
  [{oxid_include_dynamic file="widget/header/servicebox.tpl"}]
...

pixelproduzenten · October 18, 2011, 10:59am

@ray: deine jQuery-Lib wird zu spät (im Footer) geladen! Der Aufruf des Debug-Skripts erfolgt aber schon im “ersten header-div”

pack mal den Aufruf hinter die jquery-min.js dan sollte es passen … evtl. noch den $-Selektor durch jQuery ersetzen

VG Stefan

Hebsacker · October 18, 2011, 1:18pm

…ich glaub ich bin zu doof für JS…

Jetzt hab ichs in der /layout/base.tpl am Ende, also nachdem alle libs eingebunden wurden - kein Effekt, gleicher Fehler. "$ is not defined"
Dann habe ich den Fehler ein wenig gegoogelt und die lib direkt nochmals mit absolutem Pfad eingebunden - auch nix, selber Fehler…

nach Zeile 108 eingefügt:

<div id="tpldebug">
 <img src="http://4-5-debug.stahlwarenhaus-hebsacker.de/out/azure/img/debug_tpl_on.png">
   	[{literal}]
	<script type="text/javascript" src="http://4-5-debug.stahlwarenhaus-hebsacker.de/out/azure/src/js/libs/jquery-ui.min.js">
	$(document).ready(function(){
  $('#tpl-debug-on').click(function() {
    var debug_elem=$('span.tpl-debug'),display,image,background_color;

    if (debug_elem.length)
    {
      if (debug_elem.first().css('display')=='inline')
      {
        display='none';
        image='debug_tpl_off.png';
        background_color='white';
      }
      else
      {
...

ithommy · November 9, 2011, 10:45am

Hallo miteinander,

vielen dank für diese Umsetzung. Die Pfadhinweise sind für mich als “Umsteiger” sehr Hilfreich, da ich diese auch von Magento gewohnt war/bin