Expected Result:

As the title says, I'm trying to get the custom hero section of my template to load, even when they are no articles for a tag.

Actual Result:

The behavior right now is intermittent. Some tags will load the hero but most won't.

Errors:

In the console on the ones that don't work I receive a 'GET 404' error and my 404 page loads. On the ones that are working I'm not getting any error.

The 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>

The 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 %}
    `

}