Nested Sections!

Jon_Schwartz
Shopify Expert
76 0 46

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

Replies 29 (29)
mextest_Admin
New Member
1 0 0

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
Shopify Expert
108 2 30

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

C'est simple comme bonjour ! Ou presque.
Reach out to me at admin@maxdesign.expert
chiragramjibhai
Tourist
7 0 0

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.........Screenshot 2021-06-01 at 10.20.03 PM.png

made4Uo
Navigator
215 11 77

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

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
g33kgirl
Shopify Partner
323 95 114

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

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
MaxDesign
Shopify Expert
108 2 30

@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

C'est simple comme bonjour ! Ou presque.
Reach out to me at admin@maxdesign.expert
partdev
New Member
2 0 0

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
Shopify Expert
108 2 30

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

C'est simple comme bonjour ! Ou presque.
Reach out to me at admin@maxdesign.expert
partdev
New Member
2 0 0

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
New Member
1 0 0

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 %}