/** * DEVELOPER DOCUMENTATION * * Include your custom JavaScript here. * * The theme Focal has been developed to be easily extensible through the usage of a lot of different JavaScript * events, as well as the usage of custom elements (https://developers.google.com/web/fundamentals/web-components/customelements) * to easily extend the theme and re-use the theme infrastructure for your own code. * * The technical documentation is summarized here. * * ------------------------------------------------------------------------------------------------------------ * BEING NOTIFIED WHEN A VARIANT HAS CHANGED * ------------------------------------------------------------------------------------------------------------ * * This event is fired whenever a the user has changed the variant in a selector. The target get you the form * that triggered this event. * * Example: * * document.addEventListener('variant:changed', function(event) { * let variant = event.detail.variant; // Gives you access to the whole variant details * let form = event.target; * }); * * ------------------------------------------------------------------------------------------------------------ * MANUALLY CHANGE A VARIANT * ------------------------------------------------------------------------------------------------------------ * * You may want to manually change the variant, and let the theme automatically adjust all the selectors. To do * that, you can get the DOM element of type "", and call the selectVariant method on it with * the variant ID. * * Example: * * const productVariantElement = document.querySelector('product-variants'); * productVariantElement.selectVariant(12345); * * ------------------------------------------------------------------------------------------------------------ * BEING NOTIFIED WHEN A NEW VARIANT IS ADDED TO THE CART * ------------------------------------------------------------------------------------------------------------ * * This event is fired whenever a variant is added to the cart through a form selector (product page, quick * view...). This event DOES NOT include any change done through the cart on an existing variant. For that, * please refer to the "cart:updated" event. * * Example: * * document.addEventListener('variant:added', function(event) { * var variant = event.detail.variant; // Get the variant that was added * }); * * ------------------------------------------------------------------------------------------------------------ * BEING NOTIFIED WHEN THE CART CONTENT HAS CHANGED * ------------------------------------------------------------------------------------------------------------ * * This event is fired whenever the cart content has changed (if the quantity of a variant has changed, if a variant * has been removed, if the note has changed...). This event will also be emitted when a new variant has been * added (so you will receive both "variant:added" and "cart:updated"). Contrary to the variant:added event, * this event will give you the complete details of the cart. * * Example: * * document.addEventListener('cart:updated', function(event) { * var cart = event.detail.cart; // Get the updated content of the cart * }); * * ------------------------------------------------------------------------------------------------------------ * REFRESH THE CART/MINI-CART * ------------------------------------------------------------------------------------------------------------ * * If you are adding variants to the cart and would like to instruct the theme to re-render the cart, you cart * send the cart:refresh event, as shown below: * * document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', { * bubbles: true * })); * * ------------------------------------------------------------------------------------------------------------ * USAGE OF CUSTOM ELEMENTS * ------------------------------------------------------------------------------------------------------------ * * Our theme makes extensive use of HTML custom elements. Custom elements are an awesome way to extend HTML * by creating new elements that carry their own JavaScript for adding new behavior. The theme uses a large * number of custom elements, but the two most useful are drawer and popover. Each of those components add * a "open" attribute that you can toggle on and off. For instance, let's say you would like to open the cart * drawer, whose id is "mini-cart", you simply need to retrieve it and set its "open" attribute to true (or * false to close it): * * document.getElementById('mini-cart').open = true; * * Thanks to the power of custom elements, the theme will take care automagically of trapping focus, maintaining * proper accessibility attributes... * * If you would like to create your own drawer, you can re-use the content. Here is a simple * example: * * // Make sure you add "aria-controls", "aria-expanded" and "is" HTML attributes to your button: * * * * Your content * * * The nice thing with custom elements is that you do not actually need to instantiate JavaScript yourself: this * is done automatically as soon as the element is inserted to the DOM. * * ------------------------------------------------------------------------------------------------------------ * THEME DEPENDENCIES * ------------------------------------------------------------------------------------------------------------ * * While the theme tries to keep outside dependencies as small as possible, the theme still uses third-party code * to power some of its features. Here is the list of all dependencies: * * "vendor.js": * * The vendor.js contains required dependencies. This file is loaded in parallel of the theme file. * * - custom-elements polyfill (used for built-in elements on Safari - v1.0.0): https://github.com/ungap/custom-elements * - web-animations-polyfill (used for polyfilling WebAnimations on Safari 12, this polyfill will be removed in 1 year - v2.3.2): https://github.com/web-animations/web-animations-js * - instant-page (v5.1.0): https://github.com/instantpage/instant.page * - tocca (v2.0.9); https://github.com/GianlucaGuarini/Tocca.js/ * - seamless-scroll-polyfill (v2.0.0): https://github.com/magic-akari/seamless-scroll-polyfill * * "flickity.js": v2.2.0 (with the "fade" package). Flickity is only loaded on demand if there is a product image * carousel on the page. Otherwise it is not loaded. * * "photoswipe": v4.1.3. PhotoSwipe is only loaded on demand to power the zoom feature on product page. If the zoom * feature is disabled, then this script is never loaded. */