wcmmode.edit not working in personalization for HTL

[Phoenix_uy]

Hey everyone, I'm facing an issue with my HTL code and contexthub personalization (Targeting).

The thing is that I've a validation using wcmmode.edit. Something like this:

<sly data-sly-test.authorMode="${wcmmode.edit || wcmmode.preview}"/>
<div class="${authorMode ? 'author-mode' : 'full-width'}">My text</div>

The problem is that if the component is targeted and I switch from edit mode to wcmmode.disabled the component loads with wcmmode.edit = false but after a second it changes to wcmmode.edit  = true.

I can tell this because I put the component twice in my page then I've applied a target to one of the two and I'm printing the wcmmode.edit in a <h1> tag.

How can I manage the wcmmode when the component is targeted?

I'm working on AEM 6.2 sp2

[Gaurav-Behl]

What is your exact use case & design?

Wcmmode API (either via HTL or CQ WCM or ACS Commons taglib) is a server side functionality and ContextHub Personalization/Targeting is a client-side functionality which executes at runtime either via localstorage or cookies etc. When the server (AEM author/pub in this case) has already rendered the generated html response to the browser, server-side 'wcmmode' object will not be available to the client.

Use a client-side solution if you want to check EDIT mode before/during Targeting. I'm sure there must be something similar in Granite for this use case.

An old example - AEM Tips and Tricks: AEM: How to find WCMMode in Jquery/ Javascript

[Phoenix_uy]

Hello and thank you for your answer! One of my use cases are to show the component name like this:

<div data-sly-test="${wcmmode.edit}" data-emptytext="This is my component" class="cq-placeholder"></div>

Or to set a class only for author edit mode: class="my-component ${wcmmode.edit ? 'author-mode' : 'full-width'}"

[Phoenix_uy]

gauravb10066713​ I've found why wcmmode changes.. this is because the component is called twice when is targeted. The first time is the normal call from the component and the second one is with a selector 'default'. That second call is changing the wcmmode to edit. But this tells me that I cannot use wcmmode for my components since targeting always changes to edit. Do I have an alternative solution for this?

[Gaurav-Behl]

I'm a bit disconnected here about your use case. I assume that you want to set a specific class on an element/component in EDIT mode during or after Targeting happens.

I think the "default" selector call happens when the segment is not resolved and Targeting loads your "default" experience/component and hence the call with selector default happens.

If you want to achieve this after Targeting has happened then you can inject this class via simple javascript/jQuery on load of the page (not on DOM ready). You may use contexthub-localstorage or editor specific cookies like 'cq-editor-layer.page', 'wcmmode' or some other cookie's value as your trigger to inject this class when you want and where you want.

$( window ).on( "load", function() {

  // add the css class on your target element

});

OR

window.onload = function() {

  // add the css class on your target element

}

If you want to achieve this during Targeting then you may have to overlay contexthub libraries and do the same activity at specific method execution.

NOTE: when you inject a class via js/jQuery, it would not be visible in the view source but the generated DOM structure.