Take the 2-minute tour ×
Craft CMS Stack Exchange is a question and answer site for administrators, end users, developers and designers for Craft CMS. It's 100% free, no registration required.

I need to add some javascript to a page depending upon whether or not a matrix block is used, one is for a slideshow block to load responsiveslides.js, another is for a video block to load fitvid.js. If I place it in the loop then I will get the javascript repeated for each time an entry uses that matrix block. I'm looking to add this towards the bottom of the template and load the .js files once each if the block is used in a loop above. What's the best way to do this?

share|improve this question

2 Answers 2

up vote 4 down vote accepted

I would use a loop to set a conditional, and then check it afterwards. You need to initialize the conditional outside of the loop, otherwise it won't be set outside the loop later.

{% set haveAVideo = false %}
{% for block in matrixBlocks %}
  {% if block.type == 'video' %}
    {% set haveAVideo = true %}
  {% endif %}
{% endfor %}

{% if haveAVideo %}
  {# video block js #}
  {% includeJsFile ... %}
{% endif %}
share|improve this answer
    
Thanks Marion, this was exactly what I was looking for. Since I already had a switch case for my blocks I just added the set = true to the top of each block case and placed the conditional tests way at the bottom of my template before the closing endblock tag, though I could have placed this anywhere within my block tag. –  Stuart McCoy Aug 19 at 16:17
    
I would use the includeJsFile tag to include the javascript, and keep all the setting and testing code together for clarity. Glad it's working for you! –  Marion Newlevant Aug 19 at 16:24
    
I don't know if this is better but I wound up changing all my switch case logic to include files and placed the variables and js at the top of each respective include file (slideshow js with slideshow include, video js...). This removes the need for the haveVideo variable because the js is only written to the page if the case is true. –  Stuart McCoy Aug 27 at 16:46

When you're looping through your matrix blocks, check against the block.type to see what kind of blocks you're dealing with. Assuming you find the block type that you want (at least once), try referencing the JS file with an includeJsFile tag...

{% includeJsFile "/your/site/script.js" %}

When you use that tag, your JS file will be queued up... If a future loop triggers the same tag, but the file is already queued up, it won't be added again.

Another benefit is that this will automatically render the script tag at the bottom of your page, just before the body tag closes.

share|improve this answer
    
You could additionally wrap the includeJsFile tag in a conditional checking for the loop index loop.first. There's also the getFootHtml() tag to exactly define the position of the scripts. –  carlcs Aug 19 at 15:55
    
@carlcs I'm not sure loop.first plays in here... He only cares about "whether or not" the block is used, not anything to do with the position of that block. –  Lindsey D Aug 19 at 15:58
    
Lindsey yep right. It doesn't work if you loop through all block types at once, and that's what one probably does. Sorry! –  carlcs Aug 19 at 16:07
    
Just adding the IncludeJs and IncludeJsFile to my switch cases repeated the script for each slideshow on the page. Marion's answer below worked and was the direction I was thinking initially but hadn't figured out the best way to test for the block itself with a variable. –  Stuart McCoy Aug 19 at 16:15

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.