How to Force Reload / Clear Cache of .js.liquid file Assets Folder

jfoster
Shopify Partner
4 0 2

We have a javascript asset saved in the Assets folder of storefronts that have installed our app. It appears this file is heavily cached. Is there a way to force a store to clear the cache immediately and reload the javascript file we've specified?

 

If not, is there some reasonable expectation for how long before these files are reloaded by Shopify's CDN?

 

0 Likes
SobefyOscar
Shopify Partner
113 11 31

Following. 

Want to customize or make changes to a theme? Hire me.
If my answer was helpful please Like and Accept Solution.
Email: oscar@sobefy.com
Website: Sobefy.com
0 Likes
JBAZ
Shopify Partner
2 0 0

Following too.

0 Likes
Jason
Shopify Expert
10039 119 1876

Assets are loaded (unless yo've hardcoded things in directly) with the versioning id appended. eg:
https://cdn.shopify.com/s/files/1/1198/0996/t/2/assets/theme.js?212

 

What's the issue with cache that you are seeing that the above doesn't solve?

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Eric_Seastrand
Shopify Partner
42 3 36

I have the same issue: when I edit the {% stylesheet %} in a section file, the change isn't immediately visible on the front-end: the original style is still in place.

 

The workaround I've found is: if you make any change to the section outside of a stylesheet/javascript directive (ie, the actual HTML), it seems to force the cache refresh (the version number changes: in view-source, you'll see "compiled_assets/styles.css?192" < this number increments by 1 or more )

 

That said, I've also seen cases where it does refresh on its own.

johnkmeas
Tourist
3 0 1

I'm experiencing the same issue too. Seems to be happening with .js.liquid files.

Lulu1
Excursionist
24 1 17

Seems like  script_tag is not working correctly with cache busting
So instead of:

{{ 'shop.js' | asset_url | script_tag }}

Use this:

<script src={{ 'shop.js' | asset_url }}" type="text/javascript"></script>

 

kfladell
New Member
1 0 1

I found that if you put the reference to your JavaScript or CSS file in a Snippet instead of directly into the theme.liquid file, then it doesn't get cached in the CDN.

 

theme.liquid

Contains reference to the snippet between the <head> tag. For example, using a snippet named 'head':

 

<head>

    {% include 'head' %}

</head>

 

head.liquid

{% capture theme_styles %}
   {{ 'custom.css' | asset_url | stylesheet_tag }}
{% endcapture %}
 
{% capture theme_scripts %}
   {{ 'custom.js'  | asset_url | script_tag     }}
{% endcapture %}
procarrera
Tourist
11 1 0

Hi guys,

Seems I'm facing the same problem.... 

So, after some new tests I realized that for some reason the preview mode stopped using the latest version of my custom javascript file named custom.js.
Actually, looking closely at my console log I could see that there are two versions of this file:

custom.js --> old version
custom.js?v=3451638294779676935 --> the latest version

image.png

As I said, for some reason the preview mode keeps reading the custom.js file, which is the outdated version.

I believe it might be something related to the versioning control of the theme kit, once i am using the command line theme watch to sync my local files with the server.

I've tried to delete the file through the customize button (admin panel) and update again, also using a Private Window of Chrome, but it didn't work either.

Please, let me hear from you asap.

0 Likes