Custom HTML wrapper for sections when update to 2.0

[Be_Steven]

Hi everyone,

I'm struggling with finding a solution to migrate this templates/collection.liquid to templates/collection.json

<div class="container-a">
  {% section 'collection-sidebar' %}
</div>
<div class="container-b">
  {% section 'collection-promotions' %}
  <div class="container-c">
    {% section 'collection-template' %}
  </div>
</div>

On the new collection.json file I can't put sections in parent-child container like before.

Is there any solution for this on JSON template?

Thank you very much for your help

[jr-dev]

Have you found a solution? I'm struggling with the same problem...

[Be_Steven]

Hi Jr, 

Not yet, seems like no one care about this topic.

[Be_Steven]

Update:
I'm still have to face this issue when upgrading my client's theme from 1.0 to 2.0

Is there any idea please?

[Elizabeth_craig · Accepted solution]

I found a work-around using Javascript. 

You can create a function that will create a new div element, place it before the first child element you want to wrap, then you can append the child elements you want to wrap to the newly created parent div. Here is my solution for my specific case so you can modify it. Here, I wanted to wrap all of the sections with class "section-recent-titles" within a parent div.

// Wrap sections in a wrapper.
function wrapSections(section_class) {
  var childSections = document.querySelectorAll("."+section_class);
  var wrapper = document.createElement('div');
  wrapper.classList.add(section_class+"-wrapper");
  childSections.item(0).parentNode.insertBefore(wrapper, childSections.item(0));
  
  for ( var i=0; i< childSections.length; i++){
    wrapper.appendChild(childSections.item(i));
  }
}
// You can call this function with a specific section class.
wrapSections("section-recent-titles");

[Be_Steven]

Thanks @Elizabeth_craig you are the only one who care about this topic with me 😄

I think using JS like that is the only solution until now. It may have an issue that it may conflict with other JS code that catch by class I think. 

But so far it's the only way.
Thank you mate!

[almenko]

Hello! I'm having trouble figuring out exactly where to put the script. Could you tell me which file and how I need to add it?

[Elizabeth_craig]

Hey there,

You would put this code at the end of your theme’s JavaScript file, or better yet in a custom JavaScript file for your store. 

You should be able to copy the wrapSections function exactly as written. And then call the function with the last line, substituting “section-recent-titles” with “your-parent-section-name”. Every theme is different, so it might need some adjustments.

Hope that helps!