How to display the rest of the blog posts with "View all" button

[Zuzana29]

Hi all,

I am trying to display our blog posts on a page. The number of blog posts can be set in the theme customizer. This part works well. But then I would like to add a "View all" button that loads the rest of the blogposts we have - all of them - on the same page. 

Right now, the "View all" button redirects me to a new page with blogposts.

Click to expand...

<h1>{{ section.settings.title | escape }}</h1>

{%- assign blog = blogs[section.settings.blog] -%}

{%- if blog.articles_count > 0 -%}
  <ul>

    {%- for article in blog.articles limit: section.settings.post_limit -%}
      <li>
        <a href="{{ article.url }}">
          {%- if article.image -%}
            {{ article | img_url: '150x150', scale: 2 | img_tag: '' }}
          {%- endif -%}
          <h2>{{ article.title }}</h2>
        </a>

        {%- if section.settings.blog_show_author -%}
          <span>
            By {{ article.author }}
          </span>
        {%- endif -%}

        {%- if section.settings.blog_show_date -%}
          <span>
            {{ article.published_at | time_tag: format: 'month_day_year' }}
          </span>
        {%- endif -%}

        {%- if article.excerpt.size > 0 -%}
          {{ article.excerpt }}
        {%- else -%}
          {{ article.content | strip_html | truncate: 150 }}
        {%- endif -%}

        {%- if article.tags.size > 0 -%}
          <ul aria-label="{{ 'blogs.article.tags' }}">
          {%- for tag in article.tags -%}
            <li>
              <a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a>
            </li>
          {%- endfor -%}
          </ul>
        {%- endif -%}

        <ul>
          <li>
            <a href="{{ article.url }}" aria-label="Read more: {{ article.title }}">
              Read more
            </a>
          </li>

          {%- if blog.comments_enabled? and article.comments_count > 0 -%}
            <li>
              <a href="{{ article.url }}#comments">
                {{ article.comments_count }} comments
              </a>
            </li>
          {%- endif -%}

        </ul>
      </li>
    {%- endfor -%}

  </ul>
{%- endif -%}

{%- if section.settings.show_view_all -%}
  <a href="{{ blog.url }}"
    class="btn"
    aria-label="{{ 'blogs.article.view_all_blogs' }}">
    VIEW ALL
  </a>
{%- endif -%}

{% schema %}
{
  "name": "Blog posts",
  "class": "index-section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Blog posts"
    },
    {
      "id": "blog",
      "type": "blog",
      "label": "Blog"
    },
    {
      "type": "range",
      "id": "post_limit",
      "label": "Posts",
      "min": 3,
      "max": 12,
      "step": 1,
      "default": 3
    },
    {
      "type": "checkbox",
      "id": "blog_show_author",
      "label": "Show author",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "blog_show_date",
      "label": "Show date",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "label": "Show 'View all' button",
      "default": false
    }
  ],
  "presets": [
    {
      "name": "Blog posts",
      "category": "Blog",
      "settings": {
        "blog": "News",
        "post_limit": 3
      }
    }
  ]
}
{% endschema %}

Can anyone help?

Thank you!