Level 4

How to add multiple CTA on different tabs in cq dialog of a component?

Forum|Forum|4 years ago
September 29, 2021
5 commentaire
3379 vue

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:

Ce sujet a été fermé aux réponses.

Lavanya_Pejjayi

Adobe Employee

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.

surenkAuteur

Level 4

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.

Umesh_Thakur

Community Advisor

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.

surenkAuteur

Level 4

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>

Ritesh_Mittal

Community Advisor and Adobe Champion

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.

surenkAuteur

Level 4

Thanks for the suggestions.

Re: this https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/touch-ui-dialog-include-part-of-another-dialog/m-p/265153/highlight/true#M58331 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.

arunpatidar

Community Advisor

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-reusable-parts-of-dialog-under/td-p/387249#M83739 for more details

Arun Patidar

J

jakdevmode

Level 2

@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!

Inscrivez-vous

Login social

Bienvenue

Login social

Analyse virus du fichier

Ce fichier ne peut pas être téléchargé