Publisher is EE6 compatible, but it does not support the Fluid field. 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: Outputting children with component bloqs

Status Resolved
Add-on / Version Bloqs 4.10.2
Severity
EE Version 6.1.6

Kyle

Dec 03, 2021

This is the first time using express engine but the docs don’t really explain the children bloq very well.

I don’t actually know how i can output this nested content and cant seem to find any information of any examples.

 

#1

Kyle

Dec 03, 2021

If I was to put

{list} 
 Test
{/list}

This outputs after the block rather than within the block.

#2

Kyle

Dec 03, 2021

I have changed the code to

<ul class="m-0 p-0">
            {bloqs:children}
            {list}
             <li>
             <i class="{icon} mr-3"></i> {title}
            </li>
            {/list}
           </ul>

But if you look at the block:

https://express-engine.fifteen.dev/about

This is spitting out undeeded code:

{list}
About
{/list}

#3

BoldMinded (Brian)

Dec 03, 2021

Hi, Kyle. If list is a child of an event, the following template code should work. All blocks in a field, even if its a component, need to be in the template at the same level, then if one happens to be assigned as a child of another, Bloqs will take the tag pair and render it in place of the {bloqs:children} tag, even if there are multiple occurrences of it. You just need to create the tag pair for each block inside of the field at the same nesting level, Bloqs will then do what it needs to do to render the final output even if the block is 10 levels deep in a nested structure. In this example if some_other_block happens to be a child of list, It’ll render as a child. Does this help?

{bloqs}
    {event_block}
        {bloqs:children}
    {/event_block}

    {list}
        {bloqs:children}
    {/list}

    {some_other_block}
        {bloqs:children}
    {/some_other_block}
{/bloqs}
#4

Kyle

Dec 03, 2021

Comment has been marked private.

#5

BoldMinded (Brian)

Dec 03, 2021

Kyle, I don’t login to sites unless I absolutely have to, but I did in this case, and once I saw a 300 line template file I closed the window. I don’t have time to decipher what’s going on. I’ll need you to simplify the template…. tear out everything that is not 100% critical to replicating the issue. Remove every tag that is not relevant to rendering the blocks in question, and remove all the cruft inside the tags, divs, everything. Break it down to the bare bones, then I’ll take a look at it.

As long as your template code is following the example above, and if you edit the bloqs field it should be giving you example template code to render the field right in the control panel. That would be a good place to start for the bare bones template. Also double check to make sure the bloqs field is set to “Nestable”.

#6

BoldMinded (Brian)

Dec 03, 2021

I scanned your template and its still not setup how I mentioned in the example above, you have this:

{bloqs}
    {event_block}
        {bloqs:children}

        {list}
            {bloqs:children}
        {/list}
    {/event_block}
{/bloqs}

you need this:

{bloqs}
    {event_block}
        {bloqs:children}
    {/event_block}

    {list}
        {bloqs:children}
    {/list}
{/bloqs}

 

#7

Kyle

Dec 06, 2021

Yes, i have even altered the code and i still cant target that nested area. My code below: i am struggling to use bloqs as this was bought just for nested contents.

{event_block}
      <div data-block-name="event_block">
       <section class="swan_bg cnt_spilt">
       <div class="container">
        <div class="row">
         <div class="col-lg-6 col-md-12 col-sm-12 col-12 order-2 p-0 my-auto aos-init aos-animate" data-aos="fade-right" data-aos-delay="400">
          {if event_background}
          <div class="content-box h-100 w-100 postion-relative text-center">
           {event_background}
          </div>
          {/if}
         </div>
         
         <div class="col-lg-6 col-md-12 col-sm-12 col-12 order-1 padding">
           {if event_title}
           <h4>{event_title}</h4>
           {/if}
           <div class="ml-5">
            {if event_title}
            {event_subtitle}
            {/if}

            {if event_content}
            {event_content}
            {/if}

            {if event_list_title}
            
             {event_list_title}
            
            {/if}
            
            
            
            <ul class="m-0 p-0">
           LIST HERE
           </ul>   
           </div>
          </div>
        </div>
       </div>
      </section>
      </div>  
      {/event_block}
