# Conditional loading of javascript libs

**URL:** <https://forum.getkirby.com/t/conditional-loading-of-javascript-libs/22295>\
**Category:** Questions\
**Created:** [May 13, 2021, 7:20am UTC](https://forum.getkirby.com/t/conditional-loading-of-javascript-libs/22295 "2021-05-13T07:20:39Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![johannesverwoerd](https://avatars.discourse-cdn.com/v4/letter/j/bbe5ce/32.png) [@johannesverwoerd](https://forum.getkirby.com/u/johannesverwoerd)\
**Post date:** [May 13, 2021, 7:20am UTC](https://forum.getkirby.com/t/conditional-loading-of-javascript-libs/22295/1 "2021-05-13T07:20:39Z")

</div>

I try to load javascript libs that I use in Kirby blocks. I want to load these libs only if this type of block is used on the page.

I look for a way to say:

‘If one of the blocks on the page has the field ‘parallax’ to ‘isNotEmpty()’ then: (load javascript)’

Now I am using this code, which is not very pretty, and not the way to do this, I am sure.  
Who can enlighten me? Thank you in advance!

```
<?php foreach ($page->layout()->toLayouts() as $layout): ?>
    <?php foreach ($layout->columns() as $column): ?>
      <?php foreach ($column->blocks()->filterby('parallax', '!=', '')->limit('1') as $block): ?>
         (load javascript lib, I know how) 
      <?php endforeach ?>
    <?php endforeach ?>
<?php endforeach ?>

```

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [May 13, 2021, 8:23am UTC](https://forum.getkirby.com/t/conditional-loading-of-javascript-libs/22295/2 "2021-05-13T08:23:17Z")

</div>

What I would suggest is create a field method that loops through the layouts and columns and adds all blocks to a new `Blocks` object. That way, you get a plain collection of blocks that you can then filter as you like.

```auto
<?php
Kirby::plugin('texnixe/field-methods', [
	'fieldMethods' => [
		'layoutToBlocks' => function($field) {
			$blocks = new Kirby\Cms\Blocks();
			$layouts = $field->toLayouts()->map( static function($layout) use($blocks){
				return $layout->columns()->map( static function($column) use($blocks){
					$blocks->add($column->blocks());
				});
			});
            return $blocks;
		}
	]
]);

```

```auto
if ( $page->layout()->layoutToBlocks()->filterBy('parallax', '!=', '')->isNotEmpty() ) {
  // load stuff
}

```

Or you could even do the filtering in the method but make it more versatile by using arguments to filter by.

---

<div class="post-metadata">

**Author:** ![johannesverwoerd](https://avatars.discourse-cdn.com/v4/letter/j/bbe5ce/32.png) [@johannesverwoerd](https://forum.getkirby.com/u/johannesverwoerd)\
**Post date:** [May 13, 2021, 8:53am UTC](https://forum.getkirby.com/t/conditional-loading-of-javascript-libs/22295/3 "2021-05-13T08:53:51Z")

</div>

I try that but now the  
//load stuff  
appears if there is at least one block.  
I want it to show when inside at least one of the block, the field ‘parallax’ is not empty.

I changed the code slightly. Does that matter?

```
<?php if ( $page->layout()->layoutToBlocks()->parallax()->isNotEmpty() ) : ?>

TEST

<?php endif ?>
```

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [May 13, 2021, 10:31am UTC](https://forum.getkirby.com/t/conditional-loading-of-javascript-libs/22295/4 "2021-05-13T10:31:25Z")

</div>

> [@johannesverwoerd](#):
>
> ```auto
> <?php if ( $page->layout()->layoutToBlocks()->parallax()->isNotEmpty() ) : ?>
> 
> TEST
> 
> <?php endif ?>
> 
> ```

Your code is not valid, I’m afraid.

What I posted above worked in my test. Did you really copy it 1:1? Do you use the `parallax` field in multiple blocks? Then you should probably filter by block type first.

Maybe post your complete resulting code…

---

<div class="post-metadata">

**Author:** ![johannesverwoerd](https://avatars.discourse-cdn.com/v4/letter/j/bbe5ce/32.png) [@johannesverwoerd](https://forum.getkirby.com/u/johannesverwoerd)\
**Post date:** [March 10, 2022, 12:46pm UTC](https://forum.getkirby.com/t/conditional-loading-of-javascript-libs/22295/5 "2022-03-10T12:46:44Z")

</div>

Hi texnixe,

I have been struggling with this issue for a while but I cant get it to work.  
Maybe you have an idea??

What I would like to achieve is this:

‘If the page uses blocktype lottie  
or if any of the children of the page with notTemplate ‘default’ have a blocktype lottie  
then…’

I want to load javascript libs only when they are used.

This works for the page itself but how to get the blocks from the children?

```auto
    if ($layouts->hasBlockType('lottie') == true):?>
        <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
        <script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
    <?php elseif($page->children()->notTemplate('default')->layout()->layoutToBlocks()->hasBlockType('lottie') == true): ?>

```

Is there a way to merge the blocks from the page and the blocks from the children notTemplate(‘default’)? so I can filter by type?

Thank you in advance.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [March 10, 2022, 12:57pm UTC](https://forum.getkirby.com/t/conditional-loading-of-javascript-libs/22295/6 "2022-03-10T12:57:55Z")

</div>

Merge page and children into a collection then call the map method assigning a prop hasLottieBlock.

Or create page metod hasLottieBlock, then filter the collection by this method

---

<div class="post-metadata">

**Author:** ![johannesverwoerd](https://avatars.discourse-cdn.com/v4/letter/j/bbe5ce/32.png) [@johannesverwoerd](https://forum.getkirby.com/u/johannesverwoerd)\
**Post date:** [March 10, 2022, 1:52pm UTC](https://forum.getkirby.com/t/conditional-loading-of-javascript-libs/22295/7 "2022-03-10T13:52:40Z")

</div>

It would be best to have a page method with an argument being the block type, so that it could filter with any blocktype, but I wouldnt know where to start with this page method. How or where can I extend my knowledge?? Thanks!

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [March 10, 2022, 5:20pm UTC](https://forum.getkirby.com/t/conditional-loading-of-javascript-libs/22295/8 "2022-03-10T17:20:13Z")

</div>

Page methods are registered in a plugin, see [Page methods | Kirby CMS](https://getkirby.com/docs/reference/plugins/extensions/page-methods)

You can create is so it accepts arguments that you can use to pass the name of the blocks field or the block type to filter by.