Skip to main content
edited tags
Link
Mark Cassidy
  • 25.4k
  • 7
  • 59
  • 117
edited tags
Link
Vlad Iobagiu
  • 18.8k
  • 2
  • 27
  • 53
Source Link
Sirius_B
  • 601
  • 5
  • 16

Accessing Link Field Values in a Scriban Template

I am using a Scriban template in Sitecore 9.3 with SXA and am attempting to render a link field. While the sc_link function reliably generates the URL, I cannot seem to find a way to access any other attributes of the Link Details such as Description, Alternate Text, Style class, Query string etc.

While I can use the sc_field function to pass in attributes to be rendered and it will render the values included in the Link Details fields, I cannot append to these values, just over-ride them (and only for the link's attributes).

Using these values from the link selector in Sitecore:

  • Description: Click Here
  • Target: New Browser
  • Alternate text: Alt Title
  • Style class: my-class
  • Query string: testing

With this code:

sc_field i_item 'CardLink' [['aria-label', (i_item.CardLink.Title.raw)], ['class', 'btn btn-orange'], ['role', 'button']]

Results in this markup:

<a href="/Company?testing" aria-label="Company" title="Alt Title" role="button" class="btn btn-orange" target="_blank">Click Here</a>

Good but there's no way for me to set the aria-label to the Alternate text value or include a Font Awesome icon inside the <a> tag.

Outputting the markup directly in the template solves the icon issue, but doesn't seem to give me access to the Link Details fields.

This code:

<a href="{{ sc_link i_item.CardLink.target }}" class="btn btn-orange" aria-label="{{ i_item.CardLink.Title.raw }}" role="button">
            <ul>
            <li>Description: {{i_item.CardLink.Description}}</li>
            <li>Title: {{i_item.CardLink.Title}}</li>
            <li>Text: {{i_item.CardLink.Text}}</li>
            <li>Class: {{i_item.CardLink.Class}}</li>
            <li>Target: {{i_item.CardLink.Target}}</li>
            <li>URL: {{i_item.CardLink.Url}}</li>
            </ul>
<i class="far fa-angle-double-right"></i></a>

Results in this markup:

<a href="/Company" class="btn btn-orange" aria-label="Company" role="button">
        <ul>
            <li>Description: </li>
            <li>Title: Company</li>
            <li>Text: </li>
            <li>Class: </li>
            <li>Target: /sitecore/content/[Tennant]/[Site]/Home/Company</li>
            <li>URL: /Company</li>
            </ul>  
<i class="far fa-angle-double-right"></i></a>

Proper URL and easily able to include the icon markup, but no access to the Link Details values.

Is there something I am missing?