Swup + Shopify App Blocks Script Issues

[raymondarevalo]

Describe your problem 🧐

I'm using Swup in my Shopify liquid build and it works perfectly except when Shopify app blocks are present. App functionality works on initial page load but breaks after Swup transitions.

The Issue

Shopify app blocks inject scripts dynamically through theme sections, and since theme developers have limited control over how/when these scripts execute, they aren't re-initialized when navigating to a new page when using Swup.
E.g. Home page -> PDP

Proposed Solution

I'm considering the Swup Scripts Plugin since it's designed for situations where you "don't have full control over the scripts included on your website" - which describes Shopify's app ecosystem perfectly.

Example

The contact form within /pages/contact only loads when landing on the page. If navigating to the page from the homepage, it only works if "data-no-swup" is added to the link.

What is your question? 🙋‍♀️

Questions

• Is this script re-initialization issue common with Shopify + Swup?
• Any performance concerns with re-running app scripts on every transition?

Any insights from the community would be appreciated!

URL to minimal reproduction 🔗

https://www.nuzest.com/pages/contact

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for answers to my question
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

[daun]

That's exactly the situation the Scripts Plugin is intended for. There's nothing about Shopify that inherently requires this, but it's mostly when you can't control where script tags are inserted. I'd say go for it and report back if you run into any issues! As for performance, I couldn't think of any downsides. It merely delays the execution of the script until the new page content was inserted.