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

 

 

0 Likes
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.

0 Likes