Resultado Esperado:

Como dice el título, estoy tratando de cargar la sección de héroe personalizado de mi plantilla, incluso cuando no hay artículos para una etiqueta.

Resultado actual:

El comportamiento en este momento es intermitente. Algunas etiquetas cargarán al héroe, pero la mayoría no.

Errores:

En la consola en los que no funcionan, recibo un error 'GET 404' y se carga mi página 404. En los que están funcionando no recibo ningún error.

El HTML:

 <div id="blog-hero"> <!-- blog hero goes here --> </div> <div id="article-index-background"> <div id="article-section" class="width g-flex"> <!-- paginate articles here --> </div> </div>

El JS:

 // get the hero const pathName = window.location.pathname; let blog_div = document.getElementById('blog-hero'); let blogName = pathName.split('/')[2]; let tagName = pathName.split('/')[4]; let request = new XMLHttpRequest(); request.open('GET', `/?section_id=blog--hero-${blogName}-blog--${tagName}`) request.onload = () => { if(request.readyState === request.DONE) { if (request.status === 200) { blog_div.innerHTML = request.responseText; } } }; request.send(null); // load the articles, paginate on screen width let screenWidth = window.innerWidth; let articleSection = document.getElementById('article-section'); if (screenWidth < 600) { articleSection.innerHTML = ` {% if blog.articles %} {% paginate blog.articles by 3 %} {% for article in blog.articles %} // some html {% endfor %} {% endpaginate %} {% endif %} ` } else if (screenWidth >= 600) { articleSection.innerHTML = ` {% if blog.articles %} {% paginate blog.articles by 6 %} {% for article in blog.articles %} // some html {% endfor %} {% endpaginate %} {% endif %} ` }