In dit artikel beschrijf ik hoe je een versie van je Joomla! website kunt maken die veel minder prikkels oplevert voor mensen die daar gevoelig voor zijn.
Een tijd geleden kregen we de opdracht om voor De Berkenschutse een nieuwe website te ontwikkelen. Een bijzonder aspect in de opdracht was dat de website ook in een prikkelarme versie getoond kan worden en dat de bezoeker makkelijk zou kunnen wisselen tussen de standaard website en de prikkelarme versie.
We hebben de website gebouwd in Joomla! en de techniek voor het wisselen tussen de normale versie en de prikkelarme versie hebben we volledig in template opgenomen. In dit blogartikel leg ik je uit hoe dat is gebouwd.
Gebruik de schuifbalk om het verschil te zien tussen de normale en de prikkelarme versie.
De strategie die is toegepast om de normale versie en de prikkelarme versie van de website te tonen bestaat uit twee onderdelen:
- De vormgeving van de normale en de prikkelarme versie van de website is vastgelegd in twee CSS-bestanden. Een CSS-bestand voor de normale versie en een CSS-bestand voor de prikkelarme versie.
- Er wordt een cookie op de computer van de bezoeker geplaatst als die de prikkelarme versie wil bekijken. Omdat het hier om een functionele cookie gaat, hoeft de bezoeker geen toestemming te worden gevraagd in het kader van de cookiewet.
Als je er van uit gaat dat de computer van de bezoeker de cookie wel of niet bevat, kan de volgende test worden gedaan in de template:
- Controleer of de prikkelarm cookie is gezet.
- Zo ja:
- Laad het CSS-bestand voor de prikkelarme versie. De website wordt getoond in de prikkelarme versie.
- Toon een knop om te wisselen naar de normale versie.
- Zo nee:
- Laad het CSS-bestand voor de normale versie. De website wordt in de normale versie getoond.
- Toon een knop om te wisselen naar de prikkelarme versie.
Voor de website is de vormgeving van de prikkelarme versie vastgelegd in het CSS-bestand prikkelarm.css en de vormgeving van de normale versie in het CSS-bestand normaal.css.
In de prikkelarme versie is alle kleur vervangen door grijstinten. Voor afbeeldingen is een filter toegepast om ook die in grijstinten te tonen.
img {
filter: gray;
filter: grayscale(100%);
}
img:hover {
filter: none;
}
De kleur van afbeeldingen komt overigens wel terug als er met de muis over gehovered wordt.
Het testen of de prikkelarm cookie is gezet en het laden van het juiste CSS-bestand gaat in PHP-code als volgt:
<?php // check prikkelarm cookie
$prikkelarm = (isset($_COOKIE['site_prikkelarm'])) ? true : false;
if ($prikkelarm) : ?>
<link rel="stylesheet" href="/templates/jouwtemplate/css/prikkelarm.css" type="text/css" />
<?php else : ?>
<link rel="stylesheet" href="/templates/jouwtemplate/css/normaal.css" type="text/css" />
<?php endif; ?>
Plaats deze code in de index.php van je template op de plaats waar je normaal gesproken het CSS-bestand laadt. In regel 2 van de code wordt het resultaat van de test of de cookie bestaat in de variabele $prikkelarm bewaard omdat dat later nog nodig is om de juiste knop te tonen.
In regels 3-4 wordt prikkelarm.css geladen als de cookie bestaat en in regels 5-6 wordt normaal.css geladen als de cookie niet bestaat.
Voor het plaatsen van de knop waarmee gewisseld kan worden tussen de normale versie en de prikkelarme versie gebruik je het volgende stukje code in je template:
<div class="prikkelarm">
<?php if ($prikkelarm) : ?>
<a id="standaard" href="#">Standaard versie</a>
<?php else : ?>
<a id="prikkelarm" href="#">Prikkelarme versie</a>
<?php endif; ?>
</div>
De PHP variabele $prikkelarm bevat de waarde TRUE of FALSE om aan te geven of de prikkerarm cookie is gezet. Als de cookie bestaat ($prikkelarm is TRUE) wordt de link getoond om terug te wisselen naar de normale versie (regels 2-3) en als de cookie niet bestaat ($prikkelarm is FALSE) wordt de link getoond om te wisselen naar de prikkelarme versie (regels 4-5).
Met wat CSS code kan de link gestijld worden als bijvoorbeeld een link of als een knop. Voor De Berkenschutse wordt de link getoond als knop. Plaats deze code op een logische plek in je template, bijvoorbeeld in de header of in de linker kolom, zodat de bezoeker makkelijk de knop kan vinden om te wisselen tussen de normale versie en de prikkelarme versie.
Als laatste moet nog wat code in de template worden geplaatst die de prikkelarm cookie zet of verwijderd, afhankelijk van op welke link wordt geklikt. Het afhandelen van dat click event wordt gedaan met jQuery. Het plaatsen en verwijderen van de cookie wordt gedaan met de jQuery library js-cookie. Deze library vind je op Github: https://github.com/js-cookie/js-cookie. Omdat het een jQuery library betreft én de afhandeling van de click wordt gedaan met jQuery moet je template wel jQuery geladen hebben. Zorg er ook voor dat in je template in de <HEAD> de jQuery js-cookie library wordt geladen:
<script src="/templates/jouwtemplate/js/js.cookie.js"></script>
In bovenstaand voorbeeld heb ik de js-cookie library in de map js geplaatst van de template. Dit is de code voor de afhandeling van de click op de link:
<script type="text/javascript">
jQuery(document).ready(function ($) {
$("#prikkelarm").click(function() {
Cookies.set('site_prikkelarm', 'yes', { expires: 365 });
window.location.reload();
});
$("#standaard").click(function() {
Cookies.remove('site_prikkelarm');
window.location.reload();
});
});
</script>
Deze code plaats je onderin je template voor de </body> tag. Op regel 3 wordt getest of de link wordt geklikt die de prikkelarme versie moet tonen. Als dat het geval is wordt de cookie site_prikkelarm gezet met de waarde yes een levensduur van 365 dagen. Vervolgens wordt de pagina ververst.
Op regel 7 wordt getest of de link wordt geklikt die de normale versie moet tonen. Als dat het geval is wordt de cookie verwijderd en de pagina wordt ververst.
De truc zit 'm in het feit dat de pagina na het plaatsen of verwijderen van de cookie wordt ververst. Op basis van de code die we eerder hebben toegevoegd wordt dan het juiste CSS-bestand geladen en de juiste link getoond.
Bekijk het eindresultaat op de website van De Berkenschutse.
Heb je vragen of opmerkingen? Zou jij het anders doen? Laat je reactie hieronder weten.