Liquid logic in {% javascript %} - shopify section

Shopify Discussion
1

When creating a new section you have the schema, stylesheet and javascript sections.

I cant get the javascript section to contain liquid logic, is there any way to do this?

{% javascript %}
document.addEventListener("DOMContentLoaded", function(event) {
  let close_btn = document.getElementsByClassName("announcement-close-btn");
  for(let i = 0; i < close_btn.length; i++){
    let parent = close_btn[i].parentNode;
    if (sessionStorage.getItem(parent.id) == null){
      parent.style.display = "block";
      close_btn[i].addEventListener("click", function(){
        {% if section.settings.announcement-bar-row-anim-bool && settings.animate-css-bool %}
        parent.classList.add('animate__animated', '{{ section.settings.announcement-bar-row-exit-anim }}');
        parent.addEventListener('animationend', () => {
          parent.style.display = "none";
		  localStorage.setItem(parent.id,true);
        });
		{% else %}
		parent.style.display = "none";
		localStorage.setItem(parent.id,true);
		{% endif %}
      });
    }
  }
});

{% endjavascript %}

this outpouts the following script:

(function() {
  var __sections__ = {};
  (function() {
    for(var i = 0, s = document.getElementById('sections-script').getAttribute('data-sections').split(','); i < s.length; i++)
      __sections__[s[i]] = true;
  })();
  (function() {
  if (!__sections__["header-announcement-bar"]) return;
  try {
    
document.addEventListener("DOMContentLoaded", function(event) {
  let close_btn = document.getElementsByClassName("announcement-close-btn");
  for(let i = 0; i < close_btn.length; i++){
    let parent = close_btn[i].parentNode;
    if (sessionStorage.getItem(parent.id) == null){
      parent.style.display = "block";
      close_btn[i].addEventListener("click", function(){
        {% if section.settings.announcement-bar-row-anim-bool && settings.animate-css-bool %}
        parent.classList.add('animate__animated', '{{ section.settings.announcement-bar-row-exit-anim }}');
        parent.addEventListener('animationend', () => {
          parent.style.display = "none";
		  localStorage.setItem(parent.id,true);
        });
		{% else %}
		parent.style.display = "none";
		localStorage.setItem(parent.id,true);
		{% endif %}
      });
    }
  }
});

  } catch(e) { console.error(e); }
})();

})();

as you can see, the liquid is inline instead of changing the script based on theme settings

2

Hello,

I faced same issue last day and at the end I have to change the tag

{% javascript %} {% endjavascript %}

with

3

So yes this does solve the problem, however it also removes the functionality of the {% javascript %} tag.

When doing this your script will be inline instead of compiled with all other active {% javascript %} sections.

I think it would still be preferred if we could get liquid logic in the javascript tags, however depending on how its compiled I think this may be impossible.