Mindbody doesn’t appear when use Section Loader Plugin

Description

• You use Mindbody code in Blog Post Content

• But it doesn’t render properly in Section Loader Supreme Plugin

• If you check Source Code, Code Block still appears, but it doesn’t render button

You can use this code under Plugin code in Code Injection > Footer

<!-- @tuanphan - Fix Mindbody code -->
<script>
class WMSectionLoaderCodeBlockFix {
  constructor() {
    this.processed = new WeakSet();
    this.hookIntoSectionLoader();
  }

  hookIntoSectionLoader() {
    // Listen for Section Loader completion
    document.addEventListener('wmSectionLoader:afterInit', () => {
      this.processCodeBlocks();
    });

    document.addEventListener('wmSectionLoader:stateChange', (e) => {
      if (e.detail.state === 'complete') {
        setTimeout(() => this.processCodeBlocksInElement(e.detail.el), 100);
      }
    });

    // Also process on initial load
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', () => this.processCodeBlocks());
    } else {
      this.processCodeBlocks();
    }
  }

  processCodeBlocks() {
    const containers = document.querySelectorAll('[data-wm-plugin="load"][data-loading-state="complete"]');
    containers.forEach(container => this.processCodeBlocksInElement(container));
  }

  processCodeBlocksInElement(container) {
    if (this.processed.has(container)) return;
    this.processed.add(container);

    const codeBlocks = container.querySelectorAll('.sqs-block-code');
    
    codeBlocks.forEach(block => {
      // Process external scripts
      const externalScripts = block.querySelectorAll('script[src]');
      externalScripts.forEach(oldScript => {
        this.reloadScript(oldScript);
      });

      // Process inline scripts
      const inlineScripts = block.querySelectorAll('script:not([src])');
      inlineScripts.forEach(oldScript => {
        this.reloadInlineScript(oldScript);
      });

      // Process custom elements (like healcode-widget)
      this.initializeCustomElements(block);
    });
  }

  reloadScript(oldScript) {
    const newScript = document.createElement('script');
    newScript.src = oldScript.src;
    
    // Copy attributes
    Array.from(oldScript.attributes).forEach(attr => {
      if (attr.name !== 'src') {
        newScript.setAttribute(attr.name, attr.value);
      }
    });

    oldScript.parentNode.replaceChild(newScript, oldScript);
  }

  reloadInlineScript(oldScript) {
    const newScript = document.createElement('script');
    newScript.textContent = oldScript.textContent;
    
    Array.from(oldScript.attributes).forEach(attr => {
      newScript.setAttribute(attr.name, attr.value);
    });

    oldScript.parentNode.replaceChild(newScript, oldScript);
  }

  initializeCustomElements(container) {
    // Specifically handle healcode-widget
    const healcodeWidgets = container.querySelectorAll('healcode-widget');
    
    if (healcodeWidgets.length > 0 && window.HealcodeWidget) {
      healcodeWidgets.forEach(widget => {
        // Force re-initialization
        if (typeof window.HealcodeWidget.init === 'function') {
          window.HealcodeWidget.init(widget);
        }
      });
    }
  }
}

// Initialize after WM Toolkit is loaded
if (window.wm$) {
  new WMSectionLoaderCodeBlockFix();
} else {
  window.addEventListener('load', () => {
    new WMSectionLoaderCodeBlockFix();
  });
}
</script>