Wyłączanie zdarzeń kliknięcia w edycji XPM (Razor)

Question

Próbuję rozwiązać ten problem już od jakiegoś czasu, ale nie mogę wymyślić czegoś, co działa poprawnie.

Widzisz, na naszej stronie znajduje się wiele klikalnych obrazów lub elementów div, które są dostarczane z łączami komponentu, które przewijają się na całym obrazie. Jeśli aktywujesz XPM i spróbujesz wybrać komponent, uruchomi on zdarzenie kliknięcia linku komponentu i poprowadzi cię do właściwej strony.

Szukałem szybkiego rozwiązania, aby wyłączyć to zachowanie tylko podczas edycji, i jak dotąd wymyśliłem kilka obejść, które szczerze mówiąc nie są tym, czego szukam.

Można na przykład użyć fantastycznego warunku Razor Mediator (IsSiteEditEnabled), jednak ta funkcja zawsze ma wartość true, jeśli publikacja/strona/serwer, na którym się aktualnie znajdujesz, umożliwia edycję strony. Oznacza to, że po wstawieniu szablonu specyficzny kod, takich jak

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

nie będzie wyjścia, gdy link edit serwis (XPM) nie jest aktywny, ale może być aktywowana. W skrócie serwery pośredniczące.

Jeśli nie ma innej opcji, będę potrzebował serwera publikacji na żywo, aby kod działał, ale spowoduje to problem, który redaktorzy będą uważać, że łącza są zepsute na serwerach pomostowych.

Mam wrażenie, że czegoś tu brakuje. Wierzę, że ten problem może już spotykane przez kogoś takiego jak ty :)

jest to jeden z bloków

<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

Można rozważyć tylko wprowadzenie jakiejś formy inny jak ten:

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

To powinno przynajmniej wyjaśnić, dlaczego linki nie działają dla twoich redaktorów. Chociaż nie testowałem, czy to faktycznie rozwiązuje twój problem.

byłoby czystsze po prostu dodać atrybut class="NoClickImageLink" i dodaj akcję JavaScript wszystkich tagów z tej klasy, gdy strona ładuje który kojarzy onclic zdarzenie z tagiem ..

Answer 2

Przy użyciu JQuery można zapobiec linki anchor do pracy za pomocą tego kodu:

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

$(this) byłoby odwołać kliknięty element, który można następnie zweryfikować w przypadku trzeba kilka linków kotwiące do dalszej pracy.

Kod ten można wprowadzić w przypadku edycji przy użyciu XPM i znacznie uprościć szablony.

PS. Nie testowałem tej sugestii.

Answer 3

Jako że XPM to strona czysto klienta ... Myślę, że musisz to zrobić za pomocą jakiejś sztuczki takiej, jak opisuję; http://tcm4lex.wordpress.com/2013/07/04/javascript-detection-of-experience-manager/

Artykuł jest napisany z mojego doświadczenia z XPM na Tridion 2013, ale i tak może być dobrym punktem wyjścia. Gdy będziesz już w stanie wykryć, kiedy strona jest w trybie edycji, możesz zrobić sztuczkę z Javascriptem, taką jak ta opisana powyżej.