Displaying grouped divs by date

Kirby 2 Solved ✅
1

Hi guys,

I’m building a section on my site called “live listings”. This section will allow me to upload “listings” via the cms. I input some basic information like title, text block, date etc.

On the HTML side of things, What I would like is to group these listings by date.

For example, I have added 3 listings as children of the live page via CMS. Each listing has a different date.

I would then like to have a small nav menu on the page itself which shows the dates of the listings I have added. Which ofcourse would filter by date.

So to make things clearer if I enter (1/12/2016) as a date for listing A. (2/12/2016) for listing B and (3/12/2016) for listing C. These dates are Thursday, Friday and Saturday. So on the page, I would like to show “Thurs, Fri, Sat” and once clicked these nav items would then only show the corresponding listings on that day.

So far I have the menu system outputting the days from the listings But I cannot figure out how to then group these listings by date and only show the specific ones.

Here is my code for the date nav menu.

    <?php $count = 0; 
  	foreach($page->children()->groupBy('date') as $date => $items): 
  	$count++; ?>
			<?php $day = strtotime($date); $today = date('D', $day); ?>	  
  		<li><a href="#" class="<?php if($count == 1) { echo 'active '; };  echo strtolower($today); ?>"><?php echo $today ?></a></li>
  	<?php endforeach; ?>
  </ul>
2

I’m a bit confused. Do you want to group the items by day as it says in your topic header (so that under each day you list the corresponding items; but then the navigation would no make sense) or do you want to filter them like you would filter blog posts by tag like you explain later on in the text?

3

Yes the dates on the listings are converted to actual days (1/12/2016 -> Thurs).

All converted listing dates are then listed in the nav at the top of the page. (Ex: Thurs / Friday / Saturday ).

I have moved on and managed to get the listings to group by day.

<?php foreach($page->children()->groupBy('date') as $date => $items): ?>
	<?php $day = strtotime($date); $today = date('D', $day); ?>	  
	<ul class="<?php echo strtolower($today); ?>">
		
	<?php foreach($items->sortBy('clicks', 'desc') as $item): ?>
	  <div class="event">
		
		  <h1><?php echo $item->title(); ?></h1>
		
		  <?php echo $item->text()->kirbytext(); ?>
	  </div>
	<?php endforeach ?>
	</ul>
	<?php endforeach ?>

So now all the listings for each day are grouped inside ul’s on the page. My next step would be to write some javascript to show/hide these ul’s based on whats clicked. The problem I’m having now is how to account for many different days. For example, Right now i only have 3 days (Thurs,Fri,Sat). I can easily just hide fri/sat when thurs is clicked. But I want to account for many different days. Lets say there are listings with a range of 5 days (Mon,Wed,Fri,Sun,Thurs). I need a way to only show the relevent day when that nav item is clicked.

Apologises if im confusing you more, Im a little confused myself and trying to explain to the best of my abilitity

4

If you want to do this via javascript, then you could use a data-attribute on the link that is clicked, and then hide all lists that do not have this class. Put a container around the lists to be able to address the items.

BTW. You should use <li> elements inside <ul>, not <div>.

1 Like