Terra Setup

In our JavaScript culture, we maintain consistency across projects with a common root setup.

This JavaScript setup is designed to handle preloading assets (like images and animations) and ensure smooth transitions between pages. It uses dynamic imports to only load what’s necessary, improving performance.

Project

The Project class initiates the setup, configuring core functionalities and providing room for debugging through a URL parameter. It also has space to store libraries and animations for easy access.

As we seen earlier, the init method runs asynchronously to preload all required resources for the current page, saving them to the window object. Since no sensitive information is involved, this is a safe approach.

Once all resources are loaded, a function hides the preloader and executes the main logic from Main.js, moving the project forward smoothly.

Main

The Main class is responsible for managing all the project’s core logic, and it extends the Core class. It inherits essential configurations such as:

• Lazy loading (with Blazy configuration)
• Contact Form 7
• Swup transition settings
• Boostify (for managing JS triggers)
• terraDebug query parameter.

The Main class introduces the following:

• init() method: It loads the Core class’s init method. Any additional initialization logic specific to Main can be placed here.
• events() method: This triggers the event setup defined in the Core class. You can add or override event listeners specific to Main in this method.

Key Methods

• contentReplaced(): (asynchronous): This method is responsible for initializing components like sliders, carousels, modals, and scroll animations.Everything inside the <main> tag should be managed here. This method loads the contentReplaced() logic from the Core class first before adding more logic.

• willReplaceContent(): This method ensures that elements with event listeners (such as sliders, carousels, and modals) are destroyed before new content is loaded, preventing memory leaks or errors. It calls the Core class’s willReplaceContent() first before additional cleanup logic is added.

Special Notes:

• Any logic or components related to elements outside the <main> tag (e.g., header, footer, or sidebar) should be handled in the Core class.
• The constructor takes a payload object that allows flexibility in configuring Boostify, terraDebug, and other dynamic project settings.

Core

The Core class serves as the foundation of the project. It manages key configurations such as lazy loading, transition settings, and Contact Form 7 integration, as well as Boostify for enhanced JS triggers. These configurations are passed through the constructor, enabling flexible initialization for different project requirements.

The constructor accepts a payload object to initialize various configurations, including:

• Lazy loading (Blazy): Manages image lazy loading with a configurable selector.
• Swup transitions: Handles page transitions using Swup with different plugins, including:
  • SwupHeadPlugin (ensures assets persist across transitions)
  • SwupScriptsPlugin (executes scripts on page transitions)
  • SwupJsPlugin (manages additional JS during transitions)
  • Optional SwupDebugPlugin if terraDebug is enabled
• Contact Form 7: Supports form transitions in WordPress if enabled.
• Boostify: Adds enhanced JavaScript triggers for various interactions.

Key Methods

init() (asynchronous) - This method is responsible for initializing key components and checking for Google Tag Manager (GTM) script availability.

• Google Tag Manager: It dynamically imports the hasGoogleScripts function to verify if GTM scripts are loaded within a specific timeframe. If detected, a custom event for GTM is triggered on each page transition to capture a virtual page view.

async init(){
    const { hasGoogleScripts } = await import('@terrahq/helpers/hasGoogleScripts');
    this.detected = await hasGoogleScripts({ maxTime: 1201 });
    if (this.detected) {
        window.dataLayer.push({
            event: 'VirtualPageview',
            virtualPageURL: window.location.pathname + window.location.search,
            virtualPageTitle: document.title
        });
    } else {
         this.terraDebug ? console.log("Google Scripts not detected") : null;
    }
}

events() - This method sets up event listeners and handles page transitions using Swup’s hooks. It ensures that content is replaced and initialized properly.

• Content Initialization: The contentReplaced() method is triggered after each page transition to initialize dynamic components like Sliders,On ScrollAnimations and lazy-loaded images.

• Content Cleanup: The willReplaceContent() method ensures components like Sliders, On ScrollAnimations are properly destroyed before new content is loaded to avoid memory leaks or issues.

events() {
    // This is part of swup ecosystem and is responsable for fire events on load, and durning page transition
    if (document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) {
        this.contentReplaced();
    } else {
        document.addEventListener("DOMContentLoaded", () => {
            this.contentReplaced();
        });
    }
    this.swup.hooks.on("content:replace", () => {
        this.contentReplaced();
    });

    this.swup.hooks.before("content:replace", () => {
        this.willReplaceContent();
    });

    // on each Page transition we need to make sure we are sending information to GTM
    this.swup.hooks.on("page:view", async () => {
        if(this.detected){
            window.dataLayer.push({
                event: "VirtualPageview",
                virtualPageURL: window.location.pathname + window.location.search,
                virtualPageTitle: document.title,
            });
        }
    });
}