Sorting projects by different categories on button click

The CMS Questions
1

Hello again,

I’m retaking this topic because I would like how to know implement a button to make all those projects to get sorted by the country.

i.e: Spain, Belgium, United States, Spain… → Spain, Spain, Belgium, United States…

I meant, all the projects are randomly sorted so I want to make the user by able to see al the following same countries one next to the other. Is it possible?

I hope you understand me.

My best.

2

Yes, you can either implement this with a form, then put the nessary logic into your controller. Or go for a JavaScript based solution, e.g. http://listjs.com

3

I’m not having success with this.

This is my showcase code:

<div id="list">
<ul class="showcase" >

  <?php foreach($projects as $project): ?>


<div class="section group" id="list">
	<div class="col span_1_of_3">
	<p class="showcase-title"><?= $project->title()->html() ?></p>
	</div>
	<div class="col span_2_of_3">
	<p class="showcase-location"><?= $project->country()->html() ?></p>
	</div>
	<div class="col span_3_of_3">
	<a class="showcase-url" target="_blank" href="<?= $project->link() ?>">(Link)</a>
	</div>
</div>



  <?php endforeach ?>

</ul>
</div>

This is my script:

<script>
	var options = {
   valueNames: [ 'showcase-title', 'showcase-location', 'showcase-url' ]
};

var userList = new List('list', options);
</script>

I’m not into code so I’m probably doing something wrong.
I really appreciate the help.

My best,

5

I can’t see that you have included the list.js script? Also, the script you posted above is nowhere to be seen in your site?

6

Sorry, I’m currently working in local.
I sent it to you to make you be able to see how I want to implement it.

7

The examples they have on the website are quite clear:

  1. Add the list script (list.min.js), before the closing body tag

  2. Then add the script tag with your initiation code ( the code you posted above, AFTER including the list script).

  3. Then you need the button with a data-sort attribute:

    <button class="sort" data-sort="showcase-title">
    Sort by title
  </button>

    Similar for the other buttons.

This is nothing Kirby specific.

9

Well, the first thing is that you have to include the script first, not after you initialise the list.

10

What do you mean? I think it’s correct now.

11

I know that this stuff is not easy when you’re new to it. But if you don’t follow the instructions, we are not getting anywhere, I’m afraid.

Now, you have included list.min.js twice, once in the header (local assets) and once in the footer (from CDN). Also, you haven’t included the data-sort atttribute in your anker element (button).

Please keep in mind that this is a Kirby forum and we do our best we can to sometimes go the extra mile and help with non Kirby stuff. But in general, this is not what this forum can support. Thanks for your understanding.

I have edited my instructions above a bit, hopefully it is clearer now.

12

You’re right!
I’ll get back to this and try again until it works.

Thanks so much for the help :slight_smile: