Cheatsheet

Afficher les produits vus récemment

Laisser un commentaire

En plus des produits recommandés, il est courant de montrer aux internautes les produits qu’ils ont vu récemment. Ce n’est pas une fonctionnalité offerte nativement par WooCommerce, mais on peut facilement la mettre en place.

Dans un premier temps, on place dans un cookie les produits que l’internaute consulte. On pourrait le stocker ailleurs, dans une session par exemple, mais le cookie dure plus longtemps et n’impacte en rien les performances serveur.

Le fait que ce soit stocké dans un cookie signifie que l’internaute ne verra ses produits consultés que depuis un appareil donné, même s’il est connecté à son compte. On pourrait si l’on souhaite offrir cette suggestion cross-device, stocker ces données en tant que user_meta.

// On place les produits vus dans un cookie
add_action('template_redirect', function () {
    if (!is_singular('product')) return;
    global $post;

    if (empty($_COOKIE['woocommerce_recently_viewed'])) $viewed_products = [];
    else $viewed_products = (array) explode('|', $_COOKIE['woocommerce_recently_viewed']);

    if (!in_array($post->ID, $viewed_products)) array_push($viewed_products, $post->ID);

    // On ne conserve ici que 4 produits, vous définissez le nombre qui vous convient
    if (sizeof($viewed_products) > 4) array_shift($viewed_products);

    // On conserve le cookie un mois
    wc_setcookie('woocommerce_recently_viewed', implode('|', $viewed_products), time() + 2678400, '/');
}, 20);

Ensuite, on récupère les données du cookie et on les affiche dans un template.

<?php
global $product;
$recently_viewed = !empty($_COOKIE['woocommerce_recently_viewed']) ? (array) explode('|', wp_unslash($_COOKIE['woocommerce_recently_viewed'])) : [];
$recently_viewed = array_reverse(array_filter(array_map('absint', $recently_viewed)));
?>

<section class="recently-viewed products">
    <h1><?= __('recently viewed', 'steroids') ?></h1>

    <ul>
        <?php foreach ($recently_viewed as $id) : ?>
            <li>
                <a href="<?= get_permalink($id) ?>">
                    <img src="<?= wp_get_attachment_image_src(get_post_thumbnail_id($id), 'woocommerce_thumbnail')[0] ?>">
                </a>
            </li>
        <?php endforeach; ?>
    </ul>
</section>

Si vous utilisez ce template directement dans vos fiches produits, alors elles ne seront pas éligibles au cache de page. Vous pouvez cependant appeler ce template en AJAX afin de charger ces suggestions de manière asynchrone.

Commentaires

Rejoignez la discussion !

Vous pouvez utiliser Markdown pour les liens [ancre de lien](url), la mise en *italique* et en **gras**. Enfin pour le code, vous pouvez utiliser la syntaxe `inline` et la syntaxe bloc

```
ceci est un bloc
de code
```