Inability to switch back from list view to grid view Supply Theme

IvanTodorov
New Member
4 0 0

Hey all, 


I have set up the grind & list view option on the supply theme but for some reason, I am not able to switch back from list view to grid view whenever the list view is selected. 

 

<div class="collection-view">
  <a title="Grid view" class="change-view{% if section.settings.grid %} collection-view--active{% endif %}" data-view="grid">
    <span class="icon icon-collection-view-grid"></span>
  </a>
  <a title="List view" class="change-view{% if section.settings.num_products %} collection-view--active{% endif %}" data-view="list">
    <span class="icon icon-collection-view-list"></span>
  </a>
</div>

 

And this is the js on the collection-view snippet. 

 

<script>
  function replaceUrlParam(url, paramName, paramValue) {
    var pattern = new RegExp('('+paramName+'=).*?(&|$)'),
        newUrl = url.replace(pattern,'$1' + paramValue + '$2');
    if ( newUrl == url ) {
      newUrl = newUrl + (newUrl.indexOf('?')>0 ? '&' : '?') + paramName + '=' + paramValue;
    }
    return newUrl;
  }

  $(function() {
    $('.change-view').on('click', function() {
      var view = $(this).data('view'),
          url = document.URL,
          hasParams = url.indexOf('?') > -1;

      if (hasParams) {
        window.location = replaceUrlParam(url, 'view', view);
      } else {
        window.location = url + '?view=' + view;
      }
    });
  });
</script>

What can I do to allow "on click" switching back and forward between the views?  

0 Likes