liquid schema works, but removes the section when modified from the editor

Question

I am new to the entire Shopify and liquid environment. However I was able to modify a section that used the {%schema%} tag to display a control to set a background and the maximum width of a text box.

So I ventured to create a section for myself to add a small FAQ block on one of the pages.

I have read everything I can to make sure that I am not forgetting anything, I have also checked the code on existing sections that work correctly, and I cant find the reason for this issue.

when I open the page with the section in it in the Theme editor, I loads correctly and displays the default color. I also see the modifier block on the left pane, however as soon as I change the value in the editor, it simply makes the entire section disappear.

can somebody help me to point out what am I doing wrong?

thank you very much

this is the entire code in the section:

    <style>
  
  .faq{
    max-width:900px;
    width:80%;
  }
  .faq-container{
    background-color:{{section.settings.container_background_color}};
    display: flex;
    justify-content:center;
    
  }
  
</style>


<div class="faq-container">
 
    <div class="faq" id="ndnappseasyfaqs-wrapper"></div>
  
</div>


{%schema%}
{
  "name": "FAQ section",
  "settings": [
    {
      "type": "color",
      "id": "container_background_color",
      "label": "Background color",
      "default": "#a0cf67"
    }
  ]


}
{% endschema %}

this is the result before I try to modify it: before modification

this is the result as soon as I modify the color: After modification

Answer 1

This might be an issue linked to preview update in JS. Did you try to save your changes and see if it works?

Answer 2

According to Integration with the theme editor,

When merchants customize sections, the HTML of those sections is dynamically added, removed, or re-rendered directly onto the existing DOM without reloading the entire page.

JavaScript that runs when the page loads will not run again when a section is re-rendered or added to the page. This poses a problem for any custom scripts that would need to be re-run.

If you're running some js on page load, it won't be run again after the user makes a change in section. So I guess you have to run the js manually. Just bind the event with your event listener

document.addEventListener('shopify:section:load', function(event){
   [your code...]
});