Product Sticky Header

This extension class provides functionality for the sticky header on product pages. The header will display and become fixed at the top of the screen after scrolling past the pricing display section on the product page by default, however, the element to target for triggering the sticky header can be changed through the class options. The product image, pricing values, and add to cart button within the header will be updated and remain in sync with their product details counterparts as images and/or attributes are interacted with by users.

Installation

Note: This class is pre-installed and loaded asynchronously with Genesis out of the box in the PROD.js file.

1. Add import ProductStickyHeader from 'extensions/product-sticky-header'; to your file.
2. Create a new instance of the class, passing the root container element as the first parameter. The class instance can also receive a configuration object as the second parameter to override any of the default settings. More details on the configuration object can be found in the Options section below.

Example Usage

Initialize the ProductStickyHeader class object:

Preferred asynchronous initialization:

(async () => {
    const stickyHeaderElement = document.getElementById('js-sticky-header');

    if (!stickyHeaderElement || !('IntersectionObserver' in window)) {
        return;
    }

    const {default: ProductStickyHeader} = await import('extensions/product-sticky-header');

    new ProductStickyHeader(stickyHeaderElement);
})();

Alternatively:

import ProductStickyHeader from 'extensions/product-sticky-header';

const stickyHeaderElement = document.getElementById('js-sticky-header');

if (stickyHeaderElement) {
    new ProductStickyHeader(stickyHeaderElement);
}

Options

The ProductStickyHeader object can receive a configuration object as the second parameter to override any of the default settings. The following table defines the available options:

Name	Type	Description	Default Value
atcElement	Element	The product header CTA element to trigger the add to cart action.	'#js-product-header-cta'
awaitAnimations	Boolean	Flag to determine if the sticky/unsticky functionality should wait for css animations to finish. This should be set to true if css animations are being used. This option will be ignored if a user's prefers-reduced-motion CSS media feature is NOT set to no-preference.	true
containerElement	Element	The top-level product header container element, typically the first child of the rootElement.	'.g-product-header__container'
hiddenClass	String	Class to apply for showing/hiding the rootElement.	'u-hidden'
imageElement	Element	The product header image element.	'#js-product-header-image'
priceValueElement	Element	The product header price value container element.	'#js-product-header-price'
stickyTargetElement	Element	The element to target for triggering the sticky functionality.	'.g-product-layout-details'
targetAddToCartElement	Element	The target add to cart element.	'.g-product-layout .js-add-to-cart'
targetImageElementSelector	String	The selector for the target image element.	'.g-carousel__slide.is-active img'
targetImageElementContainer	Element	The target image element's container element.	'#js-product-layout-image-slider'
targetPriceValueElement	Element	The target product price value container element.	'.g-product-layout .g-product-layout-details__pricing'