JS files not loading when page opens

Iwells0130
New Member
6 0 0

I've added some JavaScript files into my assets folder and linked them in a new HTML file I created under templates. The scripts seem to be linking correctly with the HTML file when I view the page source, but they do not run when I open the page. However, they do work from the local file I have saved on my computer so I know there are no errors in the code.

 

I've tried linking them in theme.liquid, placing them in the <head> section of the HTML, attempting different ways of linking the sources, and added defer or async tags but still no luck.

 

I thought maybe it was an issue with the timing in loading the page, whereas the JavaScript files are being loaded prior to the HTML for some reason, but I do not know how to add that into the code if that is the case.

 

HTML (both enterwebsiteapp.js and cloudflare.com sources seem to be linked properly when I check the 'view page source' but do not work when I open the page)

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Enter Website Page</title>
    <link rel='stylesheet' type='text/css' media='screen' href='{{ 'enterwebsitestyle.css' | asset_url }}'>
</head>


<!-- ENTER WEBSITE BUTTON -->
<body>
    <header class="hide">
        <nav>
            <a href="https://freakthecompany.com/"><img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/logo.png?v=1699035027" alt="enter website" class="button" width=200px height=200px></a>
        </nav>
    </header>


<!-- BACKGROUND IMAGES (KEEP IN SAME ORDER AS LAYERS OF PHOTOSHOP FILE FROM BOTTOM TO TOP) -->
    <main>
        <div class="vignette hide"></div>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/background.png?v=1699035034" data-speedx="0.2" data-speedy="0.26" data-speedz="0" data-rotation="0" data-distance="-200" class="parallax backgroundimage"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/eye.png?v=1699035027" data-speedx="0.024" data-speedy="0.01" data-speedz="0.53" data-rotation="0.2" data-distance="-300" class="parallax eye"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/stage.png?v=1699035028" data-speedx="0.02" data-speedy="0.06" data-speedz="0.08" data-rotation="0.03" data-distance="2000" class="parallax stage"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/people_shadow.png?v=1699035027" data-speedx="0.04" data-speedy="0.08" data-speedz="0.12" data-rotation="0.05" data-distance="2300" class="parallax peopleshadow"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_1.png?v=1699035027" data-speedx="0.070" data-speedy="0.1" data-speedz="0.03" data-rotation="0.06" data-distance="2600" class="parallax layer1"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_2.png?v=1699035027" data-speedx="0.065" data-speedy="0.07" data-speedz="0.05" data-rotation="0.08" data-distance="2800" class="parallax layer2"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_3.png?v=1699035028" data-speedx="0.065" data-speedy="0.10" data-speedz="0.07" data-rotation="0.08" data-distance="3000" class="parallax layer3"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_4.png?v=1699035028" data-speedx="0.065" data-speedy="0.11" data-speedz="0.10" data-rotation="0.08" data-distance="3200" class="parallax layer4"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_5.png?v=1699035035" data-speedx="0.065" data-speedy="0.13" data-speedz="0.12" data-rotation="0" data-distance="3500" class="parallax layer5"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_6.png?v=1699035028" data-speedx="0.059" data-speedy="0.2" data-speedz="0.06" data-rotation="0.12" data-distance="3800" class="parallax layer6"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_7.png?v=1699035028" data-speedx="0.059" data-speedy="0.12" data-speedz="0.12" data-rotation="0.15" data-distance="4000" class="parallax layer7"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_8.png?v=1699035028" data-speedx="0.065" data-speedy="0.15" data-speedz="0.10" data-rotation="0.1" data-distance="4200" class="parallax layer8"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_9.png?v=1699035028" data-speedx="0.06" data-speedy="0.13" data-speedz="0.11" data-rotation="0.17" data-distance="4400" class="parallax layer9"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/black_shadow.png?v=1699035027" class="shadow hide"width=200px height=200px> <!-- does not have parallax class as it needs to stay static -->
    </main>

    <script type='text/javascript' ref='{{ 'enterwebsiteapp.js' | asset_url }}' defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js" defer></script>
</body>
</html>

 

 

JavaScript of enterwebsiteapp.js

 

var parallax_el = document.querySelectorAll(".parallax");
var main = document.querySelector("main");

var splashScreen = document.getElementById('splashScreen');
splashScreen.addEventListener('click', function () {
    splashScreen.style.opacity = 0;
    setTimeout(function () {
        splashScreen.classList.add('hidden');
    }, 610);
});

// PARALLAX EFFECT
var xValue = 0,
    yValue = 0;
var rotateDegree = 0;

function update(cursorPosition) {
    parallax_el.forEach(function (el) {
        var speedx = el.dataset.speedx;
        var speedy = el.dataset.speedy;
        var speedz = el.dataset.speedz;
        var rotateSpeed = el.dataset.rotation;

        var isInLeft = parseFloat(getComputedStyle(el).left) < window.innerWidth / 2 ? 1 : -1;
        var zValue = (cursorPosition - parseFloat(getComputedStyle(el).left)) * isInLeft * 0.1;

        el.style.transform =
            'perspective(2300px) translateZ(' + zValue * speedz + 'px) ' +
            'rotateY(' + rotateDegree * rotateSpeed + 'deg) ' +
            'translateX(calc(-50% + ' + -xValue * speedx + 'px)) ' +
            'translateY(calc(-50% + ' + yValue * speedy + 'px))';
    });
}

update(0);

window.addEventListener("mousemove", function (e) {
    xValue = e.clientX - window.innerWidth / 2;
    yValue = e.clientY - window.innerHeight / 2;
    rotateDegree = xValue / (window.innerWidth / 2) * 20;
    update(e.clientX);
});

// SCENERY WIDTH ADJUSTMENT
/*
if (window.innerWidth >= 725) {
    main.style.maxHeight = window.innerWidth * 0.6 + "px";
} else {
    main.style.maxHeight = window.innerWidth * 1.6 + "px";
}
*/

// GSAP ANIMATION SCENERY
Array.prototype.slice.call(parallax_el).filter(function (el) {
    return !el.classList.contains("eye");
}).forEach(function (el) {
    var timeline = gsap.timeline();
    timeline.from(el, { top: el.offsetHeight / 2 + +el.dataset.distance + "px", duration: 3.2, ease: "power3.out" });
});

 

 

Any help would be greatly appreciated, thank you!

Replies 2 (2)

BSS-Commerce
Shopify Expert
3465 459 515

Hi @Iwells0130 ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Iwells0130
New Member
6 0 0

Hey!

 

I figured it out, I added the JavaScript inline between <script></script> tags in the HTML code. As well, I had previously converted the JavaScript to ES4 thinking that file minification had been the issue, and had to reconvert it to ES5 format.