Pull in code in footer if Block item exists

1

I would like to have some script added to the footer of my website if I add a particular Block item to my page.

Currently my page blueprint has Layouts with Block elements inside them. I want it so that if I decide to add a ‘Slider Block’ to the layout on the page, the Script for this ‘Slider Block’ is also added to the footer of the pages code. Also Depending on the type of slider will depend on the Code added.

ie: Full page slider, multi-image slider etc.

How do I add the code to my footer for when this particular block as added?

I thought it might be something like this?

<?php 
$layout = $page->pageLayout()->toLayouts(); 
$column = $layout->columns();
$block = $column->blocks(); 
?>

<?php if($block->splidetype() == 'fullscreen'): ?>
<script>
/* MY SCRIPT LOADS HERE /*
</script>

<?php endif ?>

Example of Block Blueprint:

#slider
name: Image Carousel
icon: images
label: {{ noslides }} Slides per row

tabs:
  content:
    fields:

    <!-- some elements deleted for this -->
      splidetype: Splide Type
        type: select
        width: 1/2
        empty: false
        default: splide
        options:
          pagetitle: Page Title Banner
          fullscreen: Fullscreen
2

You can filter all blocks by type:

$sliderBlocks = $page->pageLayout()->toBlocks->filterBy('type', 'blocktypehere');

Then you get an array of splide types from this collection:

$splideTypes = $sliderBlocks->pluck('splideType', ',', true)

Then you can finally loop through this array of types and add the JS for each type.

3

Thanks for this -

Can you show me how I would Loop through this after - I am not sure how to join all this together.

4

Just a foreach loop, then for each item in the loop, check if fullscreen or any other value and then add the script for each type

5

This seems to be working now: Have I done this correct?

<?php 
$sliderBlocks = $page->pageLayout()->toBlocks()->filterBy('type', 'splidejs');
$splideTypes = $sliderBlocks->pluck('splidetype', ',', true)
?>

<?php foreach($splideTypes as $splideType): ?>

    <?php if($splideType == 'pagetitle'): ?>
    <script>
        new Splide(".page-title", {
        type: 'loop',
        perPage: 1,
        arrows: false,
        autoplay: true,
        interval: 5000,
        speed: 1200
        }).mount();
    </script>
    <?php endif ?>

    <?php if($splideType == 'fullscreen'): ?>
    <script>
        new Splide(".fullscreen", {
        type: 'loop',
        perPage: 1,
        arrows: false,
        autoplay: true, 
        interval: 5000,
        speed: 1200
        }).mount();
    </script>
    <?php endif ?>

<?php endforeach ?>
6

Note that this class based approach won’t work if you have, for example, multiple instances of the same slider in the page. According to the docs, each slider needs its own instance to be mounted.

7

I couldnt see another way to do it.

8

Maybe use a prefixed block id as id attribute in your block snippets, then pluck these ids instead of these splidetype classes and create a new instance for each id in the loop. Then you don’t need if statements, either.

9

Can you elaborate on this please? “prefixed block id as id attribute in your block snippets”

10

Each block has an id ($block->id() | Kirby CMS). Since these ids can start with a digit and a CSS selector cannot start with a digit, you need to prefix the id with something to make it valid.