I have a CTA component. I need to show 2 separate instances of CTA in a component. The component dialog has 2 tabs - Primary CTA and Secondary CTA. The blue is showing 2 instance but both are referring to the same content. What am I doing wrong?
cq_dialog.xml
<primarycta
jcr:primaryType="nt:unstructured"
jcr:title="Primary CTA"
sling:resourceType="granite/ui/components/coral/foundation/container"
margin="{Boolean}true"
name="./primarycta">
<items jcr:primaryType="nt:unstructured">
<columns
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<include
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/include"
path="/apps/eb/components/content/cta/cq:dialog/content/items/tabs/items/properties/items/columns/items/column">
</include>
</items>
</columns>
</items>
</primarycta>
<secondarycta
jcr:primaryType="nt:unstructured"
jcr:title="Seondary CTA"
sling:resourceType="granite/ui/components/coral/foundation/container"
margin="{Boolean}true"
name="./secondarycta">
--- same as above -------
</secondarycta>
component.html
<section
data-sly-use.model="com.web.models.component.TextImageColumn"
class="cmp-tc"
data-sly-use.text="eb/components/content/text/text.html"
data-sly-use.image="eb/components/content/image/image.html"
data-sly-use.textModel="com.adobe.cq.wcm.core.components.models.Text"
data-sly-use.primarycta="eb/components/content/cta/cta.html"
data-sly-use.primaryctaModel="com.web.models.component.Cta"
data-sly-use.secondarycta="eb/components/content/cta/cta.html"
data-sly-use.secondaryctaModel="com.web.models.component.Cta"
id="${model.componentId}">
...
...
<sly data-sly-call="${primarycta.renderCta}" />
...
<div class="cmp-ti2c-content__second-cta">
<sly data-sly-call="${secondarycta.renderCta}" />
</div>
Both CTAs show the same Title:
Titles for 2 cta's are stored in the same node, below:
Views
Replies
Total Likes
Hi surenk,
Could you please check the below code from "component.html".
a) It is missing the model class name. You should call same like Primary button. ${model.secondarycta.renderCta}
<div class="cmp-ti2c-content__second-cta">
<sly data-sly-call="${secondarycta.renderCta}"/>
</div>
I hope this helps.
Thanks.
Good observation @Lavanya_Pejjayi but that did not resolve the issue. I was trying a few options and may have added the code. I updated the component html in original question.
I am not able to understand why is the use case of data-sly-use.primaryCta="..../cta.html" I have heard that we can only use either java or javascript with the USE api.
so have a look on that part.
We can use as below to refer to the template of the component we are referring to.
For example:
cta.html
<template data-sly-template.renderCta="${ @ style, ... }"> <div class="cmp-cta ${model.ctaAt}"
...
Another-Component.html
<section data-sly-use.model="com.eb.web.models.component.TextColumn" data-sly-use.text="eb/components/content/text/text.html" data-sly-use.cta="eb/components/content/cta/cta.html"
..
<sly data-sly-call="${cta.renderCta}" />
...
</section>
Hi @surenk ,
I am assuming your Sling Model object is 'primaryctaModel' and 'secondaryctaModel', where you have put getters for the objects, whereas you are trying to get object value using primarycta and secondarycta. Have you tried putting debugger in the Sling Model and see if the values are being populated fine. since you are storing both CTA title as comma separated, so again assuming the separation logic is there in Sling Model.
Thanks for the suggestions.
Re: this https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/touch-ui-dialog-include-pa... when we use "include" , we cannot control the name of the component. So this was causing both primary and secondary cta's to refer to the same object.
I was "including" the "cta" component inside the cq_dialog of another component (in my case)
<primaryCta jcr:primaryType="nt:unstructured" jcr:title="CTA" sling:resourceType="granite/ui/components/coral/foundation/container" ...> <items jcr:primaryType="nt:unstructured"> <columns ... <include jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/include"
path="/apps/eb/components/content/cta/cq:dialog/content/items/tabs/items/properties/items/columns/items/column"> </include> </items> </primaryCta>
and the actual "Cta" component's cq_dialog has :
<column ...
<items ..
<field .. name="./cta">
<title... />
<link... />
</field>
The other alternative is to add the elements of the CTA (title, link, style etc) instead of using include and then use unique names to refer to them.
So far my work around
<primaryCta jcr:primaryType="nt:unstructured" jcr:title="CTA" sling:resourceType="granite/ui/components/coral/foundation/container" ...> <items .. > <columns ... > ... <field jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container" name="./primaryCta"> <items .. > <btnType ..> <btnIcon ..> <title ..> ... </primaryCta>
Few examples:
There may be other alternatives.
Hi,
To have different name property vlaue when you want to reuse part of dialog, you can either use namespace if you are ACS Common or simply inhert the existing dialog part and override the name property
please check https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/is-there-a-way-to-to-add-r... for more details
@surenk hi, were you able to find a solution? I'm having an exact issue and tried all other suggested solutions but still no luck. I would really appreciate it if you could share what approach you took to resolve your issue. Thank you very much in advance!
Views
Likes
Replies
Views
Like
Replies
Views
Likes
Replies