Slow/delayed loading times when injecting js via shopify ScriptTag API

FootsieNG
Tourist
7 1 1

I'm building a Shopify embedded application (Node.js and Koa) that needs to inject a code snippet into the product listing page of the integrated e-commerce store. The idea is to present a custom icon against each product.

I'm using the Shopify ScriptTag API to set a local script that is called upon when the page loads.

The issue is there is quite a significant delay using this method. When the shopify product page loads, the custom icon appears approx a second after.

For simplicity I've attached a a test script that is loaded through the ScriptTag API below, which executes on page load:

$(document).ready(() => {

  const $productDiv = $('#products'); 
  $productDiv.append('<div>TEST</div>');  

});

Is there a way I can make the injected code appear faster on page load using the scriptTag API? If not, is there any good alternative such as injecting into liquid?

This is an application that needs to be installed seamlessly by clients, so I can't be manually altering their template files.

Thanks in advance.

Replies 2 (2)

TwoColors
Shopify Partner
78 0 23

Hey there,

 

Shopify Script Tag is injected dynamically and is asynchronous. I know this topic was discussed before somewhere, and there is a chance they will allow for synchronous loading somewhere in the future, but not currently. I had same issue by the way, I wanted to use script tag for smart way of validating if app is installed, but with dynamic injection it's not as simple as I wanted

Maciej Tokarczyk
chenster
Shopify Partner
134 5 29

Facing the same challenge here. It's interesting that Shopify actually recommended using Script Tag to inject javascript from this post.

Cartoo