javascript

Generates an HTML <script> tag containing the enclosed JavaScript.

{% javascript %}
  JS_code
{% endjavascript %}

• JS_code: The JavaScript you want to run.

It's most useful inside a section or snippet, for the small amount of scripting that depends on the current settings. Anything reusable belongs in the assets directory, where it's cached across pages. See JavaScript and styles.

Example:

{% javascript %}
  const root = document.getElementById('youcan-section--{{ section.id }}');

  root?.querySelector('[data-toggle]')?.addEventListener('click', () => {
    root.classList.toggle('is-open');
  });
{% endjavascript %}

Output

<script>
  const root = document.getElementById('youcan-section--slideshow');

  root?.querySelector('[data-toggle]')?.addEventListener('click', () => {
    root.classList.toggle('is-open');
  });
</script>

Note: Scope your queries to the section's wrapper element rather than the whole document. Two copies of the same section can be on one page, and sections are added and removed while a seller is customizing.