Section Rendering API issue with nested theme blocks

[jn-cavera]

When using the Section Rendering API to retrieve the HTML for a section, it only returns the root level children for the section (which works fine for section blocks) but doesn't appear to take in to account the possibility of nested child blocks. If you have a section with more then one level of blocks (blocks within blocks), nothing beyond the first tier of blocks will be returned.

[mufftee]

Same Problem for me.

[pablogiralt]

Same issue here

[visnaut]

I would say this is our biggest blocker from fully adopting Theme Blocks, since Section Rendering is a required component for supporting high-variant products.

[miazbikowski]

Hey folks! I've been trying to reproduce your issue, but in all cases, my nested blocks have been rendering correctly through the Section Rendering API.

It would be helpful to be given some examples on your storefronts where the rendering is not working as expected 🙏🏻 Thanks in advance!

[mdamjanic7]

CC @jn-cavera @mufftee @pablogiralt @visnaut ☝

[mufftee]

fetch(`${window.location}?section_id=product${params}`)
  .then((response) => response.text())
  .then((responseText) => {
    console.log(responseText);
    const html = new DOMParser().parseFromString(responseText, 'text/html');
    const isValidOption = html.querySelector('response-product-info-form');
    console.log(isValidOption);

    // Combined listings: If the product changed, replace the old product section with the new product section
    // if (newProductUrl && oldProductUrl !== newProductUrl) {
    //   productElement.parentNode.insertBefore(html.querySelector('#product'), productElement);
    //   productElement.remove();

    //   // Focus the input for the last clicked option value
    //   document.querySelector(`#${event.target.id}`).focus();

    //   return;
    // }

    // const optionValueSelectors = event.target.closest('.optionValueSelectors');
    // optionValueSelectors.innerHTML = html.querySelector('.optionValueSelectors').innerHTML;
    // document.querySelector(`#${event.target.id}`).focus();

    // Update any other sections that depend on the option value picker
  });

If i use this, i get as a result this:

<div data-response-product-info id="AWlM4ekR0TFlPSGJCY__product_info" class="mb-4 last:mb-0 px-4"></div>

The whole Product Info area is empty, as long it is a second, third, fourth etc level nested block.

@miazbikowski

Sadly i dont have the repo anymore to reproduce, but this behaviour still happens to me in other themes or examples that i setup.

[mdamjanic7]

Hey @mufftee, we think we know what might be going on. Try extracting the section id from the wrapper and using that when fetching the section.

• When you request ?section_id=product you get the raw section with no awareness of the Template JSON where the blocks are defined.
• Instead, you should use something like ?section_id=template--25025519353878__main so that we can target the right template.

Let us know if that works, and I'll make sure we update the developer docs and clarify why extracting the section id is important.

[mufftee]

@mdamjanic7 so, i also need to target the template even if i just have the default product template? I didn`t create a specific one in my use case.

[mdamjanic7]

@mufftee Yes, you'd need to target the dynamic id.
Just to clarify - you wouldn't be targeting the template, but the instance of that section on a particular template. That way you'd be getting the section with the dynamic values applied (settings and blocks) from the template file, and not the section with the default state (default settings, no blocks).

[mufftee]

I will try that out on friday, thank you!