Expand my Community achievements bar.

Applications for the 2024-2025 Adobe Experience Manager Champion Program are open!
SOLVED

x-cq-linkchecker="skip" is breaking adobe-datalayer json

Avatar

Level 6

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:

kaikubad_0-1688712340865.png

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.

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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.

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

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.

Avatar

Community Advisor

@kaikubad  - 

 

If you remove this 

x-cq-linkchecker="skip" //this is the only change we have made.

 

Everything is working as expected?