Grid / list toggle met cookie

Voeg toe aan footer.php

Hiermee wordt er een cookie ingesteld op het moment dat er ?view=list of ?view=grid achter de URL staat. Ook moet ervoor een button worden aangemaakt met de “.grd” of de “.lst” klasse.

<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/latest/js.cookie.min.js" integrity="sha512-iewyUmLNmAZBOOtFnG+GlGeGudYzwDjE1SX3l9SWpGUs0qJTzdeVgGFeBeU7/BIyOZdDy6DpILikEBBvixqO9Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
	function getParameterByName(name) {
		name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
		var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
			results = regex.exec(location.search);
		return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
	}
	// Give the URL parameters variable names
	var gridlist = getParameterByName('view');
	var gridlistcookie = Cookies.get('gridlist');
	
	gridlistcookie = Cookies.get('gridlist');
	$('.btn-group').on('click', '.lst', function() {
		Cookies.set('gridlist', 'list');
		location.reload();
	});
	$('.btn-group').on('click', '.grd', function() {
		Cookies.set('gridlist', 'grid');
		location.reload();
	});
	</script>

Controleer of de cookie is gezet. Deze wordt ingeladen na pagina herladen.

<?php if($_COOKIE["gridlist"] == "list"):
// Doe wat als de cookie waarde op "list" staat
endif; ?>

<?php if($_COOKIE["gridlist"] == "grid"):
// Doe wat als de cookie waarde op "grid" staat
endif; ?>

#cookie #grid #grid/list #js cookie #list #toggle