Nested Sections!

Shopify Expert
60 0 23

Hi fellow Shopify geeks. So I set out to build a way to have a configurable sidebar section, with blocks, defined WITHIN a collection section. That doesn't work right? But wait, maybe it can. Curious about people's thoughts on this technique. I've simplified the code a bunch to demonstrate what I'm doing but the idea is that the main section has a token in its content (e.g. "%%SIDEBAR-1%%"), which then gets replaced with the full content of another section. Here is my code of /templates/collection.liquid

{% capture sidebar_content_1 %}{% section 'sidebar-1' %}{% endcapture %}
{% capture sidebar_content_2 %}{% section 'sidebar-2' %}{% endcapture %}

{% capture collection_template_content %}
    {% section 'collection' %}
{% endcapture %}

{% assign collection_template_content = collection_template_content | replace: "%%SIDEBAR-1%%", sidebar_content_1 %}
{% assign collection_template_content = collection_template_content | replace: "%%SIDEBAR-2%%", sidebar_content_2 %}

{{collection_template_content}}

The front end of the site loads perfectly and the theme editor loads with the ability to configure both sections with their own set of settings and blocks. Magic! 

The only issue I'm seeing is that the theme editor "thinks" there is an HTML syntax error somehwere even though I validated the HTML and all is good. I'm pushing forward with this but I would love to hear thoughts and see if somebody can think about why the theme editor has this error. I'm thinking it's eyes are just crossed.... 

1 Like
Shopify Expert
60 0 23

Ok. Found a way around this! Added this code after nested sections captures:

{% assign sidebar_content1 = sidebar_content1 | replace: 'class="shopify-section"', 'class="shopify-section-nested"' %}
{% assign sidebar_content2 = sidebar_content2 | replace: 'class="shopify-section"', 'class="shopify-section-nested"' %}

 

1 Like
Shopify Partner
2522 25 524

Nice trick Jonathan!

From the point of view of the theme Customizer they are not nested, but rather one after another, but it's a clever idea to "inject" the rendered result of one section into another.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
Shopify Partner
1 0 0

HI Jonathan

Please give me also the Json of schema of sections

0 Likes
Shopify Partner
32 0 0

Nice workaround! 

0 Likes
Highlighted
Shopify Partner
12 0 2
{% assign sidebar_content_1 = sidebar_content_1 | replace: 'class="shopify-section"', 'class="shopify-section-nested"' %}

Just a heads up, the corrected code above is missing a "_" : sidebar_content_1

1 Like