Theme dependencies

This technical documentation only applies to our theme Impact and Prestige v7 (and higher). While we plan to further extend our other themes to share the same technical foundation, if you are using a different theme, please refer to the file "custom.js" inside the Assets folder to access the technical documentation for your theme.

For performance reasons, we are limiting the number of external dependencies we are using to a bare minimum. Here is a complete list of dependencies that we are currently using (the versions are accurate as of September 2022):

On Safari browser, the theme conditionally loads this custom element polyfill to allow the theme to extend built-in types:

Re-using the dependencies

All those external dependencies are exported as ES modules in the "vendor.min.js" file. If you wish to use them for your code, you, therefore, need to create a module and import them (make sure to declare your script as a module):

<script type="module">
  import {Delegate} from "vendor";
  
  const delegate = new Delegate();
</script>

Motion

Motion library is a lightweight library around the WebAnimations API. It is used throughout our themes to power the various animations, and you can use it for your code.

You can read more about Motion by clicking here.

Please note that for size reasons, not all the components are exported in the vendor bundle. As of today, you can import the following modules: animate , timeline , inView and scroll gestures, ScrollOffset constants.

Example:

<script type="module">
  import {timeline, inView} from "vendor";

  (async () => {
    await inView(element, () => {
      timeline([SEQUENCE]);
    });
  })();
</script>

ftdomdelegate

This library allows us to easily implement delegation patterns to subscribe to events without manually registering event listeners individually. It is exported under the Delegate module name:

<script type="module">
  import {Delegate} from "vendor";
  
  const delegate = new Delegate();
  delegate.on('click', '[data-action="open-modal"]', () => {
    // Do something
  });
</script>

focusTrap

FocusTrap is a library that easily handles focus trapping (an essential accessibility feature). You will normally never need to use it, as it is abstracted in the theme components. But if you need it, you have it!

<script type="module">
  import {FocusTrap} from "vendor";

  const trapFocus = FocusTrap.createFocusTrap(options);
</script>

PhotoSwipe

Photoswipe is a library used to create a native-like pinch-to-zoom feature. It is currently only used for the zoom feature on the product page, but you can reuse it if you want to create your lightbox galleries. It is exported under the PhotoSwipeLightbox module.

You will notice that we also need to specify the pswpModule with the "photoswipe.min.js" asset, which allows loading the full library only on demand (so if the zoom is never used, the full library is never loaded).

<script type="module">
  import {PhotoSwipeLightbox} from "vendor";

  const lightbox = new PhotoSwipeLightbox({
    gallery: '#my-gallery',
    children: 'a',
    pswpModule: () => import("{{ 'photoswipe.min.js' | asset_url }}")
  });
</script>