How to Properly Extract CTA Field Values to Place Into Module Cards

Developer Support CMS Development
1

Hello,
I’m trying to make the entire module cards into hoverable link, which is a success! However, each card links to a different URL, which is my problem. Because each card has a cta_field to it, I want to be able to have the card link to the proper cta link that it’s associated with.

Screen Shot 2022-11-08 at 2.50.46 PM.jpg
Screen Shot 2022-11-08 at 2.50.46 PM.jpg1104×567 97.9 KB

^This is the entire card. I made each card with different ctas. I tested out some code and was able to turn each entire card div into hoverable links!..but with only one type of url lol I was just testing things out.

{% set splitArray = cta('c09890af-fd87-41f5-bb23-680107d618bb')|split('href="', 2) %}
{% set CTAUrlArray = splitArray[1]|split('"', 2) %}
{% set CTAUrl = CTAUrlArray[0] %}

<div class="kl-card-grid kl-card-grid--3-columns">
 <div {% if module.overwrite_spacing %}style="margin: -{{ spacing }}px;"{% endif %}>
 {% for item in module.cards %}

 <div class="kl-card-grid__card-wrapper"
 {% if module.overwrite_spacing %} 
 style="padding: {{ spacing }}px;"
 {% endif %}
 >
 <button onclick="window.location.href='{{CTAUrl}}'" class="blog-button"><div class="kl-card-grid__card">
 {% if item.image.src %}
 {% set style = 'background-image: url(%s);'|format(item.image.src) %}
 {% call render_link(item.anchor, 'kl-card-grid__image', style, true) %}
 {% endcall %}
 {% endif %}
 <div class="kl-card-grid__content">
 {% if item.preheader %}
 <span class="kl-card-grid__preheader">{{ item.preheader }}
 </span>
 {% endif %}
 {{ item.content }}

 {#<div class="kl-card-grid__cta">{% cta guid="{{ module.cta_field }}" %} </div>#}
 <div class="kl-card-grid__cta">{% cta guid="{{ item.cta_field_1 }}" %} </div>
 </div>

 </div>

 </a>
 </button>
 </a>
 </div>
 {% endfor %}
 </div>

</div>

Here is the code. I managed to test out code from: https://community.hubspot.com/t5/CMS-Development/Get-URL-from-CTA/m-p/208951 and it worked fine, but for only one type of cta. As mentioned, each card will have seperate cta urls.

Screen Shot 2022-11-08 at 3.00.27 PM.png
Screen Shot 2022-11-08 at 3.00.27 PM.png430×615 108 KB

I tried to target cta_field_1 by doing {{cta_field_1.src}} or {{item.cta_field_1.src}} but can’t figure it out still. I want to be able to extract this so that way, the card will link to whatever cta_field it is associated with by default.
Idk if that makes sense, I’ve been at this for 3 hours.
Thank you!!

2

You’ll want to put your CTA array splitting code inside of your for loop and replace the ID in splitArray with the CTA field variable. This way when your code loops through the repeater it knows which CTA to pull for that code.

Pared-down your code so it’s easier to look at here but hopefully you still get the idea:

{% for item in module.cards %}
 // Move array splitting inside for loop and use CTA field's value for the CTA ID
 {% set splitArray = cta(item.cta_field_1)|split('href="', 2) %}
 {% set CTAUrlArray = splitArray[1]|split('"', 2) %}
 {% set CTAUrl = CTAUrlArray[0] %}

 <div class="kl-card-grid__card-wrapper">
 <button onclick="window.location.href='{{CTAUrl}}'" class="blog-button">
 <div class="kl-card-grid__card">
 Just Some Text
 <div class="kl-card-grid__cta">{% cta guid="{{ item.cta_field_1 }}" %} </div>
 </div>
 </button>
 </div>
{% endfor %}