New theme development - JavaScript structure

Highlighted
Tourist
5 0 0

Hi community!

I am working on a new theme from scratch.

Would love to hear schools of thought regarding JavaScript architecture and structure in a new Shopify project.
Thanks!

Neria Katz

0 Likes
Highlighted

Hi,

Usually the structure I use goes like this:

window.ezfy = window.ezfy || {};

ezfy = (function() {
    const selectors = {
        example: '#example',
    };

    function _isProductPage() {
        return /product/.test(window.location.href);
    }

    function hello() {
        console.log('EZFY is on')
    }

    return {
        init: function() {
            document.addEventListener("DOMContentLoaded", function() {
                hello();
            });

            window.onresize = function(event) {

            };

            window.onload = function() {

            }
        }
    };
})();


ezfy.init();


Then you can organize everything properly with functions and display them as you wish.

You can have multiple objects for pages/sections as well (similar to what Shopify does with their themes)

Kind regards,
Diego 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Needing urgent help? I am currently available for hire, same day response guaranteed: diego.boarutto.fortes@gmail.com
Highlighted
Tourist
5 0 0

Hi Diego

Seems straightforward and simple, and yeah, I recognize this pattern in many themes I have worked on.

Would you use any other advanced logic? for example - outputting different js depending on the route(page)?
Or just run a specific function for a specific page? (as I've seen done usually).

I will use the configuration you've shown and build upon that, and if you have any other pointers or best practices, it would be much appreciated

Thanks,
Neria

0 Likes
Highlighted

Usually if I need to run a function only in a specific page I test it via regex. Just like in the example above, I have a function _isProductPage(), so I can create similar ones to make sure I'm not unnecessarily bloating the website with unused code.

What I'd suggest is to always catch errors in your code.

Some tips:

1. Use a ton of try/catch blocks, especially - but not limited to - when dealing with APIs;
2. If you need to use querySelectorAll first check if the element exists, preferably by ID, if it doesn't, then just return. Example:

 

function getAll(){
const el = document.querySelector(`.llamas`);

if (!el){
return;
}

const els = document.querySelectorAll(`.llamas`);
}

 


3. If you just need to find a single element always try to stick with getElementById instead of querySelector . Finding by ID is always faster

I hope it helps and good luck!

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Needing urgent help? I am currently available for hire, same day response guaranteed: diego.boarutto.fortes@gmail.com
Highlighted
Tourist
5 0 0

would definitely take all your advice under consideration!

 

0 Likes
Highlighted
Tourist
5 0 0

verifying the element is present in the DOM is a good try-catch setup, will definitely use that one.

how about init function per page? Set up a init func for each template/page as needed, calling the init function of the page if the route match(or similar logic).
so if we are on the product page:

ezfy.prodcut.init = function(){

  // product page logic here

} 

 
I have seen this on many themes and it makes sense to me, keeps the logic organized by component/template/page - while calling only needed js logic per page.
your thoughts? any cons? seems to me that this setup covers the issues you've addressed in your comment.

thank you again for the help! it's a privilege to bounce ideas with you
Neria

0 Likes