In aktuelleren Version geht das nicht mehr, erst recht nicht in Gambio.

Der Screenshot rechts ist jetzt natürlich nicht aus dem Jahre 2010, sondern aus einem aktuellen Gambio 4.9.x

In dem Kontaktformular wird an einer Stelle ein Captcha eingebunden und wie man hier gut sieht, ist das Template captcha_captcha.html dafür verantwortlich.

Wie wurde das gemacht? Wir haben einen PreFilter für Smarty registriert, der jedes gerenderte Template in einen Div hüllt, dem wir die nötigen Infos mitgeben. der Rest ist dann nur noch CSS. In anderen Systemen könnte man das auch mit einem Outputfilter, oder anderen Möglichkeiten lösen, in Gambio ist Smarty aber sehr eigenwillig implementiert, so daß dies die einzige Lösung ist, die wir gefunden haben.

Los geht's 

class SmartyDebugGXSmarty extends GXSmarty{
    public function __construct($template_dir=null,$compile_dir=null){
        parent::__construct($template_dir,$compile_dir);
        
        // Prefilter direkt registrieren
        require_once DIR_FS_CATALOG.'GXModules/ait/SmartyDebug/Shop/System/Smarty/Filters/Prefilter/DebugBorderPrefilter.php';
        $this->registerFilter('pre',[new DebugBorderPrefilter(),'process']);
    }
}

function init_smarty() 

welche sich in der GXMainComponents/View/ThemeContentViews/core/ThemeContentView.inc.php befindet.
Leider läßt Gambio es nicht zu, daß man die Klasse ThemeContentView überlädt. Auch gibt es kein Hooksystem mit dem wir das irgendwie elgant lösen könnten.

Das heißt: ohne CorePatch kommen wir hier nicht weiter. Da wir den preFilter aber eh nur während der Template-Entwicklung nutzen, ist dies gerade noch so zu verkraften.

Wir fügen also folgenden Code in die init_smarty() ein:

//ait - SmartyDebug
require_once DIR_FS_CATALOG.'GXModules/ait/SmartyDebug/SmartyDebugGXSmarty.inc.php';
$this->v_coo_smarty=MainFactory::create('SmartyDebugGXSmarty');

# create smarty
$this->v_coo_smarty=MainFactory::create('GXSmarty');

Die Optik

//Debugging
.debug-border{
    margin:0;
    padding:0;
    position:relative;
    outline:1px solid #d70039;
    transition:all 0.25s ease-in-out 0.2s;
    background-color:rgba(0, 0, 0, 0.1);
    
    &:hover{
        margin:15px;
        padding:10px;
        .debug-border:before{
            background-color:rgba(0, 0, 0, 0.7);
        }
    }
}

.debug-border:before{
    padding:1px 2px;
    position:absolute;
    z-index:99999;
    top:-12px;
    left:0;
    content:attr(data-template);
    color:#fff;
    background-color:rgba(0, 0, 0, 0.5);
    font-size:8px;
}

1. Über den Admin den Cache leeren
2. Den Shop mit Parameter aufrufen: https://shop.ihre-domain.de/?debug=border
3. Alle Seiten die ab jetzt aufgerufen werden, laufen durch den Prefilter.
4. Ist man fertig dekativiert man den Filter wieder: https://shop.ihre-domain.de/?debug=off
5. Jetzt wieder den Cache leeren und den Shop erneut aufrufen um die Templates ohne Rahmen zu rendern.

Jetzt einfach herunterladen

Hinweise und Schlusswort

Wie oben schon geschrieben, ist das Ganze leider nicht updatesicher. Ausserdem sollte es nicht in einer Produktivumgebung genutzt werden. Die gerenderten roten Rahmen sind für ALLE Besucher des Shops sichtbar, da Sie in den Templatecache reingerendert sind.

In der SmartyDebugGXSmarty ist schon eine statische level-Variable mit drin. Diese können Sie nutzen um je nach Tiefe ver Verschachtelung zB andere Farben für die Rahmen anzugeben. Ausserdem können Sie statt dem einfachen GET Parameter zum aktivieren/dekativieren noch ein Passwort mit einbauen, ebenso wie Sie beim dekativieren eventuell gleich den Cache automatisch löschen wollen. Für ganz Neugierige kann man auch gleich noch die Templatevariablen mit Ausgeben.

Möglichkeiten zur Erweiterung gibt es viele - wir freuen uns auf Ihr Feedback!