Element Conditions Discussion

[alexander]

Hi everyone,

On every element you’ll find a new Conditions control under the Customize section which will let you determine if the element should be output.

• Elements always output if there are no conditions set
• Elements will not output if you have conditions and they fail
• Elements will always output in the preview (so you can find them) regardless of the condition being successful or not. This is something we’re aware could use some refinement. We will probably add a toggle somewhere that hides/shows elements like this based on their condition.

You can see some conditions in action by trying out the WooCommerce starter templates. There is plenty of room to add more conditions. Let us know any other condition types you that you think would be helpful in sites that you’re building!

---

@Misho, I’ve not fleshed it out yet but I’m thinking this is where we could do a condition like this:

If [membership level=1]YES[/membership] contains YES

Effectively you could hide elements based on shortcode content that way (like your shortcode wrapper idea) without introducing new levels into the rendering system.

[devinelston]

Awesome, very much looking forward to this.

@alexander

We will probably add a toggle somewhere that hides/shows elements like this based on their condition.

I’ve been going back and forth on the new preview switcher controls for layouts/headers/footers. It took me forever to find them initially, and I find the extra click required to get to the front end a bit cumbersome. Have you guys discussed gathering all the preview-related controls in one area? For example, a preview button that houses all of the page preview, responsive preview, and condition controls? (Quick and dirty mockup below)

[alexander]

Hey @devinelston, after updating to beta 4 try cmd/ctrl clicking the view site icon. It will take you straight to the front end instead of opening the dropdown. The toggle I’m mentioning will probably live inside the dropdown kinda like you’re depicting. We’ve talked about other preview related toggles like perhaps always keeping effects in their final active state for testing, so it would be a good place them since they’re all preview related.

A bit off-topic, but once we get to responsive styling, the device size icons will be revisited as well. We’re going to need to manage both the current size of the preview, and which breakpoint you’re editing in the inspector and we haven’t decided yet how to approach that.

[devinelston]

@alexander I’ve been trying that, but I’m still not totally sold on the site button being the best home for preview controls. I know they’re both ways of “previewing” the current page, but they strike me as having different use cases. I’m trying to keep an open mind though, and will keep trying the command-click option…

Back to conditions – here are a couple others that I’d like to be able to control in some way – either through a native control in the drop downs or by writing a custom recipe like your [membership] example.

• Post has a featured image – Y/N
  • So I only show the image element for posts that have one
• Cart has items in it – Y/N
  • So I only show the cart modal element when there’s something in the cart
• Similarly, I’d love to be able to conditionally show elements based on whether there’s anything within particular CPT fields or Dynamic Content.
  • For example on a portfolio site, some projects might have a website that I’d want to link to – but others wouldn’t have a value for that field. So, it would be helpful to be able to set a condition on the button so it would only display if there was a value in the corresponding CPT field. Make sense?

__

I think this might be similar to @Misho’s shortcode wrapper scenario, but I’ll give you a specific use case that I have. I use the Business Hours Indicator plugin for clients, and one of its features is a set of shortcodes that I can use to display content when the business is open or closed.

It basically works like [if_open]We're open![/if_open] or [if_closed]We're closed 😴[/if_closed]

I’ve used it in Pro by creating a Global Block for more complex layouts (buttons, accordions, etc.) and put the shortcode for that Global Block inside of this business hours shortcode inside of a raw content or text element on a page (BTW, this is why I had requested the option for GB shortcodes way back when those first launched).

Anyway, this gets clunky, and I’m limited in how far I can take it. So, if the condition system supported the use of a shortcode like this in some way, I’d be real happy.

[urchindesign]

@devinelston

• Post has a featured image – Y/N
• So I only show the image element for posts that have one
• Similarly, I’d love to be able to conditionally show elements based on whether there’s anything within particular CPT fields or Dynamic Content.
• For example on a portfolio site, some projects might have a website that I’d want to link to – but others wouldn’t have a value for that field. So, it would be helpful to be able to set a condition on the button so it would only display if there was a value in the corresponding CPT field. Make sense?

