Getting a field inline in JS

Loops & Logic
1

This used to work on my site:

<Loop taxonomy=post_tag terms="zx80,microace,zx81,ts1000,ts1500,ts2000,ts2048,ts2068,tc2068,zx-spectrum,ql,z88,downloadable">
<button class="btn arttagbutton" onclick="filterSelection('comp{Field name}')"> <Field title /></button>
</Loop>

The output would look like this:

<button class="btn arttagbutton" onclick="filterSelection('compzx80')"> ZX80</button>

Now I get:

<button class="btn arttagbutton" onclick="filterSelection('comp{Field name}')"> ZX80</button>

Honestly, I can’t tell you when it last worked but it did work once upon a time :slight_smile:

David

2

I figured it out :slight_smile:

New, working code (just the button part):

<Set name=thisbutton>comp<Field name /></Set>
<button class="btn arttagbutton" data-value="{Get thisbutton /}" onclick="filterSelection(this.dataset.value)">  <Field title /></button>

David

1 Like
3

Hi @factus10,

Thank you for this post and the data-attribute tip, I wouldn’t have succeeded without it.

Curious that the L&L code is not parsed in JS onclick…

4

Hmm, this works in console.log() by returning values in the browser console, but not in onclick()…

Here’s my code:

<Set template="post_tracking" type="string"><Get post_type_label />,<Field acf_radio=entrenous_type field=label />,<Field title /></Set>

<a href="{Get template=post_url}" data-value="{Get template=post_tracking}" onclick="_paq.push(['trackEvent', this.dataset.value]); console.log(this.dataset.value);">My link</a>

Maybe a syntax error in _paq.push(['trackEvent', this.dataset.value])?

5

Actually it seems to work but my onclick() event is supposed to trigger a Matomo function named _paq.push() that awaits for 3 values, not just one.

Thanks to ChatGPT, i found a solution to inject the 3 values in _paq.push() via data attributes set into the <a> tag (given L&L doesn’t parse its dynamic tags in onclick).

<Set template="post_tracking" type="string"><Get post_type_label />,<Field acf_radio=entrenous_type field=label />,<Field title /></Set>

<a href="{Get template=post_url}" 
   data-category="{Get post_type_label}" 
   data-action="{Field acf_radio=entrenous_type field=label}" 
   data-name="{Field title}" 
   onclick="trackEvent(this)">My link</a>

<script>
function trackEvent(element) {
    // Get the dynamic values from the data-* attributes
    var category = element.dataset.category;
    var action = element.dataset.action;
    var name = element.dataset.name;
    
    // Log the values for debugging
    console.log('Category:', category);
    console.log('Action:', action);
    console.log('Name:', name);

    // Ensure _paq is defined and the required values are present
    if (typeof _paq !== 'undefined' && category && action && name) {
        _paq.push(['trackEvent', category, action, name]);
    } else {
        console.error('Tracking object (_paq) not defined or missing parameters.');
    }
}
</script>

Note: i wasn’t able to use the L&L Script tab and inserted the JS function directly into the Template instead.
i’d like to understand how to use the Script tab and why it might be a better approach.