Shopify Inbox started a war with my hero animation?

[AVR1]

Hi there!

Our store has a custom hero section, which contains two Adobe animations in iframes. One displays for landscape orientation clients, and the other for portrait.

We've been using this section template for over a year now, and it has been essentially unchanged since it was first designed. The HTML source of each animation is an interpolated string, so that the external JS assets can be added, and the string becomes the srcdoc of an iframe. It always just worked, until this year.

Recently, I noticed that the Shopify Inbox chat widget is inserting its own code into my iframe (and after it), and breaking the animations. Any JavaScript after the closing backtick of the first string is just spat out, below the shopify-section-template-- div itself.

With Inbox enabled, there is a JavaScript error about a backtick string not being terminated, but the backticks within the custom section itself are most certainly closed and in the right places.

As soon as the Inbox product is deactivated, the problem ceases, and the animation works. I have tried changing the class names and IDs of my elements in the custom section, so it's not that. I have also tried escaping the slashes in the closing HTML tags, inside the interpolated strings. You can see it live and working (in March, 2024), without Shopify Inbox here: https://www.avrevolution.com.au/

My hunch is that it's a React thing, where Shopify Inbox causes the DOM tree to be written funny. I think any alternative explanation would have to be much weirder. Before March, 2024, we last used our animation template until Christmas, 2023, so the timing of the breaking change is possibly corroborated by the 25th January comment by @jamescress on this (probably unrelated) post.

I don't know what I could possibly do about it, and Shopify Support has declined to create a bug report, so I'm hopeful that someone here will have some answers. Until then, no Shopify Inbox.

Thanks!

====

The broken up document root of the first iframe, where the remainder of the JavaScript after first closing backtick loads outside the Shopify section:

The section code in question:

<!-- Begin Hero Animation Section -->

<section id="hero-section">

    <iframe class="hero-banner" id="desktop-hero"></iframe>

    <iframe class="hero-banner" id="mobile-hero"></iframe>

</section>

<script type="text/javascript">

    const desktopScriptURI = "{{ 'animation-javascript-desktop.js' | asset_url }}";
    const mobileScriptURI = "{{ 'animation-javascript-mobile.js' | asset_url }}";

    const desktopHero = document.getElementById('desktop-hero');
    const mobileHero = document.getElementById('mobile-hero');
  
    const desktopIframeContent = `
        <!-- 
            Full HTML document, including HTML tags and a doctype declaration goes
            here, with the external JavaScript asset added: ${desktopScriptURI};
            Note that closing script tags must be escaped.
        -->
    `;

    const mobileIframeContent = `
        <!-- 
            Full HTML document, including HTML tags and a doctype declaration goes
            here, with the external JavaScript asset added: ${mobileScriptURI};
            Note that closing script tags must be escaped.
        -->
    `;
  
    desktopHero.srcdoc = desktopIframeContent;
    mobileHero.srcdoc = mobileIframeContent;
  
</script>

<!-- End Hero Animation Section -->

{% schema %}
  {
    "name": "Hero Animation",
    "settings": [],
    "presets": [
      {
        "name": "Hero Animation",
        "category": "Hero Animation"
      }
    ]
  }
{% endschema %}

[tim · Accepted solution]

I was able to replicate and fix.

Frankly, I'd say it's a sloppy way to insert app embed codes by Shopify (https://shopify.dev/docs/apps/online-store/theme-app-extensions/extensions-framework#app-embed-block...) as they simply search for </body> string and insert app embeds right before -- they could've at least looked for the last occurrence of this string.

Now, your code is a bit "provocative" as well and I believe any App which is added via embeds will do the same, not only Inbox.

I have no idea why your code is done like this and IMHO there are ways to improve it.

However, the easiest fix is to simply replace </body> with <\/body>  inside your interpolated strings -- similar to the way you escape </script> tags.

[AVR1]

Thanks, @tim. This worked.

In defense of the way the srcdocs are implemented, they actually have to be serialized from a file upload form, to make the template usable for non-web developers. I have updated it to escape the closing body tags, just as the script tags.