After looping through a structure the final element is wrapped in <pre> tags

Kirby 3 Questions 🤔
1

Hello,

I am trying to create a js based filter that fills in the data-filter with the content of a Kirby structure.
But the javascript doesn’t recognize the values because they are wrapped in <pre> tags.

Example of code:

<li class="col-6 col-4@md bg-accent height-xxxxl flex flex-center padding-sm js-filter__item" 
data-filter="
<?php foreach($product->colors()->toStructure() as $productColor): ?>
  <?= $productColor ?>
<?php endforeach ?>"

When I <?php dump($productColor) ?> it appears as <pre>colorname</pre>

I tried to remove it with $strip_tags and regex. But to no avail…

Do you have any ideas what it could be?

Thank you!
Yulia

2

Your issue is that you are echoing a structure object. Instead, you would have to echo the fields inside your structure item. And what kind of output are you expecting in the data-filter attribute?

<?php foreach($product->colors()->toStructure() as $item): ?>
  <?= $item->whatEverYourFieldNameIs() ?>
<?php endforeach ?>

Also, I wouldn’t put the loop inside the attribute.

3

Thank you!

The fieldname() got lost when I wrote this thread, but placing the loop outside of the attribute resolved the issue.

But now I’ve got a new problem: In the backend you can add a color structure with a $colorname and a $hexvalue. At the moment instead of having two colors in one attribute. I have one additional product entry with the second color.

<ul class="grid gap-sm js-adv-filter__gallery" id="adv-filter-gallery">    
<?php foreach($page->children()->listed() as $product): ?>
<?php foreach($productColors = $product->colors()->toStructure() as $productColor) :?>

    <li class="col-4@lg col-6@sm js-filter__item" 
      data-filter="<?= $productColor->name()->lower() ?>" data-sort-index="<?= $product->num() ?>" data-price="60" data-search="Category 1, Category 2">          
      <?= $productColor->name() ?>

      <?php snippet('shop', ['product' => $product]) ?>
      
    </li>
  <?php endforeach ?>

  <?php endforeach ?>
</ul>

I guess I am looping wrong, but I feel a bit stuck…
Thank you in advance!

4

Again, what is the expected output?

5

I am expecting something like: data-filter"grün schwarz" or if only one color is added: data-filter=“grün”

6

I think it should work like this:

<ul class="grid gap-sm js-adv-filter__gallery" id="adv-filter-gallery">
  <?php foreach ($page->children()->listed() as $product) : ?>
    <?php $productColors = $product->colors()->toStructure()->pluck('name', ',');?>
    <li class="col-4@lg col-6@sm js-filter__item" data-filter="<?= implode(' ', $productColors) ?>" data-sort-index="<?= $product->num() ?>" data-price="60" data-search="Category 1, Category 2">
      <?php snippet('shop', ['product' => $product]) ?>
    </li>
  <?php endforeach ?>
</ul>
7

Thank you! That was it! I just had to move the foreach loop, because it gave me 7 products instead of 4 but now it works!

<ul class="grid gap-sm js-adv-filter__gallery" id="adv-filter-gallery">    
  <?php foreach($page->children()->listed() as $product): ?>
    <li class="col-4@lg col-6@sm js-filter__item" 
      <?php foreach($productColors = $product->colors()->toStructure()->pluck('name', ',') as $productColor): ?>
      data-filter="<?= Str::lower(implode(' ', $productColors))?>"
      <?php endforeach ?> data-sort-index="<?= $product->num() ?>" data-price="60" data-search="Category 1, Category 2">
          
        <?= implode(' ', $productColors)?>
        <?php snippet('shop', ['product' => $product]) ?>
    </li>
  
  <?php endforeach ?>
</ul>