Sklep, modules, Javascript

Question

Dzień dobry,

Pobieram dane z API, które jak wiadomo wyświetlają mi sie na stronie po kliknięciu na dany produkt, chce żeby odrazu przekierowywało mnie na postrone product details danego elementu i wyświetlało mi własnie ten dany element. Jak to zrobić ? Prosiłbym o nakierowanie :) 

const getProducts = async () => {
    const response = await fetch('https://fakestoreapi.com/products');
    const products = await response.json();


    return products;
};



const showData = async () => {
    let products = [];
    const allProducts = document.querySelector('.all_products');
    try {
        products = await getProducts();
    } catch (e) {
        console.log(e)
    }
    products.forEach((product) => {
        allProducts.innerHTML += `
        <div class="all_products--item" data-id="${product.id}">
        <div class="item_img--container">
        <img src="${product.image}">
        </div>
        <p>${product.title}</p>
        <p>Price: ${product.price}$</p>
        </div>`
    })
    console.log(products);
    const popularItems = document.querySelectorAll('.all_products--item');

    const selectedItem = (e) => {
       let itemID = e.target.getAttribute("data-id");
       window.location.href = `/product-details.html`;
       console.log(itemID)
    }

    popularItems.forEach((item) => item.addEventListener('click', selectedItem));
} 

 

Następna sprawa dotyczy modułów, chciałbym, żeby każda podstrona miala osobny plik js i np :

jeśli mam funkcje odpowiedzialną za otweiranie i zamykanie mobilnej nawigacji chce ją wyeksportować do każdego pliku, i wiadomo, że nawigacja bedzie sie znajdowala na każdej  podstronie. Co z elementami, którycn nie ma na każdej podstronie i nie chce, aby były eksportowane na podstrony ? bo wtedy wychodzą błedy w konsoli ? np ze dany elemnt zwaraca null ? wiem, że nie ma go w DOM tej podstrony, więc taki bład bedzie wyrzucac, ale eksportuje z index.js inny element, czemu tak jest ? 

 products.forEach((product) => {
        allProducts.innerHTML += `
        <div class="all_products--item" data-id="${product.id}">
        <div class="item_img--container">
        <img src="${product.image}">
        </div>
        <p>${product.title}</p>
        <p>Price: ${product.price}$</p>
        </div>`
    })

z tym kodem sie tak dzieje, na podstronie mam tylko nawigacje i do pliku js importuje tylko funckje odpowiedzialna za mobilna nawigacje i wyświetla mi błedy w konsoli dotyczące tej funkcji. Mam nadzieje, że jest to w miare zrozumiałe, jeśli nie to postaram sie jeszcze raz to opisać. Miłego dnia :)