Deaktivieren von Klickereignissen in XPM-Bearbeitung (Razor)

Question

Ich habe versucht, dies seit einiger Zeit zu lösen, aber ich kann nicht etwas finden, das richtig funktioniert.

Sie sehen, auf unserer Website sind viele anklickbare Bilder oder divs vorhanden, die mit Komponentenlinks versehen sind, die über das gesamte Bild fallen. Wenn Sie XPM aktivieren und versuchen, die Komponente auszuwählen, wird das Click-Ereignis der Komponentenverknüpfung ausgelöst und Sie zur richtigen Seite weitergeleitet.

Ich habe nach einer schnellen Lösung gesucht, um dieses Verhalten nur beim Bearbeiten zu deaktivieren, und bisher habe ich mir ein paar Workarounds ausgedacht, die ehrlich gesagt nicht das sind, wonach ich suche.

Sie können zum Beispiel die fantastische Razor Mediator-Bedingung (IsSiteEditEnabled) verwenden, diese Funktion wird jedoch immer in "true" aufgelöst, wenn die aktuelle Publikation/Seite/Server für die Website-Bearbeitung aktiviert ist. Dies bedeutet, dass, wenn Sie Template-spezifischen Code wie

@if(!IsSiteEditEnabled){ 
<a tridion:href="#"> other code, ending in closing of </a>... 
} 

nicht ausgegeben einen Link, wenn die Site bearbeiten (XPM) einfügen nicht aktiviert ist, kann aber aktiviert werden. Staging-Server, kurz gesagt.

Wenn keine andere Option vorhanden ist, benötige ich einen Live-Veröffentlichungsserver, um den Code funktionsfähig zu machen. Dies stellt jedoch das Problem dar, dass die Redakteure glauben, dass auf den Staging-Servern Links nicht funktionieren.

Ich habe das Gefühl, dass mir hier etwas fehlt. Ich glaube, dass dieses Problem könnte von jemand angetroffen haben, wie Sie

:) das ist einer der Blöcke

<article class="block-2x2 banner"> 
    <tcdl:ComponentField name="component_link"></tcdl:ComponentField> 
    @if(!IsSiteEditEnabled){ 
     @:<a tridion:href="@Fields.component_link"> 
     } 
     <div class="image-container"> 
      <tcdl:ComponentField name="image"><img src="@Fields.image" alt="@Fields.image.altText"></tcdl:ComponentField> 
     </div> 
     <div class="hgroup"> 
      <h4 class="primary-title">@RenderComponentField("header", 0)</h4> 
      <h5 class="secondary-title">@RenderComponentField("title", 0)</h5> 
     </div> 
    @if(!IsSiteEditEnabled){</a>} 
</article> 

Answer 1

Sie betrachten könnte nur in irgendeiner Form von anderen wie folgt setzen:

@if(!IsSiteEditEnabled){ 
    <a tridion:href="#"> other code, ending in closing of </a>... 
}else{ 
    <a href="#" onclick="alert('Image links not supported in XPM');"></a> 
} 

Dies sollte zumindest erklären, warum die Links für Ihre Editoren nicht funktionieren. Ich habe zwar nicht getestet, ob das dein Problem tatsächlich löst.

Es wäre sauberer sein, nur ein class="NoClickImageLink" Attribut hinzufügen, und fügen Sie einen JavaScript-Aktion auf alle Tags mit dieser Klasse, wenn die Seite geladen wird, die das onclic Ereignis mit dem Tag zuordnet ..

Answer 2

Wenn JQuery verwenden Sie verhindern können, Anker-Links mithilfe dieser Code arbeiten:

$('a').click(function(event) { 
    event.preventDefault(); 
}); 

$(this) würde das geklickt Element verweisen, die Sie dann in dem Fall, überprüfen Sie einige Anker-Links müssen weiter arbeiten.

Dieser Code kann für den Fall, dass Sie mit XPM bearbeiten, eingefügt werden und würde Ihre Vorlagen erheblich vereinfachen.

PS. Ich habe diesen Vorschlag nicht getestet.

Answer 3

Da XPM rein Client-Seite ... Ich denke, Sie müssen es mit einem Trick wie das, was ich beschreibe tun; http://tcm4lex.wordpress.com/2013/07/04/javascript-detection-of-experience-manager/

Der Artikel stammt aus meiner Erfahrung mit XPM auf Tridion 2013, kann aber trotzdem ein guter Ausgangspunkt sein. Sobald Sie diesen Weg gefunden haben, um zu erkennen, wenn sich die Seite im Bearbeitungsmodus befindet, können Sie einen Javascript-Trick wie den oben beschriebenen Arjen ausführen.