[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$f_EER-6fw_pG692_C-7a0D2JrrDcx8KGwiuRACx32EmM":22,"megamenu":60,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":129,"$fzxVVKKqTQVVL-wxXfPR_4lRZSbyAJ6S2AmoV95fdVDY":197,"header-db":211,"footer-db":224},{"theme":4},{"colors":5,"typography":13,"ui":17,"defaultColorMode":21},{"primary":6,"secondary":7,"background":8,"foreground":9,"muted":10,"headerBg":11,"footerBg":12,"topBarBg":9,"topBarText":11},"#4F46E5","#0D9488","#F9FAFB","#111827","#6B7280","#ffffff","#020617",{"fontFamily":14,"fontUrl":15,"baseFontSize":16},"Inter, system-ui, sans-serif","https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700&display=swap","16px",{"borderRadius":18,"contentWidth":19,"shadow":20},"lg","7xl",true,"light",{"title":23,"slug":24,"metaDescription":25,"category":26,"tags":27,"difficulty":34,"psVersions":35,"content":38,"faq":39,"tldr":55,"readingTime":56,"generatedAt":57,"publishDate":57,"relatedArticles":58,"sourceCategory":59},"Affichage aléatoire dans PrestaShop : randomiser vos blocs Smarty","affichage-aleatoire-blocs-smarty-prestashop","Découvrez comment afficher aléatoirement des blocs de contenu dans PrestaShop avec Smarty {math} et les alternatives PHP modernes sous PS 8.x.","developpement",[28,29,30,31,32,33],"smarty","template","random","affichage-conditionnel","personnalisation","homepage","intermediaire",[36,37],"1.7","8.x","\u003Ch2>Pourquoi randomiser l'affichage de certains blocs\u003C\u002Fh2>\n\u003Cp>Sur une boutique PrestaShop, afficher systématiquement les mêmes contenus sur la page d'accueil finit par lasser les visiteurs réguliers. Alterner aléatoirement entre plusieurs blocs — avis clients, promotions, mises en avant produit — donne une impression de fraîcheur sans aucune intervention manuelle.\u003C\u002Fp>\n\u003Cp>Deux approches existent : la manipulation directe en Smarty (rapide à mettre en place) et la modification côté PHP (plus robuste et performante). Voyons les deux.\u003C\u002Fp>\n\u003Ch2>Méthode 1 : randomisation via Smarty `{math}`\u003C\u002Fh2>\n\u003Ch3>Le principe\u003C\u002Fh3>\n\u003Cp>Smarty dispose d'une fonction \u003Ccode>{math}\u003C\u002Fcode> qui accepte l'expression \u003Ccode>rand()\u003C\u002Fcode>. On génère un nombre aléatoire, on le stocke dans une variable, puis on conditionne l'affichage de chaque bloc en fonction de sa valeur.\u003C\u002Fp>\n\u003Ch3>Exemple simple : une chance sur trois\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{math equation=\"rand(min, max)\" min=\"1\" max=\"3\" assign=\"randomBlock\"}\n\n{if $randomBlock == 1}\n  <div class=\"promo-block promo-block--soldes\">\n    <h2>Soldes d'hiver<\u002Fh2>\n    <p>Jusqu'à -40 % sur toute la collection.<\u002Fp>\n  <\u002Fdiv>\n{elseif $randomBlock == 2}\n  <div class=\"promo-block promo-block--nouveautes\">\n    <h2>Nouveautés<\u002Fh2>\n    <p>Découvrez les derniers arrivages de la saison.<\u002Fp>\n  <\u002Fdiv>\n{else}\n  <div class=\"promo-block promo-block--avis\">\n    <h2>Ils nous font confiance<\u002Fh2>\n    <p>Plus de 2 000 avis clients vérifiés.<\u002Fp>\n  <\u002Fdiv>\n{\u002Fif}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>rand(1, 3)\u003C\u002Fcode> retourne un entier entre 1 et 3 inclus. Chaque bloc a donc statistiquement une chance sur trois d'apparaître à chaque chargement de page.\u003C\u002Fp>\n\u003Ch3>Limiter à la page d'accueil\u003C\u002Fh3>\n\u003Cp>Il est souvent souhaitable de ne randomiser l'affichage que sur la homepage. PrestaShop expose la variable \u003Ccode>$page.page_name\u003C\u002Fcode> dans tous les templates :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{if $page.page_name == 'index'}\n  {math equation=\"rand(min, max)\" min=\"1\" max=\"3\" assign=\"randomBlock\"}\n  {if $randomBlock == 1}\n    {* Bloc A *}\n  {elseif $randomBlock == 2}\n    {* Bloc B *}\n  {else}\n    {* Bloc C *}\n  {\u002Fif}\n{\u002Fif}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Sur toutes les autres pages, aucun de ces blocs ne s'affichera.\u003C\u002Fp>\n\u003Ch3>Appliquer la technique à un module tiers (carrousels, blocs statiques)\u003C\u002Fh3>\n\u003Cp>Beaucoup de thèmes et modules (type AnThemeBlocks, Creative Elements, etc.) génèrent leurs blocs via des templates \u003Ccode>.tpl\u003C\u002Fcode>. Le principe reste identique : enveloppez le markup du bloc avec la condition \u003Ccode>{math}\u003C\u002Fcode> + \u003Ccode>{if}\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{math equation=\"rand(min, max)\" min=\"1\" max=\"2\" assign=\"showReviews\"}\n{if $showReviews == 1}\n  <div class=\"reviews-carousel owl-carousel owl-theme\"\n       id=\"reviews-block_{$block->id}\"\n       data-autoplay=\"{$block->formdata->autoplay}\"\n       data-loop=\"{$block->formdata->loop}\">\n    {foreach from=$block->getChildrenBlocks() item=child}\n      {include file=$child->getTemplatePath()}\n    {\u002Fforeach}\n  <\u002Fdiv>\n{\u002Fif}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Ici, le carrousel d'avis a une chance sur deux d'apparaître.\u003C\u002Fp>\n\u003Ch2>Méthode 2 : randomisation côté PHP (recommandée pour PS 8.x)\u003C\u002Fh2>\n\u003Cp>La manipulation Smarty fonctionne, mais elle a ses limites :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>**Cache Smarty** : si le cache de template est actif, le résultat aléatoire peut être mis en cache et donc toujours identique.\u003C\u002Fli>\n\u003Cli>**Performances** : multiplier les conditions Smarty sur des dizaines de blocs alourdit le rendu.\u003C\u002Fli>\n\u003Cli>**Maintenabilité** : le code Smarty devient vite illisible quand la logique métier s'accumule.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Modifier la requête SQL dans le module\u003C\u002Fh3>\n\u003Cp>Pour les modules qui récupèrent des blocs ou des produits depuis la base de données, la solution la plus propre consiste à randomiser directement au niveau SQL :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\n\u002F\u002F Dans la méthode getChildrenBlocks() ou équivalent\n$sql = new DbQuery();\n$sql->select('*');\n$sql->from('module_block', 'b');\n$sql->where('b.id_parent = ' . (int)$this->id);\n$sql->where('b.active = 1');\n$sql->orderBy('RAND()');\n$sql->limit(3); \u002F\u002F N'afficher que 3 blocs parmi tous les actifs\n\n$blocks = Db::getInstance()->executeS($sql);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>L'ajout de \u003Ccode>ORDER BY RAND()\u003C\u002Fcode> mélange les résultats à chaque requête. Combiné avec un \u003Ccode>LIMIT\u003C\u002Fcode>, vous sélectionnez un sous-ensemble aléatoire sans toucher aux templates.\u003C\u002Fp>\n\u003Ch3>Attention aux performances de ORDER BY RAND()\u003C\u002Fh3>\n\u003Cp>Sur de petites tables (quelques dizaines de lignes), \u003Ccode>ORDER BY RAND()\u003C\u002Fcode> est parfaitement acceptable. Sur des tables volumineuses (milliers de produits), cette clause force MySQL à générer un nombre aléatoire pour chaque ligne avant de trier : c'est coûteux.\u003C\u002Fp>\n\u003Cp>Alternative performante pour les grandes tables :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\n\u002F\u002F Récupérer les IDs disponibles\n$ids = Db::getInstance()->executeS(\n    'SELECT id_block FROM ' . _DB_PREFIX_ . 'module_block\n     WHERE id_parent = ' . (int)$this->id . ' AND active = 1'\n);\n\n\u002F\u002F Mélanger côté PHP (quasi-instantané)\nshuffle($ids);\n$selectedIds = array_slice(array_column($ids, 'id_block'), 0, 3);\n\n\u002F\u002F Requête ciblée\n$blocks = Db::getInstance()->executeS(\n    'SELECT * FROM ' . _DB_PREFIX_ . 'module_block\n     WHERE id_block IN (' . implode(',', array_map('intval', $selectedIds)) . ')'\n);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Cette approche en deux temps évite le tri aléatoire SQL sur toute la table.\u003C\u002Fp>\n\u003Ch2>Méthode 3 : randomisation JavaScript côté client\u003C\u002Fh2>\n\u003Cp>Si vous ne pouvez pas modifier le PHP ou le Smarty (thème acheté, module verrouillé), une solution front-end reste possible :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\ndocument.addEventListener('DOMContentLoaded', function () {\n  const blocks = document.querySelectorAll('.randomizable-block');\n  if (blocks.length === 0) return;\n\n  \u002F\u002F Masquer tous les blocs\n  blocks.forEach(block => block.style.display = 'none');\n\n  \u002F\u002F En afficher un au hasard\n  const randomIndex = Math.floor(Math.random() * blocks.length);\n  blocks[randomIndex].style.display = '';\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Cette méthode a l'avantage de fonctionner même avec un cache de page activé (Varnish, CDN), puisque la logique s'exécute dans le navigateur. L'inconvénient : un léger flash de contenu (FOUC) si les blocs ne sont pas masqués par défaut en CSS.\u003C\u002Fp>\n\u003Cp>Pour éviter le FOUC :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n.randomizable-block {\n  display: none;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Le JavaScript se chargera de révéler le bloc sélectionné.\u003C\u002Fp>\n\u003Ch2>Bonnes pratiques\u003C\u002Fh2>\n\u003Ctr>\u003Cth>Critère\u003C\u002Fth>\u003Cth>Smarty `{math}`\u003C\u002Fth>\u003Cth>PHP `ORDER BY RAND()`\u003C\u002Fth>\u003Cth>JavaScript\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>Compatibilité cache\u003C\u002Fth>\u003Cth>Non (résultat mis en cache)\u003C\u002Fth>\u003Cth>Dépend du cache applicatif\u003C\u002Fth>\u003Cth>Oui (côté client)\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>Performance\u003C\u002Fth>\u003Cth>Correcte\u003C\u002Fth>\u003Cth>Attention aux grosses tables\u003C\u002Fth>\u003Cth>Excellente\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>Maintenabilité\u003C\u002Fth>\u003Cth>Faible si complexe\u003C\u002Fth>\u003Cth>Bonne\u003C\u002Fth>\u003Cth>Bonne\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>Nécessite accès code PHP\u003C\u002Fth>\u003Cth>Non\u003C\u002Fth>\u003Cth>Oui\u003C\u002Fth>\u003Cth>Non\u003C\u002Fth>\u003C\u002Ftr>\n\u003Cp>\u003Cstrong>Recommandations :\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Col>\n\u003Cli>**Préférez la méthode PHP** quand vous développez ou maintenez un module. C'est la plus propre et la plus fiable.\u003C\u002Fli>\n\u003Cli>**Utilisez Smarty `{math}`** pour des personnalisations rapides sur un thème, en gardant à l'esprit l'impact du cache.\u003C\u002Fli>\n\u003Cli>**Recourez au JavaScript** comme solution de dernier recours ou quand un cache serveur agressif rend les autres méthodes inefficaces.\u003C\u002Fli>\n\u003Cli>**Testez toujours** en vidant le cache PrestaShop (`Paramètres avancés > Performances > Vider le cache`) pour vérifier que la randomisation fonctionne réellement.\u003C\u002Fli>\n\u003Cli>**Documentez** la logique aléatoire dans votre code : un bloc qui \"disparaît\" aléatoirement peut vite devenir un bug mystérieux pour un collègue qui ne connaît pas le mécanisme.\u003C\u002Fli>\n\u003C\u002Ful>",[40,43,46,49,52],{"q":41,"a":42},"La fonction {math} de Smarty est-elle compatible avec PrestaShop 8 ?","Oui. PrestaShop 8.x utilise toujours Smarty comme moteur de templates pour le front-office. La fonction {math} avec rand() reste fonctionnelle. Cependant, Smarty est progressivement considéré comme un héritage technique : si vous développez un module neuf, privilégiez la logique PHP dans votre contrôleur ou hook plutôt que d'accumuler la logique dans les templates.",{"q":44,"a":45},"L'affichage aléatoire Smarty fonctionne-t-il avec le cache de PrestaShop activé ?","Non, c'est un piège classique. Quand le cache Smarty est actif, le template est compilé une première fois puis servi tel quel aux visiteurs suivants. Le résultat du rand() est donc figé jusqu'au prochain vidage de cache. Pour contourner ce problème, vous pouvez soit désactiver le cache sur le template concerné (via nocache dans Smarty), soit déplacer la logique aléatoire côté PHP ou JavaScript.",{"q":47,"a":48},"Comment afficher aléatoirement des produits sur la page d'accueil PrestaShop ?","La méthode la plus fiable consiste à modifier le module qui gère l'affichage des produits en page d'accueil (ps_featuredproducts par exemple) et à ajouter ORDER BY RAND() LIMIT X dans la requête SQL. Alternativement, vous pouvez créer un module personnalisé qui hook sur displayHome et qui récupère un échantillon aléatoire via shuffle() en PHP. Évitez ORDER BY RAND() si votre catalogue dépasse quelques centaines de produits : préférez alors la technique du shuffle PHP sur les IDs.",{"q":50,"a":51},"Peut-on randomiser l'ordre des blocs d'un carrousel sans modifier le module ?","Oui, via JavaScript. Récupérez tous les éléments enfants du carrousel, mélangez-les avec un algorithme de Fisher-Yates, puis réinjectez-les dans le DOM avant l'initialisation du carrousel (Owl Carousel, Slick, etc.). Attention à exécuter ce code avant l'appel d'initialisation du plugin de carrousel, sinon le mélange n'aura aucun effet visible.",{"q":53,"a":54},"ORDER BY RAND() ralentit-il ma boutique PrestaShop ?","Sur une petite table (moins de 500 lignes), l'impact est négligeable. Au-delà, MySQL doit générer un nombre aléatoire pour chaque ligne puis trier l'ensemble, ce qui devient coûteux. La solution recommandée pour les grandes tables : récupérez uniquement les IDs en une première requête légère, mélangez-les côté PHP avec shuffle(), puis faites une seconde requête ciblée avec WHERE id IN (...). Cette approche en deux temps reste performante même sur des catalogues de plusieurs milliers de produits.","Pour afficher des blocs aléatoirement dans PrestaShop, utilisez {math equation=\"rand(min, max)\"} en Smarty pour un résultat rapide, ou préférez ORDER BY RAND() \u002F shuffle() côté PHP pour une solution robuste compatible avec le cache.",5,"2026-03-21T14:18:32.000Z",[],"PrestaShop pour les développeurs",{"items":61},[62,73,81,89,97,106,113,121],{"id":63,"type":64,"label":65,"href":67,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":68,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":70,"children":71,"psChildren":72},41,"link",{"fr":66},"Expertise","\u002Fexpertise",null,false,0,[],[],{"id":74,"type":64,"label":75,"href":77,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":68,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":78,"children":79,"psChildren":80},42,{"fr":76},"Blog","\u002Fblog",1,[],[],{"id":82,"type":64,"label":83,"href":85,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":68,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":86,"children":87,"psChildren":88},43,{"fr":84},"Modules PrestaShop","\u002Fmodules",2,[],[],{"id":90,"type":64,"label":91,"href":93,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":68,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":94,"children":95,"psChildren":96},44,{"fr":92},"Outils IA","\u002Foutils-ia",3,[],[],{"id":98,"type":64,"label":99,"href":101,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":102,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":103,"children":104,"psChildren":105},45,{"fr":100},"Offre Starter ✨","\u002Foffre-starter",{"highlight":20},4,[],[],{"id":107,"type":64,"label":108,"href":110,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":68,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":56,"children":111,"psChildren":112},46,{"fr":109},"Academy","\u002Facademy",[],[],{"id":114,"type":64,"label":115,"href":117,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":68,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":118,"children":119,"psChildren":120},47,{"fr":116},"À propos","\u002Fa-propos",6,[],[],{"id":122,"type":64,"label":123,"href":125,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":68,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":126,"children":127,"psChildren":128},48,{"fr":124},"Contact","\u002Fcontact",7,[],[],{"columns":130},[131,143,173,189],{"title":132,"links":133},"Plateforme",[134,136,139,140],{"label":135,"href":101,"external":69},"Offre Starter (2 500 €)",{"label":137,"href":138,"external":69},"Devenir Ambassadeur","\u002Fambassadeur",{"label":84,"href":85,"external":69},{"label":141,"href":142,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":144,"links":145},"Le Synedre",[146,149,152,155,158,161,164,167,170],{"label":147,"href":148,"external":69},"L'histoire","\u002Fsynedre",{"label":150,"href":151,"external":69},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":153,"href":154,"external":69},"L'équipe","\u002Fequipe",{"label":156,"href":157,"external":69},"Le réacteur en direct","\u002Freacteur",{"label":159,"href":160,"external":69},"Le Drill (entraînement)","\u002Fdrill",{"label":162,"href":163,"external":69},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":165,"href":166,"external":69},"Les agents IA","\u002Fagents-ia",{"label":168,"href":169,"external":69},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":171,"href":172,"external":69},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":174,"links":175},"Ressources",[176,177,178,181,183,186],{"label":76,"href":77,"external":69},{"label":109,"href":110,"external":69},{"label":179,"href":180,"external":69},"Dictionnaire","\u002Fdictionnaire",{"label":182,"href":67,"external":69},"Expertise PrestaShop",{"label":184,"href":185,"external":69},"Flywheel","\u002Fflywheel",{"label":187,"href":188,"external":69},"Manifeste","\u002Fmanifeste",{"title":116,"links":190},[191,193,196],{"label":192,"href":117,"external":69},"Alexandre Carette",{"label":194,"href":195,"external":69},"Dossier de presse","\u002Fpresse",{"label":124,"href":125,"external":69},{"academy":198,"blog":199,"expertise":210},[],[200,204,207],{"title":201,"url":202,"score":78,"type":203},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back","blog",{"title":205,"url":206,"score":78,"type":203},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",{"title":208,"url":209,"score":78,"type":203},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[],{"header":212},{"logo":213,"topBar":218,"contactEmail":221,"features":222,"navBar":68},{"src":214,"alt":215,"text":192,"href":216,"class":217},"\u002Flogo-ac.svg","Alexandre Carette — Architecte E-commerce Souverain","\u002F","h-10 w-10",{"message":68,"showLanguages":69,"align":219,"languages":220},"left",[],"contact@alexandrecarette.fr",{"showSearch":69,"showWishlist":69,"showLogin":20,"showContact":69,"showCart":69,"stickyHeader":20,"headerLayout":223},"inline",{"footer":225},{"theme":226,"description":68,"hours":68,"logo":227,"contact":228,"social":229,"bottomBar":239},"dark",{"src":214,"href":216,"alt":192},{"email":68,"phone":68,"address":68,"cta":68},[230,233,236],{"platform":231,"href":232,"label":231},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":234,"href":235,"label":234},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":237,"href":238,"label":237},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":68}]