How to restrict secondary cta without authoring Primary cta using sightly

Forum|Forum|1 year ago
March 13, 2024
2 replies
568 views

I have a requirement in component that has Primary and Secondary (both are optional, cannot do secondary without primary)

I had written some logic using sightly

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Raja_Reddy

Hi @anilkumar9

You can add an additional condition to check if the primary CTA is present before rendering the secondary CTA.

<sly data-sly-test="${featureContent.primaryCta.text}">
  <sly data-sly-use.temp="${'/apps/gehealthcare/components/atoms/cta/cta.html'}"
    data-sly-call="${temp.ctaTemplate @ cta = featureContent.primaryCta}"/>
  <!-- secondary CTA -->
  <sly data-sly-test="${featureContent.secondaryCta.text && featureContent.primaryCta.text}">
    <sly data-sly-use.temp="${'/apps/gehealthcare/components/atoms/cta/cta.html'}"
      data-sly-call="${temp.ctaTemplate @ cta = featureContent.secondaryCta}"/>
  </sly>
</sly>

This will only render the secondary CTA if both the primary and secondary CTAs have text properties.

Raja_Reddy

Accepted solution

Community Advisor

Hi @anilkumar9

You can add an additional condition to check if the primary CTA is present before rendering the secondary CTA.

<sly data-sly-test="${featureContent.primaryCta.text}">
  <sly data-sly-use.temp="${'/apps/gehealthcare/components/atoms/cta/cta.html'}"
    data-sly-call="${temp.ctaTemplate @ cta = featureContent.primaryCta}"/>
  <!-- secondary CTA -->
  <sly data-sly-test="${featureContent.secondaryCta.text && featureContent.primaryCta.text}">
    <sly data-sly-use.temp="${'/apps/gehealthcare/components/atoms/cta/cta.html'}"
      data-sly-call="${temp.ctaTemplate @ cta = featureContent.secondaryCta}"/>
  </sly>
</sly>

This will only render the secondary CTA if both the primary and secondary CTAs have text properties.