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