Liquid, JavaScript, themes, sales channels
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?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024