Disabilitazione degli eventi click in XPM editing (Razor)

Question

Ho cercato di risolvere questo problema da un po 'di tempo, ma non riesco a trovare qualcosa che funzioni correttamente.

Vedete, sul nostro sito ci sono molte immagini cliccabili o divs presenti, forniti di collegamenti di componenti che ricadono sull'intera immagine. Se si attiva XPM e si prova a selezionare il componente, verrà generato il relativo evento di collegamento del collegamento e verrà indirizzato alla pagina corretta.

Sono stato alla ricerca di una soluzione rapida per disabilitare questo comportamento solo durante la modifica, e finora ho escogitato un paio di soluzioni alternative che francamente non sono quello che sto cercando.

È possibile ad esempio utilizzare la fantastica condizione Razor Mediator (IsSiteEditEnabled), tuttavia questa funzione si risolve sempre su true se la pubblicazione/pagina/server in cui si è attualmente è abilitata per la modifica del sito. Questo significa che se si inserisce il codice specifico modello di come

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

non emette un link quando il sito di modifica (XPM) non è attivata, ma può essere attivato. Server di gestione temporanea, in breve.

A meno che non ci sia altra opzione, ho bisogno di un server di pubblicazione Live per far funzionare il codice, ma questo porrà il problema che i redattori penseranno che i collegamenti siano interrotti sui server di staging.

Ho la sensazione che ci sia qualcosa che mi manca qui. Credo che questo problema potrebbe essere stato incontrato da qualcuno come voi :)

questo è uno dei blocchi

<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

Si potrebbe prendere in considerazione solo mettendo in qualche forma di altro come questo:

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

Questo dovrebbe almeno spiegare perché i collegamenti non funzionano per i tuoi editor. Anche se non ho ancora testato se questo risolve il tuo problema.

Sarebbe più pulito di aggiungere solo un attributo class="NoClickImageLink", e aggiungere un'azione JavaScript per tutti i tag con quella classe al caricamento della pagina che associa l'evento onclic con il tag ..

Answer 2

Quando si utilizza JQuery si può prevenire ancore di lavorare utilizzando questo codice:

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

$(this) sarebbe riferimento all'elemento cliccato, che si può quindi verificare nel caso avete bisogno di alcuni collegamenti di ancoraggio per continuare a lavorare.

Questo codice può essere iniettato nel caso in cui si modifica con XPM e semplificherebbe notevolmente i modelli.

PS. Non ho provato questo suggerimento.

Answer 3

Come XPM è puramente client-side ... Immagino che tu debba farlo usando un trucco come quello che descrivo; http://tcm4lex.wordpress.com/2013/07/04/javascript-detection-of-experience-manager/

L'articolo è stato scritto sulla mia esperienza con XPM su Tridion 2013, ma può comunque essere un buon punto di partenza. Una volta che hai questo modo di rilevare quando la pagina è in modalità di modifica, puoi eseguire alcuni trucchi Javascript come quello descritto in precedenza da Arjen.