I wrote some custom code to paginate based on screen width. It worked for months but I went it to make some minor changes and it broke, empty div. Tried to revert to an earlier saved version with no luck. Here’s my code:
The script:
let screenWidth = window.innerWidth;
let articleSection = document.getElementById('article-index-card-section');
if (screenWidth < 600) {
articleSection.innerHTML = `
{% paginate blog.articles by 3 %}
{% for article in blog.articles %}
{% for tag in article.tags %}
- {{ tag }}
{% endfor %}
{% render 'img-srcset',
image: article.image,
max_width: 500,
alt: article.title | escape %}
#### {{ article.title }}
{{ article.excerpt }}
{% assign author_por = article.metafields.airf.author_por %}
{% assign author_nam = article.metafields.airf.author_nam %}
{% if author_nam and author_nam != ' ' %}
{% if author_por and author_por != ' ' %}
{% endif %}
{{ author_nam }}
{% endif %}
{% endfor %}
{%- if paginate.pages > 1 -%}
{%- endif -%}
{%- endpaginate -%}
`
} else if (screenWidth >= 600) {
articleSection.innerHTML = `
{% paginate blog.articles by 6 %}
{% for article in blog.articles %}
{% for tag in article.tags %}
- {{ tag }}
{% endfor %}
{% render 'img-srcset',
image: article.image,
max_width: 500,
alt: article.title | escape %}
#### {{ article.title }}
{{ article.excerpt }}
{% assign author_por = article.metafields.airf.author_por %}
{% assign author_nam = article.metafields.airf.author_nam %}
{% if author_nam and author_nam != ' ' %}
{% if author_por and author_por != ' ' %}
{% endif %}
{{ author_nam }}
{% endif %}
{% endfor %}
{%- if paginate.pages > 1 -%}
{%- endif -%}
{%- endpaginate -%}
`
}
And this is what I’m getting in the Inspect tool:
Like I said it was working before and I reverted to an older version so I’m really confused.