How do I handle 404'd GET requests manually to load blog tag view/template without articles?

Solved
rumleydev
Excursionist
21 4 1

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 without articles 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.

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>

 

 

 

Javascript&colon;

 

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

 

 

Accepted Solution (1)

Accepted Solutions
rumleydev
Excursionist
21 4 1

This is an accepted solution.

A simply workaround I implemented to solve this was to make a post on the blog with the title "Hidden Post" and hide any blog article with that title on the frontend. Kinda hacky, but it works.

View solution in original post

Reply 1 (1)
rumleydev
Excursionist
21 4 1

This is an accepted solution.

A simply workaround I implemented to solve this was to make a post on the blog with the title "Hidden Post" and hide any blog article with that title on the frontend. Kinda hacky, but it works.

View solution in original post