<p>A safe way to add JavaScript resources via the frontend, is to use the <a href="https://craftcms.com/docs/templating/includejsfile"><code>{% includeJsFile %}</code></a> Twig function in your template. The nice thing about the <code>includeJsFile</code> function is that it doesn't matter where in your template you call it; the file(s) added will always be output just above your <code>&lt;/body&gt;</code> tag (or wherever else you put your <a href="https://craftcms.com/docs/templating/functions#getFootHtml"><code>{% getFootHtml() %}</code></a> call). Also, the function makes sure that no duplicate resources are requested, even if you have multiple calls to <code>includeJsFile</code> using the same URL (or filepath, for local resources).</p>

<p>You're not being specific about <em>why</em> the JavaScript should only be loaded for a specific entry, so it's difficult to advise about the optimal way to achieve this – but there's a few different approaches that could work nicely:</p>

<p>For one, you could add a conditional to your template, where you hard code the ID to the entry in question:</p>

<pre><code>{% if entry.id == 100 %}
    {% includeJsFile('https://code.jquery.com/jquery-3.0.0.js') %}
{% endif %}
</code></pre>

<p>Of course, you can have the conditional look at other attributes, as well:</p>

<pre><code>{% if entry.section.handle == 'awesomeSection' %}
    {% includeJsFile('https://code.jquery.com/jquery-3.0.0.js') %}
{% endif %}
</code></pre>

<p>If the JavaScript should e.g. be loaded whenever a certain Matrix block type is output, you could do something like this:</p>

<pre><code>{% for block in entry.matrixField %}
    {% switch block.type %}
        {% case 'someBlockType' %}
            ...
            {% includeJsFile('https://code.jquery.com/jquery-3.0.0.js') %}
    {% endswitch %}
{% endfor %}
</code></pre>

<p>Remember, <code>includeJsFile</code> handles duplicate requests for you, so it doesn't matter if there's more than one <code>someBlockType</code> block – the actual external JS resource will only be requested once.</p>

<p>Of course, the most flexible option – and the one I would recommend – would be to add a custom field to your entry type, where you can add URL(s) to external scripts that should be loaded. This makes it easy to add external JavaScript resources to any entry, via the regular editing form in the CP. For this, the <a href="https://craftcms.com/docs/table-fields">Table fieldtype</a> will do nicely (the following assumes a table field with the handle <code>externalScripts</code> and a single column called <code>url</code>):</p>

<pre><code>{% for row in entry.externalScripts %}
    {% if row.url %}
        {% includeJsFile(row.url) %}
    {% endif %}
{% endfor %}
</code></pre>

<p>Finally, another approach would be to add a PlainText field to your entry type (multiple lines, i.e. a textarea), where you can paste in a full <code>&lt;script&gt;</code> tag, e.g.:</p>

<p><code>
    &lt;script src="https://code.jquery.com/jquery-3.0.0.js"   integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo="   crossorigin="anonymous"&gt;&lt;/script&gt;
</code></p>

<p>If go down this path, you can't use <code>includeJsFile</code> and will have to output the string "manually" – making sure to add the <code>|raw</code> filter to prevent Twig from escaping the HTML (the following assumes your plaintext field is called <code>scripts</code>):</p>

<pre><code>{{ entry.scripts|raw }}
</code></pre>

<p>For the latter option, you might want to add a <code>{% block scriptsInFooter %}</code> to your <a href="http://twig.sensiolabs.org/doc/tags/extends.html">base layout</a>, in order to have the value for the <code>scripts</code> field render in the appropriate place:</p>

<pre><code>{# Entry template #}
{% block scriptsInFooter %}
    {{ entry.scripts|raw }}
{% endblock %}

{# Base template #}
    ...
    {% block scriptsInFooter %}{% endblock %}
&lt;/body&gt;
</code></pre>

CC BY-SA 3.0
2016-06-27T11:27:28.130Z
+1 thanks for the in depth response - way beyond what i was hoping. includeJS looks like it will do the trick - it is for a snipcart integration and I want to ajax to 3rd party currency conversion on entry products
joomkit
CC BY-SA 3.0
2016-06-27T10:03:20.120Z
2016-06-27T10:03:20.120Z
Mats Mikkel Rummelhoff
<p>What  is the recommended way to add section specific javascript to entry pages?
I need to make some 3rd party api calls front end for currency conversion but I want to only use it on a specific section entry.</p>

<sections><javascript>
Loading javascript on specific sections/pages
# Loading javascript on specific sections/pages

(Asked by: username_0 on 2016-06-27)

What is the recommended way to add section specific javascript to entry pages?
I need to make some 3rd party api calls front end for currency conversion but I want to only use it on a specific section entry.

**Tags:** sections, javascript


---

## 1 answers

### Answer by username_1 on 2016-06-27. Score: 12 | Accepted answer

A safe way to add JavaScript resources via the frontend, is to use the {% includeJsFile %} Twig function in your template. The nice thing about the includeJsFile function is that it doesn't matter where in your template you call it; the file(s) added will always be output just above your  tag (or wherever else you put your {% getFootHtml() %} call). Also, the function makes sure that no duplicate resources are requested, even if you have multiple calls to includeJsFile using the same URL (or filepath, for local resources).
You're not being specific about why the JavaScript should only be loaded for a specific entry, so it's difficult to advise about the optimal way to achieve this – but there's a few different approaches that could work nicely:
For one, you could add a conditional to your template, where you hard code the ID to the entry in question:
{% if entry.id == 100 %}
    {% includeJsFile('https://code.jquery.com/jquery-3.0.0.js') %}
{% endif %}

Of course, you can have the conditional look at other attributes, as well:
{% if entry.section.handle == 'awesomeSection' %}
    {% includeJsFile('https://code.jquery.com/jquery-3.0.0.js') %}
{% endif %}

If the JavaScript should e.g. be loaded whenever a certain Matrix block type is output, you could do something like this:
{% for block in entry.matrixField %}
    {% switch block.type %}
        {% case 'someBlockType' %}
            ...
            {% includeJsFile('https://code.jquery.com/jquery-3.0.0.js') %}
    {% endswitch %}
{% endfor %}

Remember, includeJsFile handles duplicate requests for you, so it doesn't matter if there's more than one someBlockType block – the actual external JS resource will only be requested once.
Of course, the most flexible option – and the one I would recommend – would be to add a custom field to your entry type, where you can add URL(s) to external scripts that should be loaded. This makes it easy to add external JavaScript resources to any entry, via the regular editing form in the CP. For this, the Table fieldtype will do nicely (the following assumes a table field with the handle externalScripts and a single column called url):
{% for row in entry.externalScripts %}
    {% if row.url %}
        {% includeJsFile(row.url) %}
    {% endif %}
{% endfor %}

Finally, another approach would be to add a PlainText field to your entry type (multiple lines, i.e. a textarea), where you can paste in a full 

If go down this path, you can't use includeJsFile and will have to output the string "manually" – making sure to add the |raw filter to prevent Twig from escaping the HTML (the following assumes your plaintext field is called scripts):
{{ entry.scripts|raw }}

For the latter option, you might want to add a {% block scriptsInFooter %} to your base layout, in order to have the value for the scripts field render in the appropriate place:
{# Entry template #}
{% block scriptsInFooter %}
    {{ entry.scripts|raw }}
{% endblock %}

{# Base template #}
    ...
    {% block scriptsInFooter %}{% endblock %}

> **Comments:**
> **username_0**: +1 thanks for the in depth response - way beyond what i was hoping. includeJS looks like it will do the trick - it is for a snipcart integration and I want to ajax to 3rd party currency conversion on entry products  

---

