Toggle blog view: Grid/Stacked

Shopify Partner
25 0 0

Hey Ryan,

 

I've got my blog looking how I want it, but encountered what I think is a relatively simple problem.

 

In "stacked" view, my pagination works perfectly.

However, when in "grid" view, my pagination reverts back to "stacked" view. 

How could I go about forcing or separating pagination to each respective view?

 

Thanks!

- Sean

0 Likes
Shopify Expert
196 0 23

Hi Sean,

I issue is you are loading up a new page of the blog when you click the pagination link. When the page loads it defaults to showing the stacked view. In order for this to work for the grid view you would need to place a reminder in the url so that your javascript and change over to grid view. 

Current you have this url when moving over to the second page

http://showsomepride.myshopify.com/blogs/news?page=2

You could change this url to something like this

http://showsomepride.myshopify.com/blogs/news?page=2&blog_view=grid

Now your javascript has something to use. You could change the script I provided you to this

(function($) {

  // Showing the Stacked Blog View and hiding Grid
  $("#showStackedBlogView").click(function(e) {
    e.preventDefault();
    $("#gridBlogView").hide();
    $("#stackedBlogView").fadeIn();
  });

  // Showing the Grid Blog View and hiding Stacked
  $("#showGridBlogView").click(function(e) {
    e.preventDefault();
    $("#stackedBlogView").hide();
    $("#gridBlogView").fadeIn(); 
  });

  function detectGridView() {
    if(location.search.indexOf('blog_view=grid') >= 0) {
      $("#showGridBlogView").trigger('click');
    }
  }

  detectGridView();

})(jQuery)

Hopefully there is not too big of a delay. We are basically reading the url and seeing if blog_view=grid​ is present. If so we are programmatically clicking on the show grid view link.

-Ryan

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Shopify Partner
25 0 0

Thanks Ryan!

 

I may be spacing on something very easy, but how would I go about changing the url?

- Sean

0 Likes
Shopify Expert
196 0 23

Hi Sean,

You need to find the pagination code for the grid view.

It should look somerhting like this

  <div id="pagination">
    
    {% if paginate.previous %}
    {{ '<' | link_to: paginate.previous.url }}
    {% endif %}
    {% for part in paginate.parts %}
    {% if part.is_link %}
    {{ part.title | link_to: part.url }}
    {% else %}
    {% if part.title == '&hellip;' %}
    {{ part.title }}
    {% else %}
    <span class="current">{{ part.title }}</span>
    {% endif %}
    {% endif %}
    {% endfor %}
    {% if paginate.next %}
    {{ '>' | link_to: paginate.next.url }}
    {% endif %}
  </div>

Find the link_to tags and change them to say this

{{ '>' | link_to: paginate.next.url | append: '&blog_view=grid'}}

Try that. I have not tested this so if it does not work let me know.

-Ryan

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Shopify Partner
25 0 0

Hi Ryan,

 

I believe I made the changes you suggested, but it's still having the issue.

Is it a problem that I am using one block of code for both layout views pagination?

 

Thanks!

- Sean

0 Likes
Shopify Expert
196 0 23

You could try this

{% assign size = paginate.next.url | split: '?' | size %}
{% if size > 1 %}
	{% assign link_url = some_url | append: '&blog_view=grid' %}
{% else %}
  {% assign link_url = some_url | append: '?blog_view=grid' %}
{% endif %}

{{ '>' | link_to: link_url }}

 

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Shopify Partner
25 0 0

If I did this correctly, it still has the same issue.

<div id="pagination">
    
    {% if paginate.previous %}
    {{ '<' | link_to: paginate.previous.url }}
    {% endif %}
    {% for part in paginate.parts %}
    {% if part.is_link %}
    {{ part.title | link_to: part.url }}
    {% else %}
    {% if part.title == '&hellip;' %}
    {{ part.title }}
    {% else %}
    <span class="current">{{ part.title }}</span>
    {% endif %}
    {% endif %}
    {% endfor %}
    {% if paginate.next %}
    {{ '>' | link_to: paginate.next.url }}
    {% endif %}

{% assign size = paginate.next.url | split: '?' | size %}
{% if size > 1 %}
  {% assign link_url = some_url | append: '&blog_view=grid' %}
{% else %}
  {% assign link_url = some_url | append: '?blog_view=grid' %}
{% endif %}




  </div>
  
  {% endpaginate %}


</div>

 

 

Thanks!

- Sean

0 Likes
Shopify Partner
25 0 0

Any idea how I might be able to fix this?

 

Thanks in advance!

- Sean

 

0 Likes
Highlighted
Shopify Expert
196 0 23

Sorry I got busy. Some things are out of order. Try this:

<div id="pagination">
    
    {% if paginate.previous %}
      {% assign size = paginate.previous.url | split: '?' | size %}
      {% if size > 1 %}
        {% assign link_url = paginate.previous.url | append: '&blog_view=grid' %}
      {% else %}
      {% assign link_url = paginate.previous.url | append: '?blog_view=grid' %}
      {{ '<' | link_to: link_url }}
    {% endif %}
    {% for part in paginate.parts %}
    {% if part.is_link %}
      {% assign size = part.url | split: '?' | size %}
      {% if size > 1 %}
        {% assign link_url = part.url | append: '&blog_view=grid' %}
      {% else %}
      {% assign link_url = part.url | append: '?blog_view=grid' %}
      {{ part.title | link_to: link_url }}
    {% else %}
    {% if part.title == '&hellip;' %}
    {{ part.title }}
    {% else %}
    <span class="current">{{ part.title }}</span>
    {% endif %}
    {% endif %}
    {% endfor %}
    {% if paginate.next %}
      {% assign size = paginate.next.url | split: '?' | size %}
      {% if size > 1 %}
        {% assign link_url = paginate.next.url | append: '&blog_view=grid' %}
      {% else %}
      {% assign link_url = paginate.next.url | append: '?blog_view=grid' %}
    {% endif %}
    {{ '>' | link_to: link_url }}
    {% endif %}
  </div>
  
  {% endpaginate %}


</div>

Hopefully that works. 

 

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Shopify Partner
25 0 0

No problem at all, I completely understand.

 

I tried your code but recieved this error while uploading:

 

 

Thanks, Ryan!

0 Likes