I don’t think the above points should require user interaction. In these scenarios it should just be a simple test. Does the field / image exist / have a value. If yes output it, if no don’t.

i.e. for a custom post type with ACF creating a custom layout one might have something like this. (I don’t believe these scenarios should require input from us.)

<?php
	$sv_project_logo = get_field( 'sv_project_logo' );
//if there is there a logo for the project
	if (!empty($sv_project_logo)) {
               //code rendered here
           }
?>

Anyway let me have a look at what is happening. Super excited to wake up to the new beta.

[alexander]

Post has a featured image – Y/N

Will do for sure! We have this for product images but overlooked it for the main pos.

Cart has items in it – Y/N

I’ve thought about this, but it gets complicated because of WC’s ajax cart. The condition system fully blocks the element’s markup from outputting. If a customer clicks “add to cart” it wouldn’t appear until the next page load. We’ll consider adding a new option on the cart elements that’s “hide when empty” and that taps into the WC javascript APIs.

Similarly, I’d love to be able to conditionally show elements based on whether there’s anything within particular CPT fields or Dynamic Content.

Makes sense! So let’s say we had a text input that supported dynamic content and shortcodes. Then we could have conditions like “contains, not contains, is empty, is not empty” That could provide all kinds of different variations.

---

@urchindesign By default, if Dynamic Content doesn’t yield anything, nothing is output. But the idea here is that you may want to use that information (presence of data or not) to determine if an entire element should output. Using your Project Logo as an example, you could hide/show an entire Section if you wanted to based on if a Project Logo is set. Then inside the section you could use multiple elements to construct a presentation of the logo.

[urchindesign]

@alexander

By default, if Dynamic Content doesn’t yield anything, nothing is output. But the idea here is that you may want to use that information (presence of data or not) to determine if an entire element should output. Using your Project Logo as an example, you could hide/show an entire Section if you wanted to based on if a Project Logo is set. Then inside the section you could use multiple elements to construct a presentation of the logo.

I think my issue here is the following.

By way of an example. I have created a CPT called Attorney. I have several custom fields one of which is a link to the attorneys LinkedIn profile. This is optional as the attorney may not have a LinkedIn Profile.

If I create a button with a dynamic link to the ACF field then should the attorney not add a LinkedIn link the entire button shouldn’t output. If the attorney adds the link the button should display. It shouldn’t be a matter of setting up conditionals etc. In this scenario and many others you wouldn’t want to be setting your button into its own section or row nor would you want to have to set up complex conditionals.

At the moment if the attorney doesn’t add a link when setting up their profile then the button is still displayed on the front-end but with no link. Essentially leaving a useless empty button on the page.

This is the same with an image. So if the dynamic content is an optional image, if the image isn’t loaded then it shouldn’t display. At the moment we end up with an empty image with a broken link.

Perhaps I’m missing something in the conditionals but I don’t see an option to say if the specific acf field is empty don’t display…

[alexander]

I see what you mean. In the many cases, I don’t think that is a safe assumption to make. For example, what if you want to put something before/after your dynamic content? Also, buttons have multiple entry points. You can use dynamic content for the URL, Primary Text, Secondary Text, etc. You might want to set a fallback URL, so if one isn’t set it goes somewhere else. Or maybe the dynamic content just appends to the URL. There isn’t enough structure enforced at that level for us to be 100% certain of the user’s intention.

It’s also a bit against the grain of how Dynamic Content works under the hood. It’s a simple string replacement system that happens after the element finishes outputting, so by the time it runs, the element already exists and we don’t have an opportunity to conditionally remove it.

It takes a little more to setup, but the conditionals are a safe way to let you determine if elements can be output with the right systems to guarantee the end result is exactly what you want.

[urchindesign]

Can you explain his to do a conditional if an acf field is empty,? For me that doesn’t seem to be an option. Without that I’m pretty much back 58 building my own custom templates.

[devinelston]

@urchindesign

a conditional if an acf field is empty,?

