Theme JavaScript

You can add your own JavaScript to a Selz theme but some useful plugins and scripts are included by default. Performance is important and to prevent doubling up, it’s much more efficient to use the existing plugins and libraries where possible.

Modernizr

Current version: 3.0.0

By default, {% selz_footer %}{% endselz_footer %} includes a custom build of Modernizr for feature detection. The features detected are as follows:

  • flexbox
  • flexboxlegacy
  • cssanimations
  • csstransforms3d
  • csstransitions
  • localstorage
  • sessionstorage
  • geolocation

We also add some custom tests

  • classlist
  • draganddrop
  • touch

jQuery

Current version: 2.2.0

We use jQuery as the base framework for a lot of our JavaScript so you don’t need to include this again.

Selz APIs

There are a few JavaScript API’s that we’ve included by default to make building your theme a little easier.

We suggest prefixing JavaScript class hooks with “js-” to differentiate them from styling hooks.

[data-toggle=”class”]

Add this attribute to an element to toggle the class on a click or change event. The class will be toggled on a target element, specified using data-target=".js-selector". You can add this to elements such as buttons, checkboxes, radio buttons and selects (targets need to be specified on the <option> elements). Here’s an example:

<!-- Trigger -->
<button type="button" data-toggle="class" data-target=".js-target" data-class="example">Trigger</button>
<!-- Target -->
<div class="js-target">This element will have the "example" class toggled on click of the trigger</div>

[data-add=”class”]

Similar to the above API, but instead this will add a classname on a click or change event. Here’s an example:

<!-- Trigger -->
<button type="button" data-add="class" data-target=".js-target" data-class="example">Trigger</button>
<!-- Target -->
<div class="js-target">This element will have the "example" class added on click of the trigger</div>

Custom JavaScript

You can create or upload your own JavaScript to the assets folder and use them within your theme. Here’s an example of including JavaScript uploaded to assets:

<script src="{{ "custom.js" | asset_url }}"></script>

You can access user settings (e.g. {{ settings.color }} within your JavaScript also if you use a .js.liquid file extension (example.js.liquid). This is the default when creating JavaScript files within the editor. However when the script is compressed and uploaded, the .liquid extension is removed so you need to access it as above with just the .js extension.

Was this helpful?

5 1