Is there a way to call snippets with javascript?

Excursionist
19 3 4

Something like the following is what im trying to accomplish.

 

function myFunction() { 
if( x ) 
then {{% include mysnippet %}};
  }
0 Likes
Highlighted
Shopify Partner
1384 162 251

You cannot do that. But you can use AJAX to render sections - https://help.shopify.com/en/themes/development/sections/section-rendering-api

 

Alternatively, you can include the snippet in the liquid code but have it hidden (display:none) and then show it based on the conditional in your javascript.

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
2 Likes
Highlighted
Excursionist
19 3 4

Would you be willing to suggest the best way of going about this...

 

My goal here is to use deferment methods that work with chrome and chrome based browsers, and then not use those deferment methods for Firefox, as it causes display errors.

Im trying to make some edits so that, if the browser is Firefox, To run a snippet calling in the following.

 

 {{ 'theme.scss.css' | asset_url | stylesheet_tag }}
 {{ 'font-awesome.min.css' | asset_url | stylesheet_tag }}
 {{ 'swatch.css' | asset_url | stylesheet_tag }} 
 {{ 'dynamic.css' | asset_url | stylesheet_tag }}
  
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">

Else (for all other browsers) run this instead...

<link rel="preload" href=" {{ 'theme.scss.css' | asset_url }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href=" {{ 'theme.scss.css' | asset_url }}"></noscript>

<link rel="preload" href="{{ 'swatch.css' | asset_url }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="{{ 'swatch.css' | asset_url }}"></noscript>

<link rel="preload" href="{{ 'dynamic.css' | asset_url }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="{{ 'dynamic.css' | asset_url }}"></noscript>


<link rel="preload" href="{{ 'font-awesome.min.css' | asset_url }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="{{ 'font-awesome.min.css' | asset_url }}"></noscript>

<link rel="preload" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i"></noscript>

I figured I could use javascript to make the determination. And made a simple script to confirm the browser via console log, I had planned to adapt this to use the above code.

 function getBrowser() { 
   if(navigator.userAgent.indexOf("Firefox") != -1 ) 
   console.log('FIREFOX');
   else console.log('notFF');
  }

    getBrowser();

Would I be able to use this with (display:none)?

Also would I need to save these as sections and not snippets to use the section rendering API you linked?

0 Likes
Highlighted
Shopify Partner
1384 162 251

OK, so it's the code within the head element and related to styles. None of the suggestions is going to work for you.

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