Best way to render dynamic checkbox content as a list?

[auwers]

Hello

For a website I am making I’m using pods (with custom post types) and in these post types I’ve got a group of checkboxes. I want to display these as clickable list items, at the moment the boxes render as a paragraph separated by comma’s.

[Patric]

Hi

I don’t know pods. I am using ACF and made checkbox lists out of the acf fields. But maybe you can use my info.

This is my list generated in Bricks from dynamic ACF content:

If you click on a checkbox, the text is striked through via the CSS code “text-decoration: line-through”.

How I did it:

I use the “Formatted Text” element and in the “TEXT” form of that element, I added this html code:

<div class="zutaten">

<input type="checkbox" value="1" /><span class="zutaten_text">{acf_zutatenliste_zutat}</span> 

</div>

My text element is inside a loop where I get the ACF dynamic repeater field “zutatenliste_zutat”. You can of course also just enter the item text manually in the text field, just copy & paste the <input…> line.

In the Style / CSS options of that text element, I added the following CSS code to style the content:

.zutaten{
    list-style:none ;  
}

.zutaten input:checked ~ .zutaten_text {
  text-decoration: line-through;
}

.zutaten input {
  display: inline-block;
  margin-right: 10px;
   margin-left: -20px;
 }
.zutaten ul {  
    margin-left: 2em;
      text-indent: -2em;
	list-style-type: none;
 }
.zutaten_text {
    color: #4054b2;
    font-size: 1.3em;
    font-family: "Itim";
    line-height: 1.1em;
}

I hope it helps.

Cheers

Patric

[auwers]

Thank you for the suggestion, I got inspired and may have come up with another solution. I will test this soon.

[Patric]

Ok. Let me know if it works. Always interested to learn new solutions.

[auwers]

Hey Patric

This is what I’ve done.

So my setup is like this:

I’ve created a linked checkbox system, each time a Treatment Post Type is added it gets automatically added to the list of checkboxes inside the Problems Post Type. (Pods plugin):

Then inside bricks I’ve added the following rendering condition in the template:

This checks for dynamic data → {pods_huidprobleem_behandelingen_keuzes}.length > 0
Basically if there are any checkboxes checked, render the component inside the template else don’t render an empty component.

I’ve used the code block from Bricks. Inside this block I preform a javascript fetch to the REST API endpoint + {post_id} (created by Pods plugin) to fetch the correct data. And I make new list items for each checked checkbox and append it to the unordered list:

<ul id="behandeling-container"></ul>


<script>

fetch('https://luxelle.online/wp-json/wp/v2/huidprobleem/{post_id}')
  .then((response) => response.json())
  .then((data) => {
	data.behandelingen_keuzes.forEach((choice) => {
    let newListItem = document.createElement('li');
		newListItem.innerHTML = '<a href="/behandeling/'+ choice.post_name + '">' + choice.post_title + '</a>';
		document.querySelector('#behandeling-container').appendChild(newListItem)
  });
});
  
</script>

This solution provides me with the following output in the template:

These are all dynamically generated clickable link items. This is highly reusable for each Problem Post Type with 1 Bricks template.

I hope that this solution can help others create their custom components inside Bricks with the Pods REST API (or any other plugin with the same functionality).

[Patric]

Congratulations! Very nicely done! Cheers Patric