I have make a sample code using localstorage for adding item to car

var addToCartButtons = document.getElementsByClassName('cta')
for (var i = 0; i < addToCartButtons.length; i++) {
    var button = addToCartButtons[i]
    button.addEventListener('click', addToCartClicked)
}

// Add Item to cart
function addToCartClicked(event) {
    var button = event.target
    var showcaseItem = button.parentElement.parentElement
    var title = showcaseItem.getElementsByClassName('pp-title')[0].innerText
    var price = showcaseItem.getElementsByClassName('pp-price')[0].innerText
    var imgSrc = showcaseItem.getElementsByClassName('pp-img')[0].src
    console.log(title, price, imgSrc)
    addItemToCart(title, price, imgSrc)
}

function addItemToCart(title, price, imgSrc) {
    var cartRow = document.createElement('div')
    cartRow.innerText = title + price
    var cartItems = document.getElementsByClassName('all-cart-items')[0]
    cartItems.append(cartRow);

  
    var cart = JSON.parse(localStorage.getItem("cartItemsr"));
    if(cart != null && cart.length > 0){
      cart({title: title, price: price, img: imgSrc});
    }else{
      cart = [{title: title, price: price, img: imgSrc}];
    }

    localStorage.setItem("cartItemsr", JSON.stringify((cart));
}

To retire the items in another page

   var cart = JSON.parse(localStorage.getItem("cartItemsr"));
   if(cart != null && cart.length > 0){
     for (var i = 0; i < cart.length; i++) {
        console.log("row", cart[I].title, cart[I].price, cart[I].img)
     }
   }

Frankly, this demands for some state management libraries or server side rendering languages like PHP. Yes, you would definitely need to save cart info, in the server, so I am sure you would have thought of that. However, to answer to the point,
you can store all the products in localStorage by doing JSON.stringify and in the cart page listen to the storage event and then do JSON.parse and save the info.
Do the below in product page

const list = JSON.parse(localStorage.getItem('productList'));
   list.push(newItem)
   localStorage.setItem('productList',JSON.stringify(list));

Do the below in cart page

window.addEventListener('storage', () => {
  // When local storage changes, dump the list to
  // the console.
  console.log(JSON.parse(window.localStorage.getItem('productList')));
});

I’m trying to find out how to add a product to my cart once the ‘add to cart’ button is clicked, but since my cart and products are on separate html pages the console giving me this error

here is the JS for the product pages

    var addToCartButtons = document.getElementsByClassName('cta')
    for (var i = 0; i < addToCartButtons.length; i++) {
        var button = addToCartButtons[i]
        button.addEventListener('click', addToCartClicked)
    }

    // Add Item to cart
    function addToCartClicked(event) {
        var button = event.target
        var showcaseItem = button.parentElement.parentElement
        var title = showcaseItem.getElementsByClassName('pp-title')[0].innerText
        var price = showcaseItem.getElementsByClassName('pp-price')[0].innerText
        var imgSrc = showcaseItem.getElementsByClassName('pp-img')[0].src
        console.log(title, price, imgSrc)
        addItemToCart(title, price, imgSrc)
    }

    function addItemToCart(title, price, imgSrc) {
        var cartRow = document.createElement('div')
        cartRow.innerText = title + price
        var cartItems = document.getElementsByClassName('all-cart-items')[0]
        cartItems.append(cartRow)
    }

I believe it’s because the element with the class ‘all-cart-items’ is on the cart markup and not the product page but I don’t how to target that page with code. Would I need to use php?

I can also attach the html markups for both pages if necessary!