0
Answered

Reviews on site with page transitions

Gareth 5 years ago updated by Josh 5 years ago 5

I'm building a site using page transitions with https://swup.js.org which is similar to Barba.js. The page I have your review app on works fine until I navigate away from the page and back again. As it doesn't do a full refresh the function which brings in the reviews doesn't seem to load again. I have an app on the same page which brings in an Instagram feed and that refreshes fine.

Do you have any ideas on how to get this working? Thanks.

Under review

Have you checked this page...

https://swup.js.org/getting-started/reloading-javascript

The app loads a script file called showsrstemplate.js into the head of the page. Then it runs after the document is loaded.

Thanks for your reply. I'm using the technique you linked to already. The solution was one I'd already tried, a Swup plugin which forces js in the head to reload. https://swup.js.org/plugins/scripts-plugin


I just had it set to optin which means I would have had to add a data attribute to the showsrtemplate.js. I doubt there's a way in Shopify to add attributes to scripts added to plugins so the plugin is now set to optout and the reviews load correctly.


Thanks for your help.

I might have spoken too soon. Having the plugin set to opt out messes with other functions I'm using (I have a canvas object being added over and over now). Is there anyway to add an attribute, 'data-swup-reload-script' to the showsrtemplate.js file added to the head?

You could possibly add the attribute with some jquery. I'm not seeing a way to add attributes with the Shopify api.

https://shopify.dev/docs/admin-api/rest/reference/online-store/scripttag#create-2021-04

Another option might be to reload the slider javascript file when you go back to the page with a function like so...

function refreshsliderpreview(){
$.getScript("../../shopifyapp/showsrstemplate.js");
}