Including blocks inside a block

batulkr
Excursionist
35 1 1

Hey everyone!

I have been trying to include some blocks inside a block( I am not really sure if it is possible or not though) but could not manage to do that. If it is possible to do, what am I doing wrong here?

Here is my code:

{% schema %}
  
  {
  	"name": "FAQ Heading",
  	"settings": [{
  			"type": "header",
  			"content": "Heading and Description"
  		},
  		{
  			"type": "text",
  			"label": "Title",
  			"id": "heading"
  		}
  	],
  	"blocks": [{
  		"type": "block-1",
  		"name": "Block 1",
  		"settings": [{
  				"type": "text",
  				"label": "Your Text Here ",
  				"id": "text"
  			},
  			{
  				"type": "url",
  				"label": "Your Link Here",
  				"id": "call-to-action"

  			}
  		],
  		"blocks": [{
  			"type": "block - 1 - 1 ",
  			"name": "Block alt",
  			"settings": [{
  				"type": "text",
  				"label": "youretx here",
  				"id": "text-f"
  			}]
  		}]
  	}]
  }
{% endschema %}
0 Likes
Mircea_Piturca
Shopify Partner
1494 42 318

You can not nest blocks but you can have more block types:

"blocks": [
  {
    "type": "block-1",
     "name": "Block 1",
     "settings": [...]
  },
  {
    "type": "block-2",
     "name": "Block 2",
     "settings": [...]
  }
]
Finally—Add variant descriptions to your products
0 Likes
batulkr
Excursionist
35 1 1

Hello @Mircea_Piturca, thanks for the answer. But this is not what I am looking for. I already know this. What I mean is that, let's say, including blocks inside a nestetd block. For example, there is block-1, right? I would like to include some other blocks inside that nested block "block-1". Is that possible? 

0 Likes
Mircea_Piturca
Shopify Partner
1494 42 318

No, block nesting is not possible.

Finally—Add variant descriptions to your products
unofficial2321
Excursionist
16 0 3

@Mircea_Piturca  how can i call the type-2 block?

0 Likes
Mircea_Piturca
Shopify Partner
1494 42 318

You can do a loop with a conditional:

{% for block in section.blocks %}
  {% if block.type == 'type-1' %}
    ...
  {% elsif  block.type == 'type-2'  %}
    ...
  {% endif %}
{% endfor %}

 

You can also do some cool things with map. Depends what you are looking for.

Finally—Add variant descriptions to your products
0 Likes
unofficial2321
Excursionist
16 0 3

you have used condition but i want to access both somthing like this

<section>
  <div>
    {% for block in section.blocks.image-1 %}
    <div>{{ block.image-1.settings.text }}</div>
    {% for block in section.blocks.image-2 %}
    <div>{{ block.image-2.settings.text }}</div>
    {%endfor%}
    {%endfor%}
  </div>
</section>
0 Likes
prettypetty
Shopify Partner
2 0 0

You can do this by calling out a forloop inside the block: 

 {%- assign loop = "1,2,3,4" | split: ',' -%}
    {% if loop.size > 0 %}
    {% for item in loop %}
    
    {% capture index %}{{ forloop.index }}{% endcapture %}
    {% comment %} Add number to id for each loop {% endcomment %}
    {% capture block_index %}block{{ index }}{% endcapture %}
    {% capture title_index %}block-title{{ index }}{% endcapture %}
    {% capture image_index %}block-image{{ index }}{% endcapture %}
    {% capture style_index %}block-style{{ index }}{% endcapture %}
     {% comment %} Content settings {% endcomment %}
     {%- assign url = block.settings[block_index] -%}
     {%- assign title = block.settings[title_index] -%}
     {%- assign image = block.settings[image_index] -%}
     {%- assign style = block.settings[style_index] -%}
     {% comment %} End content settings {% endcomment %}
    {% if url != blank %}
    {% if style == true %}
    <a href="{{url}}">
        <div class="promo-block_header bottom-style-{{style}}" 
        {% if image != blank %} style="background-image:url({{ image | img_url: '420x' }})"{% endif %}>
        <div class="promo-block_top">
            <p class="promo-block_top-sub">Shop</p>
            <p class="promo-block_top-title">{{title}}</p></div>
        <p class="promo-block_title">See all {{title}}</p>
        </div>
</a>
    {% else %}
     <a href="{{url}}">
        <div class="promo-block_header" 
        {% if image != blank %} style="background-image:url({{ image | img_url: '420x' }})"{% endif %}>
        <p class="promo-block_title">{{title}}</p>
        </div>
</a>
{% endif %}
{% endif %}
    {% endfor %}
    {% endif %}
Shopify partner since 2017
Liquid lover
0 Likes
liquiduser14
New Member
1 0 0

Is it possible to create draggable items in a module within block. I know blocks within blocks is not possible. Is there any other solution to achieve the same effect. 

We can achieve this homepage easily by adding blocks in section file. How to achieve the same for inner pages.

0 Likes