BoldMinded

Publisher does not support the Fluid field type. Please do not contact asking when support will be available.

If you purchased an add-on from expressionengine.com, be sure to visit boldminded.com/claim to add the license to your account here on boldminded.com.

Ticket: Cannot get component to render out bloqs

Status Resolved
Add-on / Version Bloqs 5.0.12
Severity
EE Version 7.3.15

bluetorch

Jan 29, 2024

The templating to render a component makes no sense to me.
Here’s the example template code as seen in my bloq field for my component:

{exp:channel:entries channel="your_channel_here"}
    {swag_bloq}
        {swag_component}
        <div data-block-name="swag_component">
                {heading}
                {description}
                {/description}
                {bloqs:children}
        </div>
        {/swag_component}
    {/swag_bloq}
{/exp:channel:entries}

This renders out the heading and description but i have no idea how to use bloqs:children? I have other bloqs as part of my component, i cannot understand how to render that content out to the template?
For instance i have a bloq called “swag_image” and inside it the atomic elements are “image” which is a filed field and “bullets” which is a text area.
I tried adding to my template

{swag_image}{image}{/swag_image}
and it renders out 
{swag_image}{image}{/swag_image} then the full url to the image

see screenshot. Any help appreciated.

#1

BoldMinded (Brian)

You’ll need something like this where you need to define the tags and html for each bloq you make. The bloqs:children tag just knows how to puck the other tag pairs from the template and insert them as children.

{swag_bloq}
        {swag_component}
        <div data-block-name="swag_component">
                {heading}
                {description}
                {/description}
                {bloqs:children}
        </div>
        {/swag_component}
        {swag_image}
            ... whatever atoms are included in this bloq ...
        {/swag_image}
        {accordion}
            ... whatever atoms are included in this bloq ...
        {/accordion}
        {some_other_bloq}
             ... whatever atoms are included in this bloq ...
        {/some_other_bloq}
    {/swag_bloq}
#2

BoldMinded (Brian)

Basically you’ll need to look at the examples provided for the other bloqs, and include them in the overall bloqs field tag pair. When viewing a component, the preview isn’t apparently including the possible child options.

#3

bluetorch

It still doesn’t seem to work, or i’ve just been at it for too many hours and it’s just not clicking.

{swag_bloq}
    
        {swag_component}
        <div data-block-name="swag_component">
                {heading}
                {description}
                {/description}
                {bloqs:children}
        </div>      
        {/swag_component}

        {swag_image}
            {image}
            {image_bullets}
        {/swag_image}

        {accordion}
            {accordion_header}
            {accordion_content}
        {/accordion}

        {drawer_content}
            {header}
            {content}
        {/drawer_content}

    {/swag_bloq}

If i remove the accordion block it seems to be somewhat working, is that because i have my drawer content blocks nested within my accordion blocks? I attached a few more screenshots. First time using blocks and I feel i’m trying to do something way too complex.

#4

BoldMinded (Brian)

Is “Swag Bloq” the name of the whole field?

I’m not sure why {description} is rendering as a pair in the example code. If it’s just a text area field you can probably remove {/description}

Everything else looks correct, template code wise. So it’s likely a configuration or naming error. What do the settings for the Bloqs field look like? Did you enable the nesting option?

#5

bluetorch

Yes, swag_bloq is the name of the field. I changed the accordion bloq name to accordion_content and that seemed to clean up the bug. Maybe because i had a native EE field named “accordion” already?

Anyhow, i made some changes and it seems this is working:

{swag_bloq}
    
        {swag_component}
        <div data-block-name="swag_component">
            {image}
            <ul><li>{bullets}</li></ul>
            <h2>{heading}</h2>
            <strong>{description}</strong>
            {bloqs:children}
        </div>      
        {/swag_component}
        {accordion_content}
        {header}
        {content}
        {bloqs:children}
        {/accordion_content}

        {drawer_content}
            {header}
            {content}
        {/drawer_content}

    {/swag_bloq}

The only thing i foresee being confused on is how i’m going to get my drawer content working inside my accordions. drawer_content bloqs are sometimes nested within my accordion_content, which is why i assume i needed {bloqs:children} in the accordions_content? Ultimately here’s what i want to work, but there’s some issue with the drawer_content that’s nested within accordion_content:

{swag_bloq}
        {swag_component}
        <div class="swag-wrapper swag-section">
            <div class="swag-sidebar">
                {image}
                {bullets}
            </div>
            <div class="swag-main">
                <h2>{heading}</h2>
                {description}
                {bloqs:children}
        {/swag_component}
                <div class="accordion-container">
                    <div class="accordion">
                        {accordion_content}
                        <div class="item">
                            <div class="title">{header}</div>
                            <div class="box">
                                {content}
                                {bloqs:children}
                                {drawer_content}
                                <div class="drawer">
                                    <a href="#" class="btn-ghost toggleDrawer">
                                        <div class="drawer-title">{header}</div>
                                        <i class="carrot"></i>
                                    </a>
                                    <div class="drawer-content" id="drawerContent"  0px;">
                                        {content}
                                    </div>
                                </div>
                                {/drawer_content}
                            </div>
                        </div>
                        {/accordion_content}
                    </div>
                </div>

            </div>
        </div>
    {/swag_bloq}
#6

BoldMinded (Brian)

So, the actual bloq tags are never nested in your markup, that’s what the {bloqs:children} tag is for. Only atom/field tags belong inside of a bloq pair tag. All bloq pair tags, regardless where they might appear in the markup nesting, should be at the root level of the bloq field tag pair. You just put the bloq tag pairs at the root, and the {bloqs:children} tag is a placeholder that is used when it needs to recursively pluck a tag pair from the root, and nest it 2, 3 or 10 levels deep.

#7

BoldMinded (Brian)

After re-reading my docs and seeing your ticket, I think there are some updates I need to do in the docs to make things a little more clear when it comes to how the nesting works.

#8

bluetorch

And just like that, it clicked! Thank you for the help! And if other can benefit from it, here’s my working code:

{swag_bloq}
        {swag_component}
        <div class="swag-wrapper swag-section">
            <div class="swag-sidebar">
                {image}
                {bullets}
            </div>
            <div class="swag-main">
                <h2>{heading}</h2>
                {description}
                {bloqs:children}
            </div>
        </div>
        {/swag_component}
        
                {accordion_content}
                {if bloqs:is:first_child}
                <div class="accordion-container">
                    <div class="accordion">
                {/if}
                <div class="item">
                    <div class="title">{header}</div>
                    <div class="box">
                        <div class="accordion-copy">
                            {content}
                        </div>
                        {bloqs:children}
                    </div>
                </div>
                {if bloqs:is:last_child}
            </div>
        </div>
        {/if}
                {/accordion_content}
            
        {drawer_content}
        <div class="drawer">
            <a href="#" class="btn-ghost toggleDrawer">
                <div class="drawer-title">{header}</div>
                <i class="carrot"></i>
            </a>
            <div class="drawer-content" id="drawerContent"  0px;">
                {content}
            </div>
        </div>
        {/drawer_content}
    {/swag_bloq}
#9

BoldMinded (Brian)

Sweet, glad it clicked 😊

Let me know if you have any other questions. I’ll close this ticket out.

Login to reply