Render section with blocks use Section Rendering API.

[notrealdev]

Hi I use the Section Rendering API to render the content of a section but the problem is that it cannot render the blocks that the section owns.

Example:

<div class="section-blocks">
	{%- for block in section.blocks -%}
		{%- case block.type -%}
			{%- when 'title' -%}
				<span>This is title</span>
			{%- when 'text' -%}
				<span>This is text</span>
		{%- endcase -%}
	{%- endfor -%}
</div>

{% schema %}
{
	"name": "Demo section",
	"tag": "section",
	"class": "demo-section",
	"settings": [],
	"blocks": [
		{
			"type": "title",
			"name": "the_title",
			"settings": []
		},
		{
			"type": "text",
			"name": "the_text",
			"settings": []
		}
	]
}
{% endschema %}

Normally, it will display the following content.

<div class="section-blocks">
	<span>This is title</span>
	<span>This is text</span>
</div>

But when using Section Rendering API, the content is only:

<div class="section-blocks"></div>

Section Rendering API does not support rendering blocks? Or did I miss a document or tutorial?

Can someone explain it to me, thanks!

[bakura10]

Hi,

when using the section rendering API are you sure that you are using the section ID (retrieved using section.id) and NOT a fixed name? We are using section rendering with blocks and it definitely works as long as you make sure to use the id :)

[alvinkonda]

@bakura10 Can you please show an example of how are you calling the main product info from the product page?

The code i'm using

const res = await fetch('/products/test-product?sections=main-product')

but as @notrealdev pointed out above, it is not loading the blocks as we are statically calling the section. So the issue is how can we get the section ID dynamically?

[bakura10]

This won't work. You can retrieve the section ID in Liquid: {{ section.id }}. This is what you need to pass as the section name instead of the static name.

[alvinkonda]

Thank you, @bakura10, but the issue is that I need to get the main-product which is in the PDP, from other pages. E.g. to build the "Quick View" functionality. But anyway, we are just going to fetch the whole PDP and grab that section

[bakura10]

This won't be possible in Shopify @alvinkonda . The only solution to goes around that is to render the full product page (so without any section) and extract from the page the party ou are interested it. There is no other way ;)