Nested Sections!

[JAS_Technology]

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.... 

[mextest_Admin]

Any way to add a parameter?

We would like to design a way to display a product, with its image, title, price etc. This would be our ideal code (to be inserted in pages, blog articles etc):

%%product%sku1%%

%%product%sku2%%

Is it doable? 

[MaxDesign]

@mextest_Admin you can add parameters in snippets, but you can't do that with sections to start with, so let's forget about nested sections. Then depending on your use case, your section could reference some snippets and you can list some variables (say section settings) as parameters on the render tag.

[chiragramjibhai]

This is really helpful.

Using this concept I was able to change the sequence of sections from the customiser.

sections/a.liquid file (and two more for b.liquid and c.liquid)

<div >

	Section A
  
</div>



{% schema %}
  {
    "name": "Section A",
    "settings": [

	]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

sections/seq.liquid file

<div class="page-width">
  
{% if section.settings.id_a == "1"%}%%a%%{% endif %}
{% if section.settings.id_b == "1"%}%%b%%{% endif %}
{% if section.settings.id_c == "1"%}%%c%%{% endif %}

{% if section.settings.id_a == "2"%}%%a%%{% endif %}
{% if section.settings.id_b == "2"%}%%b%%{% endif %}
{% if section.settings.id_c == "2"%}%%c%%{% endif %}

{% if section.settings.id_a == "3"%}%%a%%{% endif %}
{% if section.settings.id_b == "3"%}%%b%%{% endif %}
{% if section.settings.id_c == "3"%}%%c%%{% endif %}

</div>
{% schema %}
  {
    "name": "Section Main",
    "settings": [
	{
         "type": "select",
         "id": "id_a",
         "label": "Order A",
         "options": [
           {
             "group": "value",
             "value": "1",
             "label": "1"
           },
           {
             "group": "value",
             "value": "2",
             "label": "2"
           },
           {
             "group": "value",
             "value": "3",
             "label": "3"
           }
         ],
         "default": "1",
         "info": "text"
      },
{
         "type": "select",
         "id": "id_b",
         "label": "Order B",
         "options": [
           {
             "group": "value",
             "value": "1",
             "label": "1"
           },
           {
             "group": "value",
             "value": "2",
             "label": "2"
           },
           {
             "group": "value",
             "value": "3",
             "label": "3"
           }
         ],
         "default": "1",
         "info": "text"
      },
{
         "type": "select",
         "id": "id_c",
         "label": "Order C",
         "options": [
           {
             "group": "value",
             "value": "1",
             "label": "1"
           },
           {
             "group": "value",
             "value": "2",
             "label": "2"
           },
           {
             "group": "value",
             "value": "3",
             "label": "3"
           }
         ],
         "default": "1",
         "info": "text"
      }
	]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

template/page.sequence.liquid file

{%capture one%}{% section 'a' %}{%endcapture%}


{%capture two%}{% section 'b' %}{%endcapture%}


{%capture three%}{% section 'c' %}{%endcapture%}

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

{% assign one = one | replace: 'class="shopify-section"', 'class="shopify-section-nested"' %}
{% assign two = two | replace: 'class="shopify-section"', 'class="shopify-section-nested"' %}
{% assign three = three | replace: 'class="shopify-section"', 'class="shopify-section-nested"' %}



{% assign collection_template_content = collection_template_content | replace: "%%a%%", one %}
{% assign collection_template_content = collection_template_content | replace: "%%b%%", two %}
{% assign collection_template_content = collection_template_content | replace: "%%c%%", three %}




{{collection_template_content}}

But still not able to get rid of the html error in the customiser.........

[made4Uo]

This is already answerer by Max_design. Check on his previous replies

[g33kgirl]

How would we add this code to a .json template file? 

[MaxDesign]

@g33kgirl I tried to think of some ways to achieve that but I don't think it's possible, unless someone comes with a clever idea, you'll have to sticky to .liquid template files to nest sections

[partdev]

I solved it by creating a new section, pasted the code of the section that I wanted to include and in the new section I entered the parameters that I wanted to pass.
In my case I created a new section called landingpage and I wanted to put the product-recommendations section in the landingpage section, here are all the steps:
1- I created a new product-recommendations-2 section
2- I pasted the content of product-recommendations into product-recommendations-2
3- In product-recommendations-2 I entered the parameters I wanted to pass, in my case productid with value 663093294020,
therefore instead of
"productId": {{product.id | json}},
I replaced with
"productId": 663093294020,
4- Finally in the landing page template I inserted the following code

{% section 'landingpage'%}

{% capture landingpage_1%} {% section 'landingpage'%} {% endcapture%}
{% assign landpage = landingpage_1 | replace: 'class = "shopify-section"', 'class = "shopify-section-nested"'%}

{% capture product_recommendations%} {% section 'product-recommendations-2'%} {% endcapture%}
{% assign product_recommendations = product_recommendations | replace: "%% insert-product-recommendations %%", landpage%}

{{product_recommendations}}

I hope I have been helpful.

[MaxDesign]

---

@partdev wrote:

I solved it by creating a new section, pasted the code of the section that I wanted to include and in the new section I entered the parameters that I wanted to pass.
In my case I created a new section called landingpage and I wanted to put the product-recommendations section in the landingpage section, here are all the steps:
1- I created a new product-recommendations-2 section
2- I pasted the content of product-recommendations into product-recommendations-2
3- In product-recommendations-2 I entered the parameters I wanted to pass, in my case productid with value 663093294020,
therefore instead of
"productId": {{product.id | json}},
I replaced with
"productId": 663093294020,
4- Finally in the landing page template I inserted the following code

---

Online store 2.0 templates are in json formatting. For instance your main product page template would be "product.json" and you can't write liquid in those pages. What did you try to achieve here? If you can write liquid in your landing page template, then you are using the legacy liquid template which fortunately still supports the nested section trick, but do not benefit Online store 2.0 features. 

[partdev]

In my case I solved the problem of passing a parameter and I explained how to do. I am not using a 2.0 template.

[lspoor]

Just following up here. I'm finding that encapsulating a section within capture tags, prevents the section from then showing up in the Theme Customiser, which means you cannot then add any blocks to this section. I'm trying to use this within the product.liquid template. Anybody experienced this?

{% capture badges %}
  {% section 'pdp-badges' %}
{% endcapture %}

[lspoor]

I'm just following up on this issue.

I have some data which is a string, I'm passing it into a section with the following method:

{%- liquid
assign myData = 'data],[data],[data'

capture header
section 'header
endcapture

assign header = header | replace: '%%DATA%%', myData
-%}

Then within 'sections/header.liquid' I have the following

{% capture replaced_data %}
%%DATA%%
{% endcapture %}

{%- liquid
    assign data = replaced_data | split: '],['

    echo data[0]
-%}

Now based off that, you'd expect the first `data` to be printed out, but infact the following is printed out

data],[data],[data

For some reason I'm no longer able to do any manipulation with this data once its in the 'sections/header.liquid' file. I've even tried doing a replace on the `],[` but it just doesn't take effect.

Anybody experienced similar?

[MaxDesign]

After a few hours of relentless trials & errors, I found a way to nest sections with both json and liquid templates (including home page). It works seamlessly but it's still unsupported, it's more tricky to set up, and the editor experience for nested sections looks less future proof for json templates (e.g. breaking change in the way the editor generate sections). So considering this, here's how I did it:

1) Modify {{ content_for_layout }} in theme.liquid

{%- comment -%}
This code alters {{ content_for_layout }} to enable section nesting.
If you nest your section on a json template, assign the template(s) name(s) in {{ myNested-section-json-templates }}.
Insert <myNested-section></myNested-section> in the main section (where you want the nested section).
For simplicity, replace myNested-section of this code snippet with your-nested-section-name.
{%- endcomment -%}     
          
{%- assign myNested-section-json-templates = 'product, blog, ...' -%} 
{%- capture myNested-section %}{% section 'myNested-section' -%}{%- endcapture -%}
{%- assign myNested-section = myNested-section | replace: 'data-shopify-editor-section=', 'data-section-nested data-shopify-editor-section-nested=' | replace: 'class="shopify-section"', 'class="shopify-section-nested"' -%}
          
{%- if request.design_mode -%}
    {%- if myNested-section-json-templates contains request.page_type -%}<div id="shopify-section-myNested-section"></div>{%- endif -%}
{%- endif -%}
        
{{- content_for_layout | replace: '<myNested-section></myNested-section>', myNested-section -}}   

2) Add script in the nested section (required for a decent design experience in shopify editor with json templates)

