Manually update CDN or retrieve "? number" for files in Assets?

Solved
Tourist
10 0 0

I've read about the CDN and how it can take a while to update, and when I uploaded a file to my assets, I didn't realize a mistake that I'd made. I quickly corrected the mistake but have no way of seeing now if the final product will reflect that.

Is there any way to manually "push" the files in my Assets folder out to Shopify's CDN, or is there a way to find the number I need on the end of the file from the Assets folder?

0 Likes
Shopify Partner
948 97 152

There is no way to manage the CDN cache. It is all being done automatically, and usually within seconds you should see the updates on the live store. An alternative you might try for testing purposes would be to just drop the ?v=1566973XXX part, CDN should provide you with the latest, most up to date version available.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
1 Like
Tourist
10 0 0

I've tried that but it doesn't seem to work. This is how I have an HTML file saved in my assets:

  <h3>Available Column Plan Shapes</h3>
  <table>
      <tbody>
          <tr>
              <td>Plan Shape N</td>
              <td><img src="https://cdn.shopify.com/s/files/1/0051/7498/4794/files/shape-n.png?1323"></td>
              <td>Full</td>
          </tr>
          <tr>
              <td>Plan Shape O</td>
              <td><img src="https://cdn.shopify.com/s/files/1/0051/7498/4794/files/shape-o.png?1323"></td>
              <td>3/4 Corner</td>
          </tr>
          <tr>
              <td>Plan Shape P</td>
              <td><img src="https://cdn.shopify.com/s/files/1/0051/7498/4794/files/shape-p.png?1323"></td>
              <td>Halved</td>
          </tr>
          <tr>
              <td>Plan Shape Q</td>
              <td><img src="https://cdn.shopify.com/s/files/1/0051/7498/4794/files/shape-q.png?1323"></td>
              <td>2/3 Chord</td>
          </tr>
          <tr>
              <td>Plan Shape R</td>
              <td><img src="https://cdn.shopify.com/s/files/1/0051/7498/4794/files/shape-r.png?1323"></td>
              <td>3/4</td>
          </tr>
          <tr>
              <td>Plan Shape U</td>
              <td><img src="https://cdn.shopify.com/s/files/1/0051/7498/4794/files/shape-u.png?1323"></td>
              <td>Split for Reassembly</td>
          </tr>
      </tbody>
  </table>

But if I open this and check the source:
https://cdn.shopify.com/s/files/1/0051/7498/4794/t/7/assets/octagonal-wood-plan-shapes.html
It still has all of that surrounded by an extra <div> I accidentally uploaded that file with, so it ends up like this:

<div class="item">
  <h3>Available Column Plan Shapes</h3>
  <table>
      <tbody>
          <tr>
              <td>Plan Shape N</td>
              <td><img src="https://cdn.shopify.com/s/files/1/0051/7498/4794/files/shape-n.png?1323"></td>
              <td>Full</td>
          </tr>
          <tr>
              <td>Plan Shape O</td>
              <td><img src="https://cdn.shopify.com/s/files/1/0051/7498/4794/files/shape-o.png?1323"></td>
              <td>3/4 Corner</td>
          </tr>
          <tr>
              <td>Plan Shape P</td>
              <td><img src="https://cdn.shopify.com/s/files/1/0051/7498/4794/files/shape-p.png?1323"></td>
              <td>Halved</td>
          </tr>
          <tr>
              <td>Plan Shape Q</td>
              <td><img src="https://cdn.shopify.com/s/files/1/0051/7498/4794/files/shape-q.png?1323"></td>
              <td>2/3 Chord</td>
          </tr>
          <tr>
              <td>Plan Shape R</td>
              <td><img src="https://cdn.shopify.com/s/files/1/0051/7498/4794/files/shape-r.png?1323"></td>
              <td>3/4</td>
          </tr>
          <tr>
              <td>Plan Shape U</td>
              <td><img src="https://cdn.shopify.com/s/files/1/0051/7498/4794/files/shape-u.png?1323"></td>
              <td>Split for Reassembly</td>
          </tr>
      </tbody>
  </table>
</div>
0 Likes
Tourist
10 0 0

The <div class="item"> is part of a custom layout I have on the page, so it was appearing as a div.item inside of another div.item.
I know it's unconventional because I've had someone else tell me already about snippets and the like, but I've been using jQuery to make tables/charts in html and adding them to the product descriptions so that if I need to make changes to any commonly-used element in my descriptions I can just fix the one HTML file instead of going product-by-product, and it was working well for me until I hit the snag with the CDN not updating my file right away.

