Including blocks inside a block

batulkr
Excursionist
43 1 2

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 %}
Replies 9 (9)
Mircea_Piturca
Shopify Partner
1540 43 333

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
batulkr
Excursionist
43 1 2

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? 

Mircea_Piturca
Shopify Partner
1540 43 333

No, block nesting is not possible.

Finally—Add variant descriptions to your products
unofficial2321
Shopify Partner
17 0 3

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

Mircea_Piturca
Shopify Partner
1540 43 333

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
unofficial2321
Shopify Partner
17 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>
prettypetty
Shopify Partner
4 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
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.

prettypetty
Shopify Partner
4 0 0

You can't currently drag inside of a block but you could add a dropdown where there are different layout styles for the contents in the block that change the css, snippet, etc based on selection.

Shopify partner since 2017
Liquid lover