Can loading a block into another block cause errors in section layout?

J-SMI
Shopify Partner
11 1 4

I understand nesting blocks in another block isn't possible. However, I was able to load a block into another block within the section layout. I know this is unconventional, but I wanted to know if this would cause errors? It seems to load fine and haven't run into any issues when rendering it with the Shopify Theme Inspector. It still loads on the front-end fine.

 

The reason I want to do this is because it gives flexibility in creating various page layouts while using the same section liquid file. I tried looking for a solution but after searching on Google and forums, I kept seeing that nesting wasn't possible. I wanted to have flexible layouts where I could organize content for each page. This will allow us to add different types of content blocks and I can drag and reorder them as needed.

 

Each block I want as a parent would be a flexbox item, so this gives me the ability to add as many blocks I want in the customizer. However, within each block, I can now add different types of content. I wanted to add different types of content blocks (list, accordion, product, etc.) because adding all these fields in the customizer would start to look cluttered.

 

I got this to work when setting an input statement as true. Ex. if a "select" or "checkbox" input type is true, then we would run the block loop. I just need to pay attention to which parent block I want to turn this on for in the customizer, otherwise, it will duplicate it on the parent blocks.

 

If someone could provide some feedback, I would appreciate it. Thanks!

 

{%- for block in section.blocks -%}
{%- case block.type -%}
{% when 'block' %}

<div class="flex-item">

 

{%- if block.settings.block_type == "block_type_list" -%}         

{%- for block in section.blocks -%}

{%- if block.type == "list_item" -%}

{%- if forloop.first == true -%}<ul>{%- endif -%}

<li>{{ list_item }}</li>

{%- if forloop.last == true %}</ul>{% endif -%}

{%- endif -%}

{%- endfor -%}

{%- endif -%}

 

</div>

{%- endcase -%}

{%- endfor -%}

Replies 2 (2)

Jamflynt
Shopify Partner
35 0 18

Did you ever figure out a solution to this? 

I am currently looking at doing the same type of thing. I have two apps and need to nest one a button that is one app block extension into a container that is another app block extension.

JohnHoltRipley
Shopify Partner
4 1 3