Corriger l'affichage du module Mondial Relay sur PrestaShop

Introduction

Mondial Relay est l'un des transporteurs les plus utilisés en France, et son module PrestaShop est installé sur des milliers de boutiques. Pourtant, les problèmes d'affichage de la carte de sélection des points relais reviennent régulièrement : widget tronqué, point relais sélectionné invisible, carte qui ne s'affiche tout simplement pas.

Ces dysfonctionnements proviennent généralement de deux sources distinctes : des conflits CSS entre le thème et le module, et des erreurs JavaScript causées par d'autres modules de paiement ou de checkout. Voyons comment diagnostiquer et corriger chacun de ces cas.

Diagnostic : identifier la source du problème

Avant de modifier quoi que ce soit, ouvrez les DevTools de votre navigateur (F12) et vérifiez deux choses :

1. **Onglet Console** : recherchez des erreurs JavaScript, notamment liées à `ps_checkout` ou au module Mondial Relay lui-même
2. **Onglet Éléments** : inspectez le conteneur du widget Mondial Relay pour repérer des styles CSS qui écrasent son affichage

Cette étape est cruciale. Appliquer un correctif CSS alors que le problème est JavaScript (ou inversement) ne fera que masquer le vrai souci.

Problème 1 : conflit CSS — le widget est tronqué ou mal positionné

Cause

Le template du module Mondial Relay utilise des classes Bootstrap comme col-md-12 et clearfix. Or, de nombreux thèmes PrestaShop redéfinissent ces classes avec des styles personnalisés (marges, paddings, overflow) qui entrent en conflit avec le rendu attendu par le module.

Résultat typique : le widget s'affiche dans une colonne trop étroite, la carte Google Maps déborde, ou le conteneur a un overflow: hidden qui tronque le sélecteur de points relais.

Correction dans le template

Localisez le fichier template du module. Selon votre version :

• **PrestaShop 1.7** : `modules/mondialrelay/views/templates/hook/` ou `modules/mondialrelay/views/templates/front/`
• **PrestaShop 8.x** : même arborescence, mais vérifiez aussi `modules/mondialrelay/views/templates/widget/`

Dans le fichier .tpl concerné, repérez les éléments avec les classes col-md-12 clearfix et supprimez-les :

{* AVANT — layout cassé par le thème *}
<div class="col-md-12 clearfix">
    <div id="mondialrelay-widget">...</div>
</div>

{* APRÈS — conteneur neutre, pas de conflit *}
<div id="mondialrelay-container">
    <div id="mondialrelay-widget">...</div>
</div>

En supprimant les classes Bootstrap du conteneur, vous évitez que le thème applique ses propres règles de grille sur le widget.

Bonne pratique PrestaShop 8.x : plutôt que de modifier directement le template du module (qui sera écrasé à la prochaine mise à jour), créez un override dans votre thème : themes/votre-theme/modules/mondialrelay/views/templates/hook/. PrestaShop chargera automatiquement votre version.

Problème 2 : le point relais sélectionné est invisible

Cause

Certains thèmes appliquent une règle background (couleur ou image) sur les éléments de liste ou les conteneurs du widget. Cette règle CSS masque visuellement le marqueur de sélection du point relais : l'utilisateur clique, le point est bien sélectionné en mémoire, mais rien ne change visuellement.

C'est un problème d'expérience utilisateur critique : le client pense que sa sélection n'a pas fonctionné et abandonne sa commande.

Correction CSS

Ajoutez cette règle dans votre fichier custom.css (ou le fichier de personnalisation de votre thème) :

/* Fix : rendre visible le point relais sélectionné */
#mondialrelay-widget .MR-Widget .MRW-Results .selected,
#mondialrelay-widget .MR-Widget .MRW-Results .MRW-line.selected {
    background: none;
}

Pourquoi background: none et pas une autre valeur ? Parce que le module Mondial Relay gère lui-même la mise en surbrillance via ses propres styles inline ou classes. En supprimant le background imposé par le thème, vous laissez le style natif du module reprendre le contrôle.

Où placer cette règle ?

Deux options :

1. **`custom.css` de votre thème** (recommandé) : ce fichier survit aux mises à jour du thème sur la plupart des thèmes bien conçus
2. **Directement dans `theme.css`** : fonctionnel, mais sera écrasé à la prochaine mise à jour du thème

themes/votre-theme/assets/css/custom.css   ← recommandé
themes/votre-theme/assets/css/theme.css    ← fragile

Problème 3 : erreur JavaScript liée à ps_checkout

Cause

Le module ps_checkout (solution de paiement PrestaShop Checkout / PayPal) injecte ses propres scripts JavaScript sur la page de commande. Dans certaines configurations, ces scripts entrent en conflit avec le widget Mondial Relay, provoquant des erreurs qui bloquent l'exécution du JavaScript du module de livraison.

Symptôme classique : la console affiche une erreur JavaScript référençant ps_checkout, et le widget Mondial Relay ne se charge tout simplement pas.

Diagnostic

Pour confirmer que ps_checkout est en cause :

1. Allez dans le **Back Office** → Modules → Module Manager
2. **Désactivez temporairement** le module `ps_checkout`
3. Rechargez la page de commande côté front
4. Si le widget Mondial Relay s'affiche correctement, le conflit est confirmé

Solutions

Solution rapide : si vous n'utilisez pas activement PrestaShop Checkout, désinstallez-le. C'est souvent installé par défaut mais non configuré.

Solution pérenne : si vous avez besoin des deux modules, mettez-les à jour vers leurs dernières versions. Les développeurs de ps_checkout et de Mondial Relay corrigent régulièrement ces conflits d'interopérabilité. Sur PrestaShop 8.x, vérifiez la compatibilité sur la marketplace Addons avant de mettre à jour.

Solution technique : si le conflit persiste après mise à jour, vous pouvez forcer l'ordre de chargement des scripts en désenregistrant puis ré-enregistrant les hooks dans un module personnalisé :

// Dans un module custom ou via un override
public function hookActionFrontControllerSetMedia($params)
{
    // Forcer le chargement du JS Mondial Relay après ps_checkout
    $this->context->controller->unregisterJavascript('ps_checkout-script-id');
    $this->context->controller->registerJavascript(
        'ps_checkout-script-id',
        'modules/ps_checkout/views/js/front.js',
        ['position' => 'bottom', 'priority' => 200]
    );
}

Checklist de résolution complète

Voici la procédure complète à suivre quand le widget Mondial Relay ne s'affiche pas correctement :

1. **Ouvrir les DevTools** — vérifier la console pour les erreurs JS
2. **Désactiver ps_checkout** temporairement pour isoler un conflit JS
3. **Inspecter le CSS** du widget — rechercher des `background`, `overflow: hidden` ou `display: none` imposés par le thème
4. **Supprimer les classes Bootstrap** conflictuelles du template si nécessaire
5. **Ajouter les correctifs CSS** dans `custom.css`
6. **Vider le cache PrestaShop** (Paramètres avancés → Performances → Vider le cache)
7. **Tester en navigation privée** pour éviter les faux positifs liés au cache navigateur

Prévention pour les futures mises à jour

Pour éviter que ces problèmes ne réapparaissent :

• **Utilisez les overrides de thème** plutôt que de modifier les fichiers du module directement
• **Documentez vos modifications CSS** dans un commentaire en haut de `custom.css`
• **Testez le tunnel de commande** après chaque mise à jour de thème, de PrestaShop ou du module Mondial Relay
• **Sur PrestaShop 8.x**, privilégiez les thèmes compatibles avec le nouveau système de hooks et le front controller modernisé