0 Likes
Shopify Partner
948 97 152

OK. I am not completely following what you are trying to do. How do you reference the *.html asset inside other liquid files? Or you just fetching the URL directly using jQuery from the client side?

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
1 Like
Tourist
10 0 0

I'm fetching it when the product page loads by putting a call for the file into the product description. I'll post the codes I have in the various files to make it work:

In product.liquid, I've added these:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdn.shopify.com/s/files/1/0051/7498/4794/t/7/assets/cc-html-template-index.js'></script>


In assets/cc-html-template-index.js, I have this:

$(document).ready(function(){
			$('#square-wood-plan-shapes').load("https://cdn.shopify.com/s/files/1/0051/7498/4794/t/7/assets/square-wood-plan-shapes.html");
			$('#round-wood-plan-shapes').load("https://cdn.shopify.com/s/files/1/0051/7498/4794/t/7/assets/round-wood-plan-shapes.html");
			$('#octagonal-wood-plan-shapes').load("https://cdn.shopify.com/s/files/1/0051/7498/4794/t/7/assets/octagonal-wood-plan-shapes.html");
		});

Unsure if you're familiar with jQuery, I'm still fairly new to it myself, but in the first parentheses, it basically says if an HTML element has the ID listed, it'll load the document in the second set of parentheses (The HTML in this case) inside of that element.

So <div class='item'> makes these "card" type panels of information (This keeps my layout flexible but maximizes the amount of info displayed at once)
Untitled.png

My problem stemmed from the html in 'octagonal-wood-plan-shapes.html' *also* having a surrounding <div class='item'>, which creates this monstrosity:
Untitled2.png

If I do <div id='octagonal-wood-plan-shapes'> alone with no surrounding div (The way it's intended), since the CDN hasn't updated, <div class item> is still in the .html I'm calling, which makes it look something like this:
Untitled3.png

For now I've circumvented this by using CSS and expanding the width of div.item>div.item to 100% and the margins to 0 and turned off the box-shadow until the CDN updates. I just wish there was a way that I could purge that old file and bring in a new one but I've already tried deleting, renaming, and calling a different file (the .js file I used to call these files didn't update either so calling a new file does nothing). Nothing works so I've just made child item classes fill up their entire container for now through the CSS file I have. When the CDN does finally update the file, it'll be like nothing happened at all. I just wish there was a way to update or obtain the ?2194082148 that's supposed to be on the end of that file so I can use the current version.

0 Likes

Success.

Shopify Partner
948 97 152

Gotcha! In general you don't want to reference any assets through direct links like https://cdn.shopify.com/s/files/1/0051/7498/4794/t/7/assets/square-wood-plan-shapes.html.

 

So, I would rather move this:

$(document).ready(function(){
			$('#square-wood-plan-shapes').load("https://cdn.shopify.com/s/files/1/0051/7498/4794/t/7/assets/square-wood-plan-shapes.html");
			$('#round-wood-plan-shapes').load("https://cdn.shopify.com/s/files/1/0051/7498/4794/t/7/assets/round-wood-plan-shapes.html");
			$('#octagonal-wood-plan-shapes').load("https://cdn.shopify.com/s/files/1/0051/7498/4794/t/7/assets/octagonal-wood-plan-shapes.html");
		});

Directly into the product.liquid, and, most important, replace the direct links like - https://cdn.shopify.com/s/files/1/0051/7498/4794/t/7/assets/square-wood-plan-shapes.html - with URL filter, like this:

{{ 'square-wood-plan-shapes.html' | asset_url }}

This will ensure correct links are generated by Shopify. These links will always point to the latest most up to date version of the asset.

 

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
1 Like
Highlighted
Tourist
10 0 0

Just to make sure I'm understanding clearly, you're saying to basically paste this (Same code I had with URLs replaced with URL filters?):

$(document).ready(function(){
			$('#square-wood-plan-shapes').load("{{ 'square-wood-plan-shapes.html' | asset_url }}");
			$('#round-wood-plan-shapes').load("{{ 'round-wood-plan-shapes.html' | asset_url }}");
			$('#octagonal-wood-plan-shapes').load("{{ 'octagonal-wood-plan-shapes.html' | asset_url }}");
		});

into product.liquid?

 

Edit: I should say that as far as the back end of Shopify storefronts go, I'm brand new. I just found out about the snippets and URL filters yesterday after I had already implemented my own fix.

0 Likes
Shopify Partner
948 97 152

Yup!

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
1 Like
Tourist
10 0 0

I appreciate all your help today. This'll help me tremendously.

0 Likes