Intégrer un flux de blog externe dans PrestaShop via une page CMS

Pourquoi intégrer un blog externe dans PrestaShop ?

Certains marchands PrestaShop préfèrent maintenir leur blog sur une plateforme dédiée (Tumblr, WordPress, Medium) tout en affichant ce contenu directement sur leur boutique. L'objectif : centraliser l'expérience utilisateur sans forcer le visiteur à quitter le site marchand.

Cette approche présente des avantages concrets : profiter de l'écosystème éditorial d'une plateforme de blogging tout en conservant le header, le footer et la navigation de la boutique PrestaShop. En revanche, elle nécessite une intégration propre pour éviter les conflits JavaScript et les incohérences visuelles.

Stratégie d'intégration : page CMS conditionnelle

La méthode la plus fiable consiste à créer une page CMS dédiée dans PrestaShop, puis à injecter le contenu du blog externe uniquement sur cette page via une condition Smarty dans le template.

Étape 1 : créer la page CMS dans le back-office

Rendez-vous dans Catalogue > Pages (PrestaShop 8.x) ou Préférences > CMS (1.6). Créez une nouvelle page avec un titre comme « Blog » et notez son identifiant (ID). Le contenu de cette page sera remplacé dynamiquement par le template, vous pouvez donc laisser le champ contenu vide ou y placer un message de fallback.

Étape 2 : modifier le template CMS avec une condition Smarty

Dans votre thème, ouvrez le fichier template responsable de l'affichage des pages CMS :

• **PrestaShop 1.6** : `themes/votre_theme/cms.tpl`
• **PrestaShop 1.7 / 8.x** : `themes/votre_theme/templates/cms/page.tpl`

L'idée est de remplacer le contenu standard par l'injection du script externe, uniquement pour la page CMS concernée :

{* PrestaShop 1.6 — cms.tpl *}
<div class="pb-left-column col-xs-12 col-sm-8 col-md-8">
  {if $cms->id != 42}
    {* Affichage normal pour toutes les autres pages CMS *}
    {$cms->content}
  {else}
    {* Page blog externe : injection du widget *}
    <div id="external-blog-container">
      {literal}
        <script type="text/javascript" src="https://votre-blog.example.com/js"></script>
      {/literal}
    </div>
  {/if}
</div>

Remplacez 42 par l'ID réel de votre page CMS.

Pour PrestaShop 1.7 et 8.x, la syntaxe du template diffère légèrement :

{* PrestaShop 8.x — templates/cms/page.tpl *}
{extends file='page.tpl'}

{block name='page_content'}
  {if $cms.id != 42}
    {$cms.content nofilter}
  {else}
    <div id="external-blog-container">
      {literal}
        <script type="text/javascript" src="https://votre-blog.example.com/js"></script>
      {/literal}
    </div>
  {/if}
{/block}

Point important : La balise {literal} est indispensable pour empêcher Smarty d'interpréter le code JavaScript comme du code template. Sans elle, toute accolade {} dans le script provoquera une erreur de compilation Smarty.

Étape 3 : résoudre le problème du JavaScript déplacé en bas de page

PrestaShop dispose d'une option de performance qui déplace automatiquement les scripts JavaScript en fin de page. Cette optimisation, activée par défaut dans de nombreuses configurations, peut empêcher le widget du blog externe de fonctionner correctement si celui-ci dépend de l'ordre d'exécution des scripts.

Vérification : rendez-vous dans Paramètres avancés > Performances et examinez l'option « Déplacer le JavaScript en fin de page ».

Si votre widget ne s'affiche pas alors que le code est correctement injecté, cette option est probablement la cause. Deux solutions :

1. **Désactiver l'option globalement** (déconseillé, impact sur les performances de toutes les pages)
2. **Charger le script de manière asynchrone** avec un contrôle explicite de l'initialisation :

// Chargement différé contrôlé
document.addEventListener('DOMContentLoaded', function() {
  var container = document.getElementById('external-blog-container');
  if (container) {
    var script = document.createElement('script');
    script.src = 'https://votre-blog.example.com/js';
    script.async = true;
    container.appendChild(script);
  }
});

Cette seconde méthode est préférable : elle ne charge le script que lorsque le DOM est prêt et uniquement si le conteneur existe sur la page.

