Count items in a foreach loop to number elements

[jimbobrjames]

I’m having some trouble figuring this out. I’m using a jquery plugin (Scrollit) to scroll to parts of the page but i need to get Kirby to help out a little.

It works by giving elements and id in a data attribute: data-scroll-index="INDEXNUMBER"

Then you can scroll to it by putting a data attribute on an anchor tag: data-scroll-goto="INDEXNUMBER+1"

But this is in a foreach loop with Kirby Builder in it, so i need to get Kirby to automatically populate the INDEXNUMBER for me, and for the link tag it needs to add 1 to it, since this will make scroll on to the next builder panel on the page.

My code looks like this (some of it is slightly fake to illustrate what i need in words).

    <?php foreach($page->builder()->toStructure() as $section): ?>
      <?php $INDEXNUMBER = $theforeachindex  ?>
      <div class="builder-block" data-scroll-index="INDEXNUMBER">
      <?php snippet('builder/' . $section->_fieldset(), array('data' => $section)) ?>
      </div>
      <a data-scroll-goto="INDEXNUMBER+1" target="_blank" class="pagenav"><i class="fa fa-chevron-down" aria-hidden="true"></i></a>
    <?php endforeach ?>

How do i get Kirby to count the number of items in the foreach loop and fill in the numbers, and also how would i get to start from a set number? Some pages already have these numbers hard coded further up the page so i might to start the numbering on the builder panels from an arbitrary number.

Help! Thanks

[sylvainjule]

You have to set the index variable to the number you’d like before starting the foreach loop, and increment it :

 <?php $index = 0; foreach($page->builder()->toStructure() as $section): $index++; $next = $index + 1;?>
    <div class="builder-block" data-scroll-index="<?php echo $index ?>">
        <?php snippet('builder/' . $section->_fieldset(), array('data' => $section)) ?>
    </div>
    <a data-scroll-goto="<?php echo $next ?>" target="_blank" class="pagenav"><i class="fa fa-chevron-down" aria-hidden="true"></i></a>
<?php endforeach ?>

[texnixe]

Use a counter variable with a set value and increase it with every loop.

@sylvainjule beat me to it…

Edit: an alternative to the counter would be using the indexOf() method.

<?php 
$sections = $page->builder()->toStructure()
foreach($sections as $section): 
  $index = $sections->indexOf($section); // add offset if required
  $next = $index + 1;
?>
    <div class="builder-block" data-scroll-index="<?php echo $index ?>">
        <?php snippet('builder/' . $section->_fieldset(), array('data' => $section)) ?>
    </div>
    <a data-scroll-goto="<?php echo $next ?>" target="_blank" class="pagenav"><i class="fa fa-chevron-down" aria-hidden="true"></i></a>
<?php endforeach ?>

[jimbobrjames]

Woah two at once! Lol. thanks ill give it a go…