Remove a stylesheet or script when using theme editor

Highlighted
Tourist
5 0 2

I added the AOS animation library to my theme but when viewing in the 'theme editor' all my products get hidden after making any kind of dynamic change. I would like to remove the AOS stylesheet so as to stop this behavior, basically turning off AOS whenever viewing the theme editor.

 

The code below inside theme.liquid checks if you are using the editor based on the URL. If you are NOT using the editor it tries to load the aos.min.css asset but when trying this it throws a syntax error: Unexpected token '<' when trying to include the CSS asset inside a script block.

 

Is there a way in Liquid to check if using the theme editor?

 

// theme.liquid
<script>
	let url = window.location.href;
	if (	url.includes('design_theme') == false ) {
		{{ 'aos.min.css' | asset_url | stylesheet_tag }}
	}
	console.log( url.includes('design_theme') );
</script>

 

1 Like
Highlighted
New Member
1 0 0

Having the same issue :/

 

This seems to work for me. 

 

<script>
	let url = window.location.href;
	if (	url.includes('theme') == false ) {
    $('head').append(
      $('<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />')
    );
	}
	console.log( url.includes('theme') );
</script>
0 Likes
Highlighted
Tourist
5 0 2

This is the solution that worked for my  setup

 

// theme.liquid inside the <head> tag
<link id="aos_style" rel="stylesheet" type="text/css" > <script> let url = window.location.href; let asset = 'https://unpkg.com/aos@next/dist/aos.css'; let s = url.search("theme_id") if ( s == -1 ) { document.getElementById('aos_style').setAttribute('href', asset); } </script>
1 Like