That’s basically what I was asking for in my third bullet. I don’t think it’s possible in Beta 5. I’m excited about the possibilities it would open up though, as it would let you turn off whole sections of a layout based on a single ACF or CPT field.

––

@alexander, I like where you’re going with the “contains, not contains, is empty, is not empty” stuff. In Oxygen, they have something similar – however, I prefer the clarity of your “is empty” wording over their == != syntax.

––

Here’s a related use case. On one client’s site, I want to have an element that shows the Post Author’s name and link to their bio. However, there’s an author whose posts I would not want to show that particular element. So, it would be useful to be able to target specific authors (either through a drop down, or an open text field paired with “equals, contains, does not contain, etc”)

[spedney]

Totally agree about conditional display based on content of a field/custom field - I have been doing this until now with custom templates and my own shortcodes, which works fine, but I was hoping to get away from that with this new approach.

[alexander]

@urchindesign

Can you explain his to do a conditional if an acf field is empty,? For me that doesn’t seem to be an option. Without that I’m pretty much back 58 building my own custom templates.

Sorry, it’s not an option yet. I was hoping to have some of this discussion first before adding any more functionality so we could talk through more real world use cases before building it out.

@devinelston I’m tracking with you! I think we can get something like that working.

@spedney thanks! Helps to know how you’re already solving it, and this this would be a good solution.

[devinelston]

I was just building a blog archive page, which I assigned to show for the main blog as well as any archive pages.

However, for the title element on the page, I want to have slightly different versions depending on whether you’re viewing the primary blog or an archive. However, when I go into the conditions for the elements, there are not options for Blog is being viewed or All Archives like the assignments for the layout itself.

I had been expecting to be able to tap into the same sort of conditions – is there a reason why they don’t include all the same options?

[Misho]

I am playing with WooCommerce element Conditions. These are fantastic!

There is one common scenario which is missing, but it is supposed to happen live and I’m not sure if conditions could cover it:

If the cart totals is <, >=, > than X, then show an element. This is important for example when free shipping is starting from, say $100. and the visitor has already added $80 value to the cart. A message appears that nudges him to add the remaining $20.

[alexander]

@devinelston

I had been expecting to be able to tap into the same sort of conditions – is there a reason why they don’t include all the same options?

We might be able to add some of those back. The problem is that if a condition is used inside a looper, the WordPress Query data changes and it isn’t 1:1 the same as the assignment rules.

@Misho, Adding number comparisons like that could be possible. I don’t think we can wrap that up in this release since, but I’m adding it to our list. One thing to keep in mind is that the WooCommerce cart total is not always accurate. It can only run the condition on full page loads so if a cart item is added with the AJAX cart, that message would not go away.

[Misho]

@alexander, it is great to hear that it would be possible. If I was using some scripts before, like this one: https://jeroensormani.com/showing-add-10-free-shipping-notice/.

The more Pro will be able to support Ecommerce Conversion Optimization, the greater option it will be.

[Misho]

Here’s another one:

Conditions based on URL parameters. Again, not sure how this fits into the entire current system.

This is huge though. It would allow things like showing messages for specific campaigns, and also showing discount code options only to those who actually qualify for them, leaving them hidden for everyone else. This is yet another effective Ecommerce CRO trick.

This is also relatively easy to do with some functions.php scripts, but it is cumbersome and not very scalable.

[alexander]

Great idea! That could be another one for the string includes/excludes. We could do the whole URL, or perhaps expose query params or something like that.

[alexander]

Quick update on this. The next beta will have a “Featured Image [is / is not] set” condition, but I’ve not created any other rules yet.

[alexander]

Good afternoon my friends, wanted to post a quick update here. We added a couple more conditions in beta8 related to Loopers. For example, you can output an element if it [is/is not] the first, last element or even/odd elements. This will help with adding things like separators in-between looper elements.

For the 4.0.0 update we’re not introducing any more conditions. I’ve got a list going for what could be a smaller “conditional logic” update with much of what we discussed above like string and URL based conditions.