Harmoniser les styles CSS entre le blog et PrestaShop

Une fois le contenu du blog injecté, vous constaterez probablement des incohérences visuelles. Les styles du blog externe entrent en conflit avec ceux du thème PrestaShop.

La solution consiste à surcharger les styles du blog dans la feuille de styles de votre thème. L'approche la plus robuste utilise un sélecteur de contexte combiné à des déclarations !important pour garantir la priorité :

/* themes/votre_theme/assets/css/custom.css */

/* Conteneur principal du blog externe */
#external-blog-container {
  max-width: 800px;
  margin: 0 auto;
  font-family: inherit; /* Hérite de la police du thème PrestaShop */
}

/* Surcharge des styles spécifiques du blog */
#external-blog-container .post-title {
  font-size: 1.5rem !important;
  color: var(--primary-color, #333) !important;
  margin-bottom: 1rem !important;
}

#external-blog-container .post-body {
  line-height: 1.7 !important;
  color: var(--text-color, #555) !important;
}

#external-blog-container img {
  max-width: 100% !important;
  height: auto !important;
}

Bonne pratique : Préférez cibler vos surcharges avec le sélecteur du conteneur (#external-blog-container .classe) plutôt que de cibler les classes du blog globalement. Cela évite les effets de bord sur le reste de votre boutique.

Pour identifier les classes et identifiants CSS utilisés par le blog externe, ouvrez les outils de développement de votre navigateur (F12), inspectez le contenu injecté et relevez les sélecteurs à surcharger.

Approche moderne : API et rendu côté serveur

L'injection par script tiers présente des limites : dépendance à un service externe, contenu non indexable par Google, temps de chargement supplémentaire. En 2024-2025, une approche plus robuste consiste à consommer l'API du blog et à générer le HTML côté serveur.

Exemple avec un module PrestaShop et l'API Tumblr v2

<?php
// modules/monblogexterne/monblogexterne.php

class MonBlogExterne extends Module
{
    public function __construct()
    {
        $this->name = 'monblogexterne';
        $this->version = '1.0.0';
        $this->author = 'Alexandre Carette';
        parent::__construct();
        $this->displayName = $this->l('Blog Externe');
    }

    public function hookDisplayCMSPage($params)
    {
        $cmsId = (int) Tools::getValue('id_cms');
        if ($cmsId !== 42) {
            return '';
        }

        $posts = $this->fetchBlogPosts();
        $this->context->smarty->assign(['posts' => $posts]);
        return $this->display(__FILE__, 'views/templates/hook/blog.tpl');
    }

    private function fetchBlogPosts(): array
    {
        $cacheKey = 'external_blog_posts';
        $cached = Cache::retrieve($cacheKey);
        if ($cached) {
            return json_decode($cached, true);
        }

        $apiUrl = 'https://api.tumblr.com/v2/blog/votre-blog/posts?api_key=VOTRE_CLE';
        $response = Tools::file_get_contents($apiUrl);
        $data = json_decode($response, true);

        $posts = [];
        if (!empty($data['response']['posts'])) {
            foreach ($data['response']['posts'] as $post) {
                $posts[] = [
                    'title' => $post['title'] ?? '',
                    'body' => $post['body'] ?? '',
                    'date' => date('d/m/Y', $post['timestamp']),
                    'url' => $post['post_url'],
                ];
            }
        }

        Cache::store($cacheKey, json_encode($posts), 3600);
        return $posts;
    }
}

Cette approche offre un contenu indexable par les moteurs de recherche, un chargement plus rapide grâce au cache, et une indépendance vis-à-vis du JavaScript client.

Checklist d'intégration

• [ ] Créer la page CMS et noter son ID
• [ ] Modifier le template CMS avec la condition Smarty
• [ ] Vérifier le paramètre « JavaScript en fin de page »
• [ ] Tester l'affichage sur mobile et desktop
• [ ] Surcharger les styles CSS du blog dans le thème
• [ ] Vérifier que les autres pages CMS ne sont pas impactées
• [ ] Valider l'indexation Google (contenu visible sans JS si possible)
• [ ] Mettre en place un cache si vous utilisez l'approche API