Développer un compteur : Cache / API REST
Bonjour à tous,
J’ai besoin de votre expertise sur WordPress.
Je possède une petite boutique en ligne et j’aimerais ajouter un compteur pour afficher le temps restant avant la fin de la promotion.
J’ai donc programmé un compteur en PHP en utilisant le timestamp de la fin de la promo et celui de l’heure du serveur (je ne voulais pas qu’il soit côté client).
Cela donnait brièvement (et de manière simplifiée) quelque chose comme ceci :
Code:
1
2
3
4
5
6
7
8
9
| <script>
var countPromo = parseInt("<?php echo $timestampPromo; ?>");
var nowInUTCMinus6 = parseInt("<?php echo $timestampNow; ?>");
var countdownfunction = setInterval(function () {
var timer = countPromo - nowInUTCMinus6;
document.getElementById("timer").innerHTML = timer;
nowInUTCMinus6 = nowInUTCMinus6 + 1;
}, 1000);
</script> |
Cela fonctionnait très bien, sauf que… le cache a fait son apparition.
La page était mise en cache avec les valeurs statiques, et du coup, quand l’utilisateur revenait sur la page, le cache prenait le relais, affichant non plus le compteur mis à jour, mais celui à la date de sa mise en cache.
Catastrophe ! D’autant plus que le cache joue un rôle important dans la performance de mon site, et je ne souhaite pas le désactiver.
J’ai donc décidé de revoir la conception de ce compteur.
Je me suis dit que la page produit pouvait être mise en cache, mais que je devais « externaliser » les valeurs du compteur.
J’ai donc créé une API qui retourne les deux timestamps pour un produit donné.
J’ai modifié le fichier functions.php en ajoutant ce code :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
add_action('rest_api_init', function () {
register_rest_route('custom/v1', '/counter/(?P<product_id>\d+)', array(
'methods' => 'GET',
'permission_callback' => '__return_true',
'callback' => function ($data) {
$product_id = $data['product_id'];
$date_expire = get_field('date_fin_promo', $product_id);
$date = new DateTime($date_expire);
$date->setTimezone(new DateTimeZone('UTC'));
$countDownDate = $date->getTimestamp();
$now = new DateTime('now', new DateTimeZone('UTC'));
$nowInUTCMinus6 = $now->getTimestamp();
return new WP_REST_Response([
'countDownDate' => $countDownDate,
'nowInUTCMinus6' => $nowInUTCMinus6,
], 200);
},
));
}); |
La page produit effectue donc un appel AJAX vers l’API pour récupérer les données.
Bien que je n’aie pas encore effectué beaucoup de tests, cela semble fonctionner correctement !
J’aimerais avoir votre avis : pensez-vous que ma conception est judicieuse, ou voyez-vous une meilleure approche ?
Egalement, je rencontre un problème : c’est que mon hébergeur bloque par défaut les appels aux API WordPress sans authentification (pour les utilisateurs non connectés). Je suis donc obligé de désactiver la protection WordPress de mon hébergeur (o2switch), car il n’y a pas d’option spécifique pour cela, afin que l’appel fonctionne.
Je suis un peu hésitant, car je me demande si cela pourrait ouvrir la « porte de Pandore »…
Merci pour vos retours !
