Afficher des produits associés sur la fiche produit PrestaShop

Lorsqu'un visiteur consulte une fiche produit, lui proposer des articles complémentaires ou issus de la même catégorie est un levier de conversion redoutable. PrestaShop offre plusieurs mécanismes natifs pour y parvenir, mais certains cas d'usage exigent un développement sur mesure. Voici un tour d'horizon complet des solutions disponibles.

La fonctionnalité native « Accessoires »

Avant de se lancer dans du code, il faut connaître la fonctionnalité Accessoires intégrée nativement dans PrestaShop. Elle permet d'associer manuellement des produits entre eux depuis le back-office.

Configuration dans le back-office

1. Rendez-vous dans **Catalogue > Produits** et éditez le produit concerné.
2. Dans l'onglet **Associations** (PrestaShop 8.x) ou **Accessoires** (versions antérieures), recherchez les produits à associer.
3. Sélectionnez-les et sauvegardez.

Les produits associés s'affichent automatiquement sur la fiche produit, dans un bloc dédié piloté par le template product-accessories.tpl (PrestaShop 1.6) ou le composant correspondant dans le thème (1.7 / 8.x).

Quand cette solution suffit

• Vous avez un catalogue de taille modeste (moins de 500 produits).
• Les associations sont stables et ne changent pas souvent.
• Vous souhaitez un contrôle éditorial précis sur chaque association.

Quand elle montre ses limites

• Catalogue volumineux avec des milliers de références.
• Besoin d'afficher automatiquement les produits d'une catégorie spécifique.
• Logique de cross-selling dynamique basée sur des règles métier.

Développer un module d'affichage personnalisé

Pour des besoins plus avancés — par exemple afficher automatiquement tous les produits d'une catégorie donnée sur chaque fiche produit —, la solution la plus propre consiste à développer un module dédié.

Approche rapide : dupliquer et adapter un module existant

Sur PrestaShop 1.6, le module homefeatured (devenu ps_featuredproducts sur 1.7+) constitue une base de départ intéressante. L'idée est de :

1. **Dupliquer le module** en le renommant (par exemple `myrelatedproducts`).
2. **Modifier la requête SQL** pour filtrer les produits par catégorie.
3. **Hooker le module sur la fiche produit** au lieu de la page d'accueil.

Cette approche « bricolage » fonctionne, mais elle génère une dette technique importante. Privilégiez un module propre.

Approche recommandée : module dédié

Voici la structure d'un module PrestaShop 8.x pour afficher les produits d'une catégorie sur la fiche produit :

<?php
// modules/myrelatedproducts/myrelatedproducts.php

use PrestaShop\PrestaShop\Adapter\Presenter\Product\ProductPresenter;

class MyRelatedProducts extends Module
{
    public function __construct()
    {
        $this->name = 'myrelatedproducts';
        $this->version = '1.0.0';
        $this->author = 'Alexandre Carette';
        $this->tab = 'front_office_features';
        $this->need_instance = 0;

        parent::__construct();

        $this->displayName = $this->l('Produits associés par catégorie');
        $this->description = $this->l('Affiche les produits de la même catégorie sur la fiche produit.');
    }

    public function install()
    {
        return parent::install()
            && $this->registerHook('displayFooterProduct')
            && $this->registerHook('displayProductAdditionalInfo');
    }

    public function hookDisplayFooterProduct($params)
    {
        $product = new Product((int) $params['product']->id);
        $categoryId = (int) $product->id_category_default;

        $relatedProducts = $this->getProductsByCategory(
            $categoryId,
            (int) $product->id,
            8
        );

        $this->context->smarty->assign([
            'related_products' => $relatedProducts,
            'category_name' => (new Category($categoryId, $this->context->language->id))->name,
        ]);

        return $this->display(__FILE__, 'views/templates/hook/related.tpl');
    }

    private function getProductsByCategory(int $categoryId, int $excludeId, int $limit): array
    {
        $sql = new DbQuery();
        $sql->select('p.id_product');
        $sql->from('product', 'p');
        $sql->innerJoin('category_product', 'cp', 'cp.id_product = p.id_product');
        $sql->where('cp.id_category = ' . $categoryId);
        $sql->where('p.id_product != ' . $excludeId);
        $sql->where('p.active = 1');
        $sql->orderBy('RAND()');
        $sql->limit($limit);

        $results = Db::getInstance()->executeS($sql);

        if (!$results) {
            return [];
        }

        $assembler = new ProductAssembler($this->context);
        $presenterFactory = new ProductPresenterFactory($this->context);
        $presenter = $presenterFactory->getPresenter();
        $presentationSettings = $presenterFactory->getPresentationSettings();

        $products = [];
        foreach ($results as $row) {
            $products[] = $presenter->present(
                $presentationSettings,
                $assembler->assembleProduct(['id_product' => $row['id_product']]),
                $this->context->language
            );
        }

        return $products;
    }
}

Le template Smarty associé

{* views/templates/hook/related.tpl *}
{if $related_products|count > 0}
<section class="related-products">
    <h2>{l s='Autres produits dans' mod='myrelatedproducts'} {$category_name}</h2>
    <div class="products row">
        {foreach from=$related_products item=product}
            {include file="catalog/_partials/miniatures/product.tpl" product=$product}
        {/foreach}
    </div>
</section>
{/if}

Les hooks disponibles sur la fiche produit

Le choix du hook détermine l'emplacement du bloc. Voici les principaux hooks disponibles sur la fiche produit :

HookPositionUsage recommandé `displayFooterProduct`Sous la descriptionProduits complémentaires `displayProductAdditionalInfo`Près du bouton d'ajoutAccessoires directs `displayRightColumnProduct`Colonne droiteSuggestions discrètes `displayProductExtraContent`Onglet supplémentaireContenu détaillé

Sur PrestaShop 8.x, le système de hooks est identique mais le rendu passe par le thème classic (ou votre thème custom) qui utilise des templates Smarty restructurés.

Déboguer l'affichage des variables produit

Si vos produits associés ne s'affichent pas, la première étape de diagnostic consiste à vérifier les variables disponibles dans le template.

Activer le mode debug Smarty

Dans le back-office, activez le mode debug via Paramètres avancés > Performances > Mode debug (ou ajoutez _PS_MODE_DEV_ à true dans config/defines.inc.php).

Ensuite, dans votre template, inspectez les variables disponibles :

{debug}

Ou pour une variable spécifique :

{$related_products|print_r}

Utiliser la console du navigateur

Sur PrestaShop 1.7+, ouvrez la console JavaScript de votre navigateur. En mode debug, PrestaShop expose certaines données produit dans l'objet prestashop global :

console.log(prestashop.product);

Bonnes pratiques de cross-selling

• **Limitez le nombre de suggestions** : 4 à 8 produits maximum pour ne pas diluer l'attention.
• **Privilégiez la pertinence** : les produits de la même catégorie ne sont pas toujours les plus pertinents. Combinez catégorie + attributs communs si possible.
• **Mesurez l'impact** : suivez le taux de clic sur les produits associés via Google Analytics ou un outil équivalent.
• **Cachez les résultats** : la requête `ORDER BY RAND()` est coûteuse sur de gros catalogues. Utilisez un cache module ou le cache Smarty.
• **Responsive** : assurez-vous que la grille de produits associés s'adapte correctement sur mobile (2 colonnes) et desktop (4 colonnes).