Carrinho de compras

Opa galera tudo beleza? Estou desenvolvendo um pequeno e-commerce de camisas. Enquanto fazia o carrinho de compras topei com um problema como posso mostrar os produtos no carrinho e como mostrar assim que for inserirdo um novo produto ? Fiz algumas buscas mas nenhuma me ajudou realmente.

Carrinho de compras:

<!-- ==================================== CARRINHO DE COMPRAS =================================== -->

    <div class="offcanvas offcanvas-end areaShoppingCart" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">

      <div class="offcanvas-header">

        <h4 class="offcanvas-title fw-bold" id="offcanvasNavbarLabel"><i class="bi bi-cart4"></i> Carrinho de Compras

        </h4>

        <button type="button" class="text-reset closeAreaShoppingCart" data-bs-dismiss="offcanvas" aria-label="Close"><i class="bi bi-x"></i></button>

      </div>

      <span data-bs-toggle="modal" data-bs-target="#leiaimportante" class="link_text">Leia Importante <i class="bi bi-info-circle"></i></span>

      <hr />

      <div class="offcanvas-body cart_body">

    <!--     <div class="product_content">

          <div class="trash_icon"><a href="#" class="link_text"><i class='bx bx-trash ' title="Excluir do carrinho"></i></a></div>

          <a href="" class="container_card_product">

            <div class="d-flex">

              <div class="cart_img_product">

                <img src="../assets/images/camisas/257139328_126851229744515_2923407250030929456_n.webp.jpg" alt="">

              </div>

              <div class="cart_info_product">

                <div class="cart_name_product">Camisa do Paris San-German Branca</div>

                <div class="cart_price_product">Preço: 120,00</div>

              </div>

            </div>

          </a>

          <hr />

        </div> -->

      </div>

    </div>

	 

	JS:

let cartShirt = [];

let btn = document.querySelector(".btnShoppingCart");

let idShirt = btn.getAttribute('data-product-id')

let nameShirt = document.querySelector(".name_shirt").innerText;

let priceShirt = document.querySelector(".price_shirt").innerText;

let symbol_shirt = document.querySelector(".symbol_shirt").getAttribute('src');

let urlShirt = window.location.href;

let infoShirts = {

   "id": idShirt,

   "name": nameShirt,

   "price": priceShirt,

   "img": symbol_shirt,

   "url": urlShirt,

}

jsonShirt = JSON.stringify(infoShirts);

let productsInCart = JSON.stringify(localStorage.getItem("futprime_cart"));

btn.addEventListener('click', () => {

   if (productsInCart == '') {

      cartShirt.push(jsonShirt);

      localStorage.setItem('futprime_cart', cartShirt)

   }else{

      let obj = productsInCart.concat(jsonShirt);

      cartShirt.push(obj.replace(/[\\"]/g, ''))

      /* console.log(cartShirt); */

      localStorage.setItem('futprime_cart', cartShirt);

      /* console.log(localStorage.getItem('futprime_cart')); */

   }

   insertInCartHTML();

});

console.log(localStorage.getItem('futprime_cart'));

/ localStorage.clear(); /

function insertInCartHTML(){

   

}