Search code examples
sightlyhtl

Referencing variable inside template call - sightly


I'm trying to call a variable inside quotes inside a data-sly-template call. I would expect the output to include my string with the appropriate varible inside quotes. Below is the template and the string I'm using to call it:

Template:

    <!-- template -->
    <template data-sly-template.bnrButton="${ @ style='String: button color class (default btn-primary)', classes='String: additional component button classes', text='String: button text (translation key)', defaultText='String: default button text (translation key)', link='String: link target for button (# is default)', fullWidth='Boolean: whether to display button in full width of container', noFollow='Boolean: if button should have a nofollow tag (no is def)', gaCategory='String: GA Category', gaEvent='String: GA Event', gaLabel='String: GA Label', gaAction='String: GA Action'}">
    <a class="btn ${style || 'btn-primary'} hidden-print ${classes}${fullWidth ? ' btn-full-width' : ''}" role="button" href="${link || '#'}" rel="${noFollow ? 'nofollow' : ''}" onclick="${gaEvent @ context = 'scriptString'}">${text || defaultText  @ i18n}</a>    
    </template> 

    <!-- call made to the template -->
    <sly data-sly-call="${patterns.bnrButton @ style='btn-secondary-light', classes='btn-sm', text=teaser.libraryButtonHeading, defaultText='View Library', link=teaser.myLibraryLink.href, fullWidth='true', newWindow='false', gaEvent='trackEvent(&#39;Test 1&#39;,&#39;Test 2&#39;,&#39;${teaser.teaserMessage}&#39;)'}"></sly>

If tried a number of combinations to get teaser.teaserMessage to print the authored message, but have been having issues because the patterns call is already inside quotes. I want to be able to pass a single string (called in the template call) to the template that includes all the information it needs for the onclick.

Thoughts?

Thank you.


Solution

  • You can use data-sly-test.variable_name before the template call to store the value into a variable:

    <sly data-sly-test.gaEvent="${'trackEvent(&#39;Test 1&#39;,&#39;Test 2&#39;,&#39;{0}&#39;)' @ format=teaser.teaserMessage}"
         data-sly-call="${patterns.bnrButton @ ..., gaEvent=gaEvent }"></sly>