E_commerce

hola tengo un problema y es al tratar de clonar un contenido html para obtener los datos y poder agregarlos al localStore tengo este código js esta en un archivo llamado carrito.js y contiene este codigo

import { productoNuevo } from "./registrar.productos.js";


const botonCarrito = document.querySelector(".boton_compra");

export let carrito = []
// boton para agregar al carrito
if(botonCarrito){
    botonCarrito.addEventListener("click", (event) => {
        event.preventDefault();

        //Contenedor de imagen y descripcion de la seccion
        const contenedorSeccionArticulos = event.target.closest(".seccion__articulo");

        //Toda la descripcion del articulo
        const imagenArticulo = contenedorSeccionArticulos.querySelector(".imagen_articulo").src;
        const nombreArticulo = contenedorSeccionArticulos.querySelector(".articulo_nombre").textContent;
        const precioArticulo = contenedorSeccionArticulos.querySelector(".articulo_precio").textContent;
        const cantidadArticulo = 1;

        localStorage.setItem("nombre_articulo", nombreArticulo);
        localStorage.setItem("imagen_articulo", imagenArticulo);
        localStorage.setItem("precio_articulo", precioArticulo);
        localStorage.setItem("cantidad_articulo", cantidadArticulo);

        const articulos = {
            nombre: nombreArticulo,
            precio: precioArticulo,
            cantidad: cantidadArticulo,
            imagen: imagenArticulo
        }
        carrito.push(articulos)


        window.location.href = "carrito_compras.html";
        productoNuevo()

    });

}       

y luego tengo este otro código que es donde se redirige al hace click al evento del primer archivo.

<main class="contenido-carrito">
        <!-- Productos agregados al carrito -->
        <section id="ventana_carrito">
            <h1 class="carrito-titulo">Tú carrito de compras</h1>
        </section>
    
        <!-- Productos comprados -->
        <section id="ventana_carrito-compras">
            <h1 class="carrito-titulo-compras">Tus Adquisiciones</h1>
            <article class="carrito-articulos-compras">
                <div class="carrito-articulos-contenedor">
                    <div class="imagen-producto-comprado">
                        <img class="imagen_articulo" src="">
                    </div>
                    <div class="carrito-descripcion-compras">
                        <p class="nombre_articulo">nombre</p>
                        <i class="icono fa-solid fa-check"></i>
                    </div>
                </div>
            </article>
        </section>
    </main>

    <template id="template-compras">
        <article class="carrito-articulos">
            <div class="carrito-descripcion">
                <p class="carrito-nombre nombre_articulo">nombre articulo</p>
                <p class="carrito-precio precio_articulo">precio articulo</p>
            </div>
            <div class="carrito-cantidad">
                <p>Cantidad</p>
                <span class="cantidad_articulo">1</span>
            </div>
            <div class="carrito-botones">
                <button class="carrito-boton-comprar">Comprar</button>
                <button class="carrito-boton-quitar">Quitar</button>
            </div>
        </article>
    </template>

este archivo se llama registrar.productos.js y

import { carrito } from "./carrito.js";
const templateCompras = document.querySelector("#template-compras");
const carritoCompras = document.querySelector("#ventana_carrito");
const fragmentCompras = document.createDocumentFragment();


export const productoNuevo = () => {
    localStorage.setItem("articulos", JSON.stringify(carrito))
    carrito.forEach(item => {
        const clonarCompras = templateCompras.content.cloneNode(true);
        clonarCompras.querySelector(".nombre_articulo").textContent = item.nombre;
        clonarCompras.querySelector(".precio_articulo").textContent = item.precio;
        clonarCompras.querySelector(".cantidad_articulo").textContent = item.cantidad;
        clonarCompras.querySelector(".carrito-boton-comprar").dataset.id;
        clonarCompras.querySelector(".carrito-boton-quitar").dataset.id;
        fragmentCompras.appendChild(clonarCompras);
    })

    carritoCompras.appendChild(fragmentCompras);
}

necesito ayuda al dar click al evento de botonCarrito me da este error registrar.productos.js:10 Uncaught TypeError: Cannot read properties of null (reading 'content') at js/carrito/registrar.productos.js:10:47 at Array.forEach () at productoNuevo (js/carrito/registrar.productos.js:9:13) at HTMLButtonElement. (js/carrito/carrito.js:36:9) --------------- y no se me pinta el contenido de productoNuevo