How to implement a sidebar

Ndugu · August 21, 2019, 7:02pm

So I want to add a sidebar to a page and I can’t pull it off.

I don’t really want to use a snippet, because that sidebar will only live on that 1 page. Also I want users to be able to add content to that sidebar (mostly external URLS) from the panel and from that panel page, not from an extra “sidebar” panel page.

The Page the sidebar has to go in is a collection page, quite like a blog. Its blueprint is like this:

title: PBeFG

sortBy: date desc
columns:
  left:
    width: 1/2
    sections:
      info:
        type: info
        label: Hinweis
        text: Füge eine neue Seite hinzu und erstelle einen Entwurf Deines Beitrags.

      drafts:
        type: pages
        templates:
          - pbefg-artikel
        headline: Entwürfe
        status: draft

      unlisted:
        type: pages
        headline: In Arbeit
        status: unlisted

  right:
    width: 1/2
    sections:
      listed:
        type: pages
        headline: Veröffentlicht
        status: listed

options:
  changeTitle: false
  changeStatus: false
  delete: false
  changeSlug: false
  drafts: true
  duplicate: false

Where ever I try to add a field to this blueprint to add content für that sidebar I get an error.

Is it not possible to add fields to such a blueprint?

I added fields to my txt file like:

Title: PBeFG

----

Info:

----
Text:

----
sidebar:

----
sidebarlink:

But that wouldn’t help.

Ndugu · August 21, 2019, 7:21pm

Äh…

Now I just blindly copied some code from the docs and it kinda works:

  fields:
  linklist:
    label: Links
    type: structure
    fields:
      titel:
        label: Titel
        type: text
      beschreibung:
        label: Beschreibung
        type: text
      url:
        label: URL
        type: url

Maybe the indentation was wrong, although I tried everything. It is very tricky.

Ndugu · August 21, 2019, 8:14pm

And of course I can’t write the php in the template.

I looked at the docs and followed the recipe for structure fields and did this:


<?php 
// using the `toStructure()` method, we create a structure collection
      $items = $page->linklist()->toStructure();
// we can then loop through the entries and render the individual fields

    foreach ($items as $item): ?>
    <ul class="pbefg-link-list">

      <h2><?= $item->title()->html() ?></h2>
      <p><?= $item->text()->html() ?></p>
     <li><a href="<?= $item->url() ?>">sidebar-link</a></li>

   </ul>
      <?php endforeach ?>   
 </aside>

This leads to an empty aside. No links, no h2, no nothing.

I probably have the wrong variables and the wrong loop and everything, but I can’t figure it out.

carstengrimm · August 21, 2019, 8:26pm

in your structure you have the beschreibung field, on the other hand you echo $item->text() … you should echo $item->beschreibung()

you could also just do

<?php foreach($page->linklist()->toStructure() as $item): ?>

if you are not certain what the problem is you could always try out dumping first…

<?php dump($page->linklist()->toStructure()) ?>
// this should show the content,

and if it’s not showing anything, it’s probably either not saved, or looking at the wrong place…

texnixe · August 21, 2019, 8:50pm

Does the blueprint work in the Panel, because indentation seems still wrong. Could you please post the complete blueprint?

While the name of one of the fields seems wrong, that doesn’t explain why the other fields do not output anything…

Ndugu · August 21, 2019, 10:25pm

@texnixe

Yes they seem fine to work in the blueprint. Here it is:

title: PBeFG
sortBy: date desc

columns:
  left:
    width: 1/2  
    sections:
      info:
        type: info
        label: Hinweis
        text: |
            Füge eine neue Seite hinzu und erstelle einen Entwurf Deines Beitrags.

            Unten kannst Du Links zum Thema einfügen.

      drafts:
        type: pages
        templates:
          - pbefg-artikel
        headline: Entwürfe
        status: draft

      unlisted:
        type: pages
        headline: In Arbeit
        status: unlisted

  right:
    width: 1/2
    sections:
      listed:
        type: pages
        headline: Veröffentlicht
        status: listed


  fields:
  linklist:
    label: Links
    type: structure
    fields:
      titel:
        label: Titel
        type: text
      beschreibung:
        label: Beschreibung
        type: text
      url:
        label: URL
        type: url

# Verhindern, dass diese Seiten gelöscht, umbenannt oder ihr Status verändert wird
# ChangeStatus ist hier noch auskommentiert, das würde ich dann später ändern
options:
  changeTitle: false
  changeStatus: false
  delete: false
  changeSlug: false
  drafts: true
  duplicate: false

Ndugu · August 21, 2019, 10:37pm

the ul has appeared, but not the rest.

Bildschirmfoto%205

texnixe · August 21, 2019, 10:37pm

But youur indentation is wrong and this blueprint doesn’t create a structure field but just three separate fields. Depending on whether this field should be in its own column or also in the right column, you have to change this, for example:

title: PBeFG
sortBy: date desc


# Verhindern, dass diese Seiten gelöscht, umbenannt oder ihr Status verändert wird
# ChangeStatus ist hier noch auskommentiert, das würde ich dann später ändern
options:
  changeTitle: false
  changeStatus: false
  delete: false
  changeSlug: false
  drafts: true
  duplicate: false 

columns:
  left:
    width: 1/2  
    sections:
      info:
        type: info
        label: Hinweis
        text: |
            Füge eine neue Seite hinzu und erstelle einen Entwurf Deines Beitrags.

            Unten kannst Du Links zum Thema einfügen.

      drafts:
        type: pages
        templates:
          - pbefg-artikel
        headline: Entwürfe
        status: draft

      unlisted:
        type: pages
        headline: In Arbeit
        status: unlisted

  right:
    width: 1/2
    sections:
      listed:
        type: pages
        headline: Veröffentlicht
        status: listed


      fieldsection: # start a new fields section here with the same indent level as the `listed` section
        type: fields
        fields:
          linklist:
            label: Links
            type: structure
            fields:
              titel:
                label: Titel
                type: text
              beschreibung:
                label: Beschreibung
                type: text
              url:
                label: URL
                type: url

Ndugu · August 21, 2019, 10:47pm

Oh! Yes!

Ndugu · August 21, 2019, 10:59pm

“Fieldsection”. Yes, that makes sense!

I had seen that somewhere in the docs some time ago, but I didn’t remember. I went there and found this:

Bildschirmfoto%207

and went on with the structure field example “holiday” further down the page.

I saw that in my yml there was 2 “fields”-fields but it didn’t occur to me to be a hint.

Ndugu · August 21, 2019, 11:07pm

This is my template code now:

    <aside>
      <ul class="pbefg-link-list">
        <?php $items = $page->linklist()->toStructure();
        foreach ($items as $item): ?>
         <h5> <?= $item->titel()->html() ?> </h5>
         <li><a href="<?= $item->url() ?>"><p><?= $item->beschreibung()->html() ?></a></li>
      </ul>
       <?php endforeach ?>   
      </aside>

At first I also didn’t know if I was to make 1 loop for the whole ul element or if I was supposed to make a loop for every element. I did that first (of course, `cause people like me always try the wrong thing first) and that kinda worked. But then I did 1 loop to for all, like above, and that worked much better.

Anyway this thing works now and I thank you so much once again!!!

Ndugu · August 23, 2019, 2:34am

Sorry for replying late. That actually caught my eye the minute I went to wash the dishes and I realised that those key words are not given, but I have to make them up and fit. I didn’t know that… So I had an aha moment as I was scrubbing a pot.

texnixe · August 23, 2019, 7:26am

On the importance of having a break from code…