Add Conditions for Listings in Bricks Query Loop with ACF

When we create an archive of things that we list and add ACF custom fields to it, not every post will hold all the data required, and may be null(blank), in those instances we need to hide those fields.

Some examples:

• Not every team member will include a mobile number, or social media links, we need to hide it.
• Not every property will have a price, we need to hide it.
• Possibly you have some icons with links like LinkedIn, and when there is no URL we need to hide it.

Let's dive in on how to make it work using conditions with Bricks Builder, you may skip to the end where I have the JavaScript snippet code and explanation on how to use it.

Create Custom Post Type

First, let's create a new custom post type, in this example, I will create "People" to display employees of x company.

You can use the Custom Post Type GUI plugin.

Ensure that you have the archive set to "True".

Add Custom Fields using ACF

Now I am going to include some custom fields for people, using ACF.

• Contact Number
• Email Address
• LinkedIn
• Short BIO
• Experience

Assign it to Custom Post Type "Person"

And finally, I'll add 3 random people to it with some information missing.

1. Person 1(John Doe) will have all details included
2. Person 2(Jane Doe) prefers not to have their phone number listed
3. Person 3(John Smith) has no LinkedIn account

For person 2 and person 3, there will be some data missing.

Create a new Archive

Let's create a new archive for people, below are the steps.

1. Bricks>Templates
2. The title "People Archive"
3. Template Type>Archieve
4. Publish
5. Edit with Bricks

Add Query Loop

Let's add a new query loop from Bricks Builder.

1. Add new section
2. Inside container
   1. Add column and row gap to 20px
   2. Set flex-wrap to wrap
   3. Set Direction as horizontal
   4. Added Align the main axis to "Space Between", missing in the screenshot below

1. Add a div inside the container (or block to your preference)
2. Select "use Query Loop"
3. Choose post type "people"
4. Add width 32% to div.

1. Add a featured image using dynamic data

Add the following using dynamic data inside the div:

1. Phone Number as the basic text block
2. Email as the basic text block
3. LinkedIn Icon

Now we hit a slight issue with the data showing where we have empty values, the icon shown and also the <p> rendering which leaves not a nice gap.

Hide Data Conditionally

Because there are at present no conditions available built into Bricks that I am aware of, we are going to do some manipulation with JavaScript, and add .acf-class to items we will need to show or hide.

Add a new code block inside the section, as the last child item, and add the following code:

<style>
.hidden {
  display: none;
}
</style>

<script>
const acfHideFields = document.querySelectorAll(".acf-field");

function isValidHttpUrl(string) {
  try {
    const url = new URL(string);
    return url.protocol === "http" || url.protocol === "https:";
  } catch (err) {
    return false;
  }
}

acfHideFields.forEach((e) => {
  if (e.innerHTML == "") {
    e.classList.add("hidden");
  }

  if (e.tagName === "A") {
    if (!isValidHttpUrl(e.href)) {
      e.classList.add("hidden");
    }
  }
});
  
</script>

Ensure to click Execute code, and that you have code execution enabled in Bricks settings for Administrators.

Now we need to add the .acf-field class to elements where we think data might be missing, in this case, I will add it to number, email and icon fields.

The Result

Head back to the front page, and you should see hidden fields that have no data in them.

It's always better to control the conditions with PHP, as nothing gets rendered on the front end.

Alternatively, you can use a code block, and write some PHP with conditions for ACF.

References:

• https://stackoverflow.com/questions/68728623/how-can-i-check-whether-innerhtml-is-empty
• https://bobbyhadz.com/blog/javascript-check-if-element-is-div