#8

BoldMinded (Brian)

Dec 06, 2021

Kyle I’m not sure how else to help. The last code example I provided is working valid code. You need to create the simple test template as I described before I’ll provide more assistance. Create a new “test” template group and put ONLY the EE code in the index file necessary to render the content (no HTML, no EE preload_replace variables, no layout tags, just the channel:entries tag and the bloqs field), then I’ll take a look at it.

#9

Kyle

Dec 06, 2021

I need to be able to wrap the event block around the nested content:

{event_block}
   <div data-block-name="event_block">
       <section class="swan_bg cnt_spilt">
       <div class="container">
        <div class="row">
         <div class="col-lg-6 col-md-12 col-sm-12 col-12 order-2 p-0 my-auto aos-init aos-animate" data-aos="fade-right" data-aos-delay="400">
          {if event_background}
          <div class="content-box h-100 w-100 postion-relative text-center">
           {event_background}
          </div>
          {/if}
         </div>
         
         <div class="col-lg-6 col-md-12 col-sm-12 col-12 order-1 padding">
           {if event_title}
           <h4>{event_title}</h4>
           {/if}
           <div class="ml-5">
            {if event_title}
            {event_subtitle}
            {/if}

            {if event_content}
            {event_content}
            {/if}

            {if event_list_title}
            
             {event_list_title}
            
            {/if}     

           <ul class="m-0 p-0">
           {repeat_list}   
             {bloqs:children}
              <li> LIST</li>
             {/repeat_list}
          </ul>
          </div>
          </div>
        </div>
       </div>
      </section>
      </div>
      {/event_block}
#10

BoldMinded (Brian)

Dec 06, 2021

If repeat_list is the name of a block, then it’s in the wrong place. See my example above.

NOT this:

{bloqs}
    {event_block}
        {bloqs:children}

        {repeat_list}
            {bloqs:children}
        {/repeat_list}
    {/event_block}
{/bloqs}

This:

{bloqs}
    {event_block}
        {bloqs:children}
    {/event_block}

    {repeat_list}
        {bloqs:children}
    {/repeat_list}
{/bloqs}
#11

Kyle

Dec 14, 2021

How would i use two children in 2 areas:

{wild_block}
      <div data-block-name="wild_block">
      <section class="explore"  url({wild_background})">
        <div class="container">
         <div class="row">
          <div class="col-lg-9 col-md-12 col-12 text-left my-auto">
           <h3>{wild_subtitle}</h3>
           <h4 class="ml-5 m-0">
            {wild_title}
           </h4>
          </div>

          <div class="col-lg-3 col-md-12 col-12 my-auto text-right">           
            {bloqs:children}
          </div>

          <div class="col-12 row mt-5 mb-5 nth_op">
           {tiles:bloqs:children}           
          </div>
        </div>
         </div>
       </section>  
      </div>
      {/wild_block}

{tiles}
     {bloqs:children}
     <div class="col-lg-3 col-md-6 col-sm-12 col-12 p-0 nth">
      <a href="#">_       <div class="hrv"  url(BG);">_        <div class="center_me">_         <h6>TITLE</h6>_         <span class="link">_          Find out more <i class=" ml-3 fal fa-chevron-right"></i>_         </span>_        </div>_       </div>_      </a>
     </div>  
       {/tiles}

{multiple_links}
    {bloqs:children}
     <a href="http://{button_link}" class="btn btn_pink">_                        {button_title}_                    </a>
   {/multiple_links}
#12

BoldMinded (Brian)

Dec 14, 2021

The same way you use a single set of children. Each {my_block}{/my_block} tag pair should be a unique tag pair at the same level. _Always_ at the same level in the {bloqs}{/bloqs} tag pair as mentioned above. I think you’re over thinking this. You shouldn’t have to be thinking of how the nesting works inside of the template. Just build your blocks in the entry publish page and nest them any way you want and as deep as you want. The template should not reflect the same nesting structure as the entry . The {bloqs:children} tag will simply replace the tag pair accordingly. This is what your template should look like.

{bloqs}
    {event_block}
        {bloqs:children}
    {/event_block}

    {repeat_list}
        {bloqs:children}
    {/repeat_list}
{/bloqs}

When Bloqs actually parses the content and template, and sees that you assigned a repeat_list field as a child of an event inside of the entry, Bloqs will parse the template and do the replacement for you, thus it’ll effectively create this output for you on the fly:

{bloqs}
    {event_block}
        {repeat_list}
            {bloqs:children}
        {/repeat_list}
    {/event_block}
{/bloqs}

 

#13

Kyle

Dec 14, 2021

https://express-engine.fifteen.dev/about

This is showing both the childs in areas i only want to show one.

{wild_block}
      <div data-block-name="wild_block">
      <section class="explore"  url({wild_background})">
        <div class="container">
         <div class="row">
          <div class="col-lg-9 col-md-12 col-12 text-left my-auto">
           <h3>{wild_subtitle}</h3>
           <h4 class="ml-5 m-0">
            {wild_title}
           </h4>
          </div>

          <div class="col-lg-3 col-md-12 col-12 my-auto text-right">           
             {multiple_links}
           {bloqs:children}
          {/multiple_links}
          </div>

          <div class="col-12 row mt-5 mb-5 nth_op">
            {tiles}
            {bloqs:children}
           {/tiles}           
          </div>
        </div>
         </div>
       </section>  
      </div>
      {/wild_block}
#14

BoldMinded (Brian)

Dec 14, 2021

Because you have two instances of {bloqs:children} in there. You’re still not nesting your template correctly. It should be like this:

{your_bloqs_field}

{wild_block}
      <div data-block-name="wild_block">
      <section class="explore"  url({wild_background})">
        <div class="container">
         <div class="row">
          <div class="col-lg-9 col-md-12 col-12 text-left my-auto">
           <h3>{wild_subtitle}</h3>
           <h4 class="ml-5 m-0">
            {wild_title}
           </h4>
          </div>

           {bloqs:children}
        
        </div>
         </div>
       </section>  
      </div>
      {/wild_block}

     {multiple_links}
           <div class="col-lg-3 col-md-12 col-12 my-auto text-right">
                {bloqs:children}
          </div>
     {/multiple_links}

    {tiles} 
           <div class="col-12 row mt-5 mb-5 nth_op">
                {bloqs:children}
          </div>
    {/tiles}   

{/your_bloqs_field}
#15

Kyle

Dec 14, 2021

What am i doing wrong now (sorry once it see it working right once that’ll set me for the rest)

{!-- Wild Block --}
      {wild_block}
      <div data-block-name="wild_block">
      <section class="explore"  url({wild_background})">
        <div class="container">
         <div class="row">
          <div class="col-lg-9 col-md-12 col-12 text-left my-auto">
           <h3>{wild_subtitle}</h3>
           <h4 class="ml-5 m-0">
            {wild_title}
           </h4>
          </div>
          
          {bloqs:children}
        </div>
         </div>
       </section>  
      </div>
      {/wild_block}
      
      {multiple_links}
       <div class="col-lg-3 col-md-12 col-12 my-auto text-right">
      {bloqs:children}
      </div>
      {/multiple_links}

      {tiles} 
       <div class="col-12 row mt-5 mb-5 nth_op">
         {bloqs:children}
         <div class="col-lg-3 col-md-6 col-sm-12 col-12 p-0 nth">
        <a href="#">_         <div class="hrv"  url({background});">_          <div class="center_me">_           <h6>{title}</h6>_           <span class="link">_            Find out more <i class=" ml-3 fal fa-chevron-right"></i>_           </span>_          </div>_         </div>_        </a>
       </div> 
      </div>
      {/tiles}       
      {!-- END Wild Block --}
#16

Kyle

Dec 14, 2021

If you check the front end it isn’t wrapping into the correct divs

#17

Kyle

Dec 14, 2021

<pre><code>
{tiles}
    <div class=“col-lg-3 col-md-6 col-sm-12 col-12 p-0 nth”>
    {bloqs:children}
      <div class=“col-lg-3 col-md-6 col-sm-12 col-12 p-0 nth”>
      _       <div class=“hrv”  url({background});”>_       <div class=“center_me”>_       <h6>{title}</h6>_       _         Find out more <i class=” ml-3 fal fa-chevron-right”></i>_       _       </div>_       </div>_    
    </div> 
    </div>
    {/tiles}
<pre><code>

COL-12 div repeats with the child.

#18

Kyle

Dec 14, 2021

<pre><code>
{tiles}
    <div class=“col-12 row mt-5 mb-5 nth_op”>
    {bloqs:children}
      <div class=“col-lg-3 col-md-6 col-sm-12 col-12 p-0 nth”>
      _       <div class=“hrv”  url({background});”>_       <div class=“center_me”>_       <h6>{title}</h6>_       _         Find out more <i class=” ml-3 fal fa-chevron-right”></i>_       _       </div>_       </div>_    
    </div> 
    </div>
    {/tiles} 
<pre><code>

“col-12 row mt-5 mb-5 nth_op” repeats rather than acting as a holder.

#19

BoldMinded (Brian)

Dec 14, 2021

You still have {multiple_links}{/multiple_links} tag pair inside of the wild_block. I’m assuming multiple_links is a block, just the same as wild_block is a block, and in that case they need to be at the same level in your template. DO NOT nest the multiple_links tag pair inside of another blocks tag pair.

#20

BoldMinded (Brian)

Dec 14, 2021

I looked at your template in EE, and at first glance it appears to be correct, but your template file is a little messy and the indentations are not matching up, so if you’re having trouble with div tags, I suggest you fix the indentation to see if there are any unclosed tags.

I’m going to be honest, there isn’t much else I can do here to support you. The template appears fine, and I’ve provided several working examples of how the template tags should be used. There does not appear to be a clear bug at play (if there was I’d probably have other similar reports), and you still haven’t provided the stripped down HTML version of the template like I asked to make debugging this easier.

#21

Kyle

Dec 15, 2021

{multiple_links}{/multiple_links} isnt inside the wild_block on my template. The issue is with this bloq i cant seem to use partails so it makes the template files messy. I have no idea how i can supply a HTML file version when i cant upload a file onto the forum

#22

Kyle

Dec 15, 2021

Also there is no unclosed tags as i stripped it all back to just show the wild block and i still get the same issue

#23

Kyle

Dec 15, 2021

To explain better i want a div around the children but i don’t want this div repeating for every child, just the holder for the children, this doesn’t seem possible

#24

BoldMinded (Brian)

Dec 15, 2021

Look at the instructions in the blue box right above the comment field for adding code.

Partials should parse just fine inside of Bloqs template code as long as it’s inside a bloq tag pair.

It is possible. Look at the documentation. You’ll need to use things like the :count and :total_rows/:total_bloqs variables in conditionals to show or hide any div tags.

#25

BoldMinded (Brian)

Dec 15, 2021

Maybe this example will help

{bloqs_field}
    {multiple_links}
        {if bloqs:is:first_child}
            <div>
        {/if}

            Do stuff here

        {if bloqs:is:last_child}
            </div>
        {/if}
    {/multiple_links}
{/bloqs_field}
#26

BoldMinded (Brian)

Jan 04, 2022

Closing this ticket because its been nearly 3 weeks, and I’ve provided as much direction as I can.

Login to reply