Add-On Support | BoldMinded

#1

Kyle

If I was to put

{list} 
 Test
{/list}

This outputs after the block rather than within the block.

#2

Kyle

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)

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

Comment has been marked private.

#5

BoldMinded (Brian)

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)

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

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)

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

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)

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

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)

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

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)

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

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

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

#17

Kyle

<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

<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)

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)

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

{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

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

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)

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)

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)

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

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

BoldMinded

Ticket: Outputting children with component bloqs

Kyle

Kyle

Kyle

BoldMinded (Brian)

Kyle

BoldMinded (Brian)

BoldMinded (Brian)

Kyle

BoldMinded (Brian)

Kyle

BoldMinded (Brian)

Kyle

BoldMinded (Brian)

Kyle

BoldMinded (Brian)

Kyle

Kyle

Kyle

Kyle

BoldMinded (Brian)

BoldMinded (Brian)

Kyle

Kyle

Kyle

BoldMinded (Brian)

BoldMinded (Brian)

BoldMinded (Brian)