{%- if request.design_mode -%}
<script>
(function ShopifyEditor() {
  document.addEventListener('shopify:section:load', sectionLoad);
  document.addEventListener('shopify:section:select', sectionLoad);
  document.addEventListener('shopify:block:select', sectionLoad);
  document.addEventListener('shopify:block:deselect', sectionLoad);
 
  function sectionLoad(e) {
    let id = e.detail.sectionId;
    let nestedSection = document.querySelector(`#shopify-section-${id}[data-section-nested]`);
    let shopifySection = document.querySelector(`#shopify-section-${id}:not([data-section-nested]):not(:empty)`);

    /* this is to prevent the false-positive "HTML error found" warning */
    e.target.classList.remove('shopify-section');
    e.target.classList.add('shopify-section-nested');
    e.target.setAttribute('data-shopify-editor-section-nested', e.target.getAttribute('data-shopify-editor-section'));
    e.target.removeAttribute('data-shopify-editor-section');
      
    /* for json templates, this will relocate the placeholder section where the nested section should be. This is needed for a decent editor experience */
    if(nestedSection && shopifySection) nestedSection.parentNode.replaceChild(shopifySection, nestedSection);
      
    /* since associated javaScript that runs when the page loads don't run again in the editor, don't forget to re-init your section scripts with your own code. More info here: https://shopify.dev/themes/architecture/sections/integrate-sections-with-the-theme-editor */

  }
})();
</script>
{%- endif -%}

3) You're done.

It can look a little sketchy, but I've tried a few different things with more simple approaches, and for some reasons I don't fully grasp, the nested section would load properly, but the section settings would either not show in the editor pannel, either show (multiple times) and not update in real time unless saving. So this is for now the best I could come up with.

Feel free to try it & improve it (I'm sure there's room for it)! This is probably not a must-have, but sometimes, it is very handy to be able to nest sections since it can offer an easier and more intuitive customizing experience for merchants!

[marclesgomez]

I also need this for store, that actually help me in adding schema.