Wordpress - custom fields and conditions on templates

[borissegal]

Hi there is it possible to do conditions in blocksapp? For example, if I’m assigning a button on a page template to a custom field. If the field is empty then the button not to be displayed.

Cheers

[Flashman]

I am not a great expert when it comes to matters with WordPress. I wonder if somebody else could help? Perhaps @Norm @brechtryckaert or @smileBeda

[smileBeda]

Afaik not possible in blocs app directly
There are however wp plugins which offer such conditional short codes, or you could craft one yourself.

Another idea is a tiny js script that checks for text or innerhtml length and adds hidden class or hide css rule depending on what’s found.

[borissegal]

its fairly easy to do with oxygenbuilder where im coming from, but I can’t figure out how to do it with blocs app. The scrip idea sounds like something that would be the best if it worked. Any idea how a script would look like and how i would insert it into the blocs possibly using a custom code block? Any light would be appreciated thanks so much!

[smileBeda]

You’d be adding your own script to the Blocs resources.

The script needs to check for something like an ID, or element with class, or else, and hide/show depending on wether innerHTML length is > 0 or not.

Stackoverflow should help with the scripting part.
If you’re using WP you can use jQuery, see as example this jquery - How can I hide divs if they are empty? - Stack Overflow, or this php - Javascript function to hide button if textarea is empty does not work - Stack Overflow, or many other similar threads.

The base logic is to check “is element empty” and then “hide:show” depending on the result.

[Pealco]

Hello @borissegal check if is this what you need:

1st - Add a button where you want,

• Add a class to the button, in my case I give it “hidingbutton”

• Disable his visibility (click the eye in Visibility options under classes)

2nd - On the input field you want the script check the typing, take note of his ID (in my example is “email_5105”):

3rd - Open “Page Settings”, then go to “Code” tab, select “Footer” and add this code:

<script>
    $("#email_5105").keyup(function () {
       if ($(this).val()) {
          $(".hidingbutton").show();
       }
       else {
          $(".hidingbutton").hide();
       }
    });
    $(".hidingbutton").click(function () {
       $("#email_5105").val('');
       $(this).hide();
    });
</script>

NOTE: You need to change the #email_5105 for your corresponding ID

And there you go:
No INPUT:

With Any INPUT:

@Norm @PeteSharp can you please check why the visibility now in buttons always do like this, don’t respect the styling that we gave to the buttons? If you check from the pictures, the button is full width and when you preview it shows trimmed by the text and no full width.

@borissegal hope it helps you this…

[Pealco]

@Norm @PeteSharp can you please check what is happening? In all code buttons created it won’t respect the styling.

[borissegal]

Hi team, thanks for all of the replies, I know there is a way to do this with the script but are there any plans for adding “conditional display logic” to brickapp functionality?

CHeers!