[Resolved] Dynamic Options: Can we hide parent element only if dynamic child is empty?

Home Forums Support [Resolved] Dynamic Options: Can we hide parent element only if dynamic child is empty?

Home Forums Support Dynamic Options: Can we hide parent element only if dynamic child is empty?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2148869
    Beaniie

    Hey guys,

    I have two block elements, both hooked to ‘after-right-sidebar-content’. These blocks currently display the posts categories, and tags via the dynamic options tool. This all works fine, which is awesome. (Super easy to configure btw, well done.)

    I have a slight issue though. If the dynamic option is empty, for example let’s say a single-post doesn’t have any tags assigned to it. It will simply display an empty block.



    Which brings me to my question, Can we hide parent element only if dynamic child is empty?

    Thanks again for all your support.

    Crafting connections through innovative design. #StayCreative
    https://www.aphinity.co.uk/

    #2148962
    Fernando
    Customer Support

    Hi Beaniie,

    One approach I can think of to achieve this is through Javascript.

    For instance, I have a setup like this where the parent container has a custom class remove-if-empty, and the tag dynamic Headline Block has a custom class check-empty.

    See: https://share.getcloudapp.com/geumJy7v

    Also see: https://share.getcloudapp.com/DOu4wrEj

    Then, I added this Javascript through a Hook Element with Hook wp_footer:

    <script>
    var parentContainer = document.querySelector(".remove-if-empty");
    var checkempty = document.querySelector(".remove-if-empty .check-empty");
    
    if (checkempty == null){
    	parentContainer.remove();
    }
    
    </script>

    Donโ€™t forget to set the Display Rules as well. Tested this on my end and itโ€™s working.

    Hope this helps! ๐Ÿ™‚

    #2157367
    Beaniie

    Hi Fernando,

    Thanks for your prompt reply, sorry I haven’t come back to you sooner. Fighting a few fires at the moment. ๐Ÿ˜…

    I’ve taken a closer look at your solution, seems simple enough, though I can’t seem to get it to work. The console in chrome’s dev tools is clear. Maybe I’m missing something? See the attached.


    Crafting connections through innovative design. #StayCreative
    https://www.aphinity.co.uk/

    #2157394
    Fernando
    Customer Support

    I see. No worries! What youโ€™re doing is admirable.

    With regards to the issue, may you kindly provide a link to a post I may view to investigate?

    You may use the private information field if your prefer: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

    Hope to hear from you soon. ๐Ÿ™‚

    #2157800
    Beaniie

    Hi Fernando,

    Thanks once more for your prompt reply, I can’t provide a link directly as the site is hidden from public view, but I can provide you with temporary admin access for you to do a little digging around.

    I’ve also highlighted the elements in question for you as I have a few. (Hopefully should save you some time.)

    You can find the blog section on the front end, under the primary navigation About Us > 360 News, The sidebars will only display on single post pages.

    Hopefully this helps, please let me know if you have any further questions and thanks for all your help thus far.

    Crafting connections through innovative design. #StayCreative
    https://www.aphinity.co.uk/

    #2158146
    David
    Staff
    Customer Support

    Hi there,

    you can use the generate_element_display filter:

    https://docs.generatepress.com/article/generate_element_display/

    For example:

    add_filter( 'generate_element_display', function( $display, $element_id ) {
        $categories = get_the_category();
        if ( empty( $categories ) && 100 === $element_id  ) {
            $display = false;
        }
    
        return $display;
    }, 10, 2 );

    If the categories are empty then set the display for Element ID 100 to false.
    You just need to change the 100 to the ID of your element.

    For the tag terms you can use get_the_tags instead:

    https://developer.wordpress.org/reference/functions/get_the_tags/

    add_filter( 'generate_element_display', function( $display, $element_id ) {
        $tags = get_the_tags();
        if ( empty( $tags ) && 100 === $element_id  ) {
            $display = false;
        }
    
        return $display;
    }, 10, 2 );
    #2159080
    Beaniie

    Hi David,

    Spot on as per usual! ๐Ÿ‘Œ๐Ÿ‘

    Thanks for the assist on this.

    Crafting connections through innovative design. #StayCreative
    https://www.aphinity.co.uk/

    #2159085
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.