I am disabling link checker so that I can allow broken links and its a business requirement. I have added x-cq-linkchecker="skip" which solves my problem.
But when I add x-cq-linkchecker="skip" to my button component its breaking the adobe data layer json. Here is the screenshot where json is showing extra character. We haven't changed any encoding and other stuffs.
The Problem:
The button component is inherited from core component v1 button. The button component markup is given below:
<div class="example-button--wrapper"
data-sly-use.button="com.example.aem.models.Button"
data-sly-use.component="com.adobe.cq.wcm.core.components.models.Component"
data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
data-sly-test="${button.text}">
<button
data-sly-element="${button.link ? 'a' : 'button'}"
type="${button.link ? '' : 'button'}"
id="${component.id}"
class="cmp-button ${(properties.buttonIcon && properties.buttonIcon!='none')?'button-icon relative':''}"
href="${button.link}"
x-cq-linkchecker="skip" //this is the only change we have made.
aria-label="${button.accessibilityLabel}"
data-cmp-clickable="${button.data ? true : false}"
data-cmp-data-layer="${button.data.json}">
<span data-sly-test="${button.text}" class="cmp-button__text">${button.text}</span>
<sly data-sly-test="${properties.buttonIcon && properties.buttonIcon!='none'}">
<span class="material-icons">${properties.buttonIcon == 'custom' ? properties.iconName : properties.buttonIcon}</span>
</sly>
</button>
</div>
<sly data-sly-call="${templates.placeholder @ isEmpty=!button.text, classAppend='cmp-button-empty'}"></sly>
What could be the possible solution? thanks in advance.
Solved! Go to Solution.
Topics help categorize Community content and increase your ability to discover relevant content.
Views
Replies
Total Likes
Hi @kaikubad ,
I tried to generate your problem. Found a solution for you, just order change the data-cmp-datalayer attribute such that x-cq-linkchecker cannot affect that.
<button
data-sly-element="${button.link ? 'a' : 'button'}"
type="${button.link ? '' : 'button'}"
id="${component.id}"
data-cmp-data-layer="${button.data.json}"
class="cmp-button ${(properties.buttonIcon && properties.buttonIcon!='none')?'button-icon relative':''}"
href="${button.link}"
x-cq-linkchecker="skip"
aria-label="${button.accessibilityLabel}"
data-cmp-clickable="${button.data ? true : false}">
<span data-sly-test="${button.text}" class="cmp-button__text">${button.text}</span>
<sly data-sly-test="${properties.buttonIcon && properties.buttonIcon!='none'}">
<span class="material-icons">${properties.buttonIcon == 'custom' ? properties.iconName : properties.buttonIcon}</span>
</sly>
</button>
Hope this will solve your problem.
Hi @kaikubad ,
I tried to generate your problem. Found a solution for you, just order change the data-cmp-datalayer attribute such that x-cq-linkchecker cannot affect that.
<button
data-sly-element="${button.link ? 'a' : 'button'}"
type="${button.link ? '' : 'button'}"
id="${component.id}"
data-cmp-data-layer="${button.data.json}"
class="cmp-button ${(properties.buttonIcon && properties.buttonIcon!='none')?'button-icon relative':''}"
href="${button.link}"
x-cq-linkchecker="skip"
aria-label="${button.accessibilityLabel}"
data-cmp-clickable="${button.data ? true : false}">
<span data-sly-test="${button.text}" class="cmp-button__text">${button.text}</span>
<sly data-sly-test="${properties.buttonIcon && properties.buttonIcon!='none'}">
<span class="material-icons">${properties.buttonIcon == 'custom' ? properties.iconName : properties.buttonIcon}</span>
</sly>
</button>
Hope this will solve your problem.
If you remove this
x-cq-linkchecker="skip" //this is the only change we have made.
Everything is working as expected?
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies