get checked titles of multiple checkbox option field

[jploch]

Hi! 
this should be easy, but I can't get it to work.

I have a repeater with events.
Every event has an option-field with multiple checkboxes.
To filter the events on the frontend I have a script, that uses the class names to filter the results (an event can have multiple categories).

Now I just want to add every checked option (title) to use as my class name.
This is what I have so far, wich only gets the first title.

foreach($page->events as $event) {

$tags = $event->options->title;
  echo "<div class='size1of2 {$tags}'>";
  echo "<img src='{$event->image->url}'>";
  echo "{$event->text_editor}";
  echo "</div>";
}

I know there is an example with a foreach, but how would I use it in this context?

foreach($page->countries as $country) {
  echo "<li>$country->title</li>";
}

 

[abdus]

As an alternative to using classes to filter, you can convert categories into JSON and inject into HTML as data attributes. I haven't tried this, but it should work.

$tags = $event->options->extract('title');
$json = htmlspecialchars(json_encode($tags));
echo "<div data-category='$json'> ... </div>";

https://stackoverflow.com/a/9430472

[jploch]

Thx for the quick reply!
But this doesn't seems give me the correct array, it just returns nothing:

$tags = $event->options->extract('title');

 

[abdus]

I assumed options field to return a type of WireArray, I've checked, it returns a SelectableOptionArray which extends WireArray, but I guess some methods are modified

I tested this one and it works

$tags = $page->options->getValues();
$tags = array_column($tags, 'title');
$json = htmlspecialchars(json_encode($tags));

echo "<div data-category='$json'> ... </div>";

In your JS, you can retrieve the array back like this

let items = document.querySelectorAll('.item');
// filter items by category
let xItems = items.filter(it => {
	let tags = JSON.parse(item.dataset.category); // tags is an array  
  	return tags.indexOf('category-x') > -1;
})

 

[kongondo]

2 hours ago, jploch said:

Now I just want to add every checked option (title) to use as my class name.
This is what I have so far, wich only gets the first title.

foreach($page->events as $event) {
	// empty tags in each iteration
	$tags = '';
	// $event->options has multiple items (multi checkboxes)...
	// ...so, we loop through it
	foreach ($event->options as $o) {
		$tags .= $o->title . ' ';// join 'em up
	}
	// remove empty spaces
	$tags = trim($tags);
	echo "<div class='size1of2 {$tags}'>";  
	echo "<img src='{$event->image->url}'>";
  	echo "{$event->text_editor}";
	echo "</div>";
}

Could be made cleaner, shorter, etc...

 

1 hour ago, abdus said:

$tags = $event->options->extract('title');

Is this a new WireArray method? I can't seem to find it

[abdus]

2 minutes ago, kongondo said:

Is this a new WireArray method? I can't seem to find it

I meant explode() method, but wrote extract() instead
https://processwire.com/api/ref/wire-array/explode/

And thankfully, that works @jploch.

$tags = $page->options->explode('title');
$json = htmlspecialchars(json_encode($tags));

echo "<div data-category='$json'> ... </div>";

Thank you for the heads up @kongondo

[jploch]

Nice!
thanks abdus and kongondo!
its all working now!