Estoy tratando de agregar un botón al mini carrito de wordpress elementor cuando está vacío. Para hacer esto, pensé que usaría una promesa de esperar a que se cargue el elemento y luego insertar un código html adyacente para mostrar el botón.

Ambas partes parecen funcionar por separado al devolver una promesa y luego insertar el elemento. Sin embargo, cuando trabajan juntos, ¿no aparece ningún elemento? ¿Alguna idea sobre cómo depurar esto? Qué tener en cuenta. ¿Cómo puedo monitorear el orden de cada cosa que se dispara para asegurarme de que esté sucediendo en el orden correcto?

Aquí está el código que tengo a continuación: Es un fragmento para wordpress.

 <script> const checkElement = async selector => { while ( document.querySelector(selector) === null) { await new Promise( resolve => requestAnimationFrame(resolve) ) } return document.querySelector(selector); }; checkElement('.woocommerce-mini-cart__empty-message').then((selector) => { var message = ` <div style="margin-top:2rem" class="elementor-button-wrapper"> <a href="/toilets" class="elementor-button-link elementor-button elementor-size-sm"> <span class="class="elementor-button-content-wrapper"> <span class="elementor-button-text">View our products</span> </span> </a> </div>`; selector.insertAdjacentHTML('afterend', message); console.log(selector); }); </script> <?php } );

La página en cuestión es https://staging-woowoowaterlesstoilets.kinsta.cloud/ si hace clic en la cesta cuando no hay nada allí, debería aparecer un botón. Estaba funcionando antes, pero después de actualizar algunos complementos y wordpress, dejó de funcionar.