Toggle sorting of page section

Kirby 3 Questions 🤔
1

Heyo,

Got another panel idea I’m trying to solve here. In one of my blueprints, I have a pages section that I want to allow to be sorted one of two ways: The subpages will either be sorted manually or by date based on what the user chooses. Here’s how I tried to handle it…

casestudies_manual:
  headline: Case Studies (Manual Sorting)
  type: pages
  template:
    - casestudy
  when:
    studies_sort: true
casestudies_date:
  headline: Case Studies (Date Sorting)
  type: pages
  sortBy: date desc
  template:
    - casestudy
  when:
    studies_sort: false
studies_sort_options:
  type: fields
  fields:
    studies_sort:
      label: Sort By
      type: toggle
      width: 1/4
      text:
        - Date
        - Manual

On the frontend, I can look for that studies_sort field and change the sorting there, but on the backend, the when conditional isn’t effective. I’m seeing both manual and date sorted displays.

It feels like, from the docs, this should have worked, but I’m noticing in the docs that Kirby has a when conditional for pages fields but not pages sections.

2

As a follow up to this, after thinking about it, I decided to try rewriting it so everything was fields instead of sections.

So I went from this…

columns:

  pagecontent:
    width: 3/4
    sections:
      hero:
        type: fields
        fields:
          meta: fields/hero
      casestudies_manual:
        headline: Case Studies (Manual Sorting)
        type: pages
        template:
          - casestudy
        when:
          studies_sort: true
      casestudies_date:
        headline: Case Studies (Date Sorting)
        type: pages
        sortBy: date desc
        template:
          - casestudy
        when:
          studies_sort: false
      studies_sort_options:
        type: fields
        fields:
          studies_sort:
            label: Sort By
            type: toggle
            width: 1/4
            text:
              - Date
              - Manual

to this…

columns:
  pagecontent:
    width: 3/4
    sections:
      hero:
        type: fields
        fields:
          meta: fields/hero
      casestudies:
        type: fields
        fields:
          casestudies_manual:
            label: Case Studies (Manual Sorting)
            type: pages
            template:
              - casestudy
            when:
              studies_sort: true
          casestudies_date:
            label: Case Studies (Date Sorting)
            type: pages
            sortBy: date desc
            template:
              - casestudy
            when:
              studies_sort: false
          studies_sort:
            label: Sort By
            type: toggle
            width: 1/4
            text:
              - Date
              - Manual

This made the toggle idea work, except it made the pages selector work differently. Now instead of all child pages, you would have to set up a child page somewhere else and then add it to each of the casestudies fields.

Is there another way to handle this idea I’m not thinking of?

3

I see a problem here: Subpages are sorted by what you set in the subpage’s blueprint, not by what you set in the parent or the section or the field.

4

Gotcha, except I don’t think that solves this particular problem. If I go into the casestudy.yml file, and set
num: '{{ page.date.toDate("Ymd") }}'

Then that means that new pages will be named date_*title, except what I’m hoping here is to have a way in the blueprint itself for the client to either say “I want to manually sort all these case studies” or “I want these case studies to be sorted by date”, and change that value back and forth.

The PHP side of that I can handle, just trying to figure out how to have the blueprint display of subpages match how the page looks.

5

I didn’t say it solves the problem, I meant to say there is a problem that you can’t solve with a conditional field or conditional section (conditional section will be available in 3.2), because the sorting scheme is defined in the subpage. And conditions don’t work for blueprint settings, nor can you use conditional stuff across blueprints.

Or are you planning to ignore the Kirby sorting scheme completely and do it through a field? Maybe I’m missing something here…

6

Hmm, maybe this will explain it.

So let’s say I’ve got this PHP in the frontend…

<?php if ($page->sortby_date() == "true") {
  foreach($page->children()->listed()->sortby('date', 'desc') as $study) {
    snippet('casestudy', ['study' => $study]);
  } 
} else {
  foreach($page->children()->listed() as $study) {
    snippet('casestudy', ['study' => $study]);
  }
} ?>

and then this in the yaml…

sections:
  casestudies_manual:
    headline: Case Studies (Manual Sorting)
    type: pages
    template:
      - casestudy
  studies_sort_options:
    type: fields
    fields:
      sortby_date:
        label: Sort By
        type: toggle
        width: 1/4
        text:
          - Date
          - Manual

Is there a way to make the ordering that you see in the panel match the ordering you see in the frontend?

7

Hm, as soon as you set the sortBy option in a section, you cannot sort manually anymore, so how do you plan to implement the manual sorting?

Of course, you could do manual sorting when publishing the pages (instead of allowing in the section), then on the frontend, you use your if statement.

Maybe you can use a page model to sort by that sorts the pages depending on the sort field, haven’t tested if that works yet.