Link for <a> element acting weirdly

[TristanP]

Ok so this is a little more complicated than the title suggests.

I have an element that i want to be clickable, so i have set it to have the html tag <a>. I have then placed a shortcode in the link field that renders the correct url. See screenshot below.

For testing purposed, i have placed that very shortcode in the element itself (visible to admin’s only via a condition). It outputs the correct permalink. However, when i click the <a> element that has that link it does nothing?

[ruenel]

Hello Tristan,

I have checked the mentioned page, and I could not find which DIV element has the issue. Please point me to the correct Section or Div element.

• See the secure note below.

By the way, please make sure that the DIV element which will have your <a> tag is not wrapped with another DIV or equivalent element that is also using the <a> tag. Keep in mind that you cannot nest an HTML <a> tag.

Best Regards.

[TristanP]

Hi Ruenel,

In your screenshot, you’re on the looper. This element actually sits below the looper output, as a sibling to the parent of the element highlighted in your screenshot. It is the element with class therapy-library-today-card. Screenshot here below shows where it sits in the DOM.

I have now added a ‘today’ label to it and have added the shortcode inside the element too. That should make it easier to find. Also, i just checked and the element is not embedded inside an other <a> element? Would you mind having another look?

[christian]

Hey @TristanP,

Your link setup looks correct but if you notice in your screenshot, your link does not have a URL. That is because the Dynamic Content for the URL is not correct. I’m not sure what you’re going for in there. Please clarify what you want to display and what URL should be used.

Thanks.

[TristanP]

I’m not sure what you mean? The dynamic content for the link is a shortcode. That shortcode is also visible in the text field inside the element, and as you can see there, it outputs a valid url. Shortcodes also work for conditions etc. so I was expecting to be able to use them here also.

[christian]

Hey @TristanP,

If your setup is correct, there should be a URL in the href. But, your href is blank.

Please test your shortcode and/or Dynamic Content codes. Make sure they are outputting the link that you need.

[TristanP]

The shortcode works fine.

To prove this i used it in a raw html block like so

<a href='[enduuro_current_programday field="url"]'>click here, this element uses the shortcode as href in raw html</a>

You can see it at the bottom of the same page.

So i would expect that i could use that same shortcode in a link field for a Cornerstone <a> element.

[ruenel]

Hello Tristan,

Your [enduuro_current_programday field="url"] was not recognized by the dynamic content field. You may need to add your shortcode so that it will be rendered. Perhaps, this old thread can help you:

Populate Stat Bar Length with Shortcode?

Looks like you can do this using a custom Twig template. Please add this in the functions.php file: function x_return_thirty_shortcode() { return "30%"; } add_shortcode('x_return_thirty', 'x_return_thirty_shortcode'); add_filter('cs_twig_functions', function($functions) { $functions['x_render_thirty'] = [ 'callable' => function() { return do_shortcode('[x_return_thirty]'); } ]; return $functions; }); Click the dynamic content icon in the Length fielld, sea…

Meanwhile, it is easier to include your link with the Raw content you currently have:

<a  href="[enduuro_current_programday field='url']" class="modified by rue">
<span class="therapy-library-session-type-marker">[enduuro_current_programday field="content_type"] = insight
</span>

  [cs_component id="tRJIk9xOugT4uVDako"]

  <div class="therapy-library-session-info">
    <div class="therapy-library-session-name">[enduuro_current_programday field="title"]</div>
    <div class="therapy-library-session-meta">
      <div>Day [enduuro_current_day_pos] · [enduuro_current_programday field="content_duration"]</div>
    </div>
    <div>
      <p style="font-size:10px; ">shortcode resolves as https://enduuro.com/programday/15</p>
    </div>
  </div>

  <div class="therapy-library-session-action">
    <div class="therapy-library-session-today-badge">TODAY</div>
  </div>
</a>

Cheers.