[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$fMgafqSOOVgxuJmfU2ZdzlPRionBDC3iUReWy4gLknK4":22,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":61,"megamenu":142,"header-db":198,"$f9UUriyH2AT0N0AehFn8wtSLekV3cFPrUpP7TDoZRyw8":211,"footer-db":225},{"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":39,"faq":40,"tldr":56,"readingTime":57,"generatedAt":58,"publishDate":58,"relatedArticles":59,"sourceCategory":60},"Ajouter des boutons + et - pour la quantité sur la fiche produit PrestaShop","boutons-plus-moins-quantite-fiche-produit-prestashop","Intégrez des boutons d'incrémentation +\u002F- à côté du champ quantité sur vos fiches produits PrestaShop. Guide complet avec code pour PS 1.7 et 8.x.","design",[28,29,30,31,32,33],"quantité produit","fiche produit","UX e-commerce","template Smarty","JavaScript","panier","intermediaire",[36,37,38],"1.6","1.7","8.x","\u003Ch2>Pourquoi ajouter des boutons +\u002F- sur le sélecteur de quantité\u003C\u002Fh2>\n\u003Cp>Le champ de quantité par défaut sur une fiche produit PrestaShop est un simple \u003Ccode>\u003Cinput type=\"number\">\u003C\u002Fcode>. Sur mobile comme sur desktop, ce champ brut pose plusieurs problèmes d'ergonomie : les petites flèches natives du navigateur sont difficiles à cliquer, l'expérience tactile est médiocre, et l'aspect visuel s'intègre rarement au design du thème.\u003C\u002Fp>\n\u003Cp>Ajouter des boutons \u003Cstrong>+\u003C\u002Fstrong> et \u003Cstrong>−\u003C\u002Fstrong> explicites améliore significativement le taux de conversion. Les études UX montrent qu'un sélecteur de quantité bien conçu réduit les erreurs de saisie et encourage les commandes multi-articles.\u003C\u002Fp>\n\u003Ch2>Comportement natif selon les versions de PrestaShop\u003C\u002Fh2>\n\u003Ch3>PrestaShop 1.5 et 1.6\u003C\u002Fh3>\n\u003Cp>Sur PrestaShop 1.5, les boutons d'incrémentation étaient \u003Cstrong>intégrés nativement\u003C\u002Fstrong> dans le thème par défaut. Le template \u003Ccode>product.tpl\u003C\u002Fcode> incluait déjà des éléments \u003Ccode>.qty_up\u003C\u002Fcode> et \u003Ccode>.qty_down\u003C\u002Fcode> avec des images cliquables. Si votre thème personnalisé ne les affiche plus, c'est probablement parce que le template a été modifié ou que le CSS les masque.\u003C\u002Fp>\n\u003Cp>Sur PrestaShop 1.6, le thème Bootstrap par défaut a conservé ce mécanisme, mais avec un rendu différent utilisant des icônes Font Awesome.\u003C\u002Fp>\n\u003Ch3>PrestaShop 1.7 et 8.x\u003C\u002Fh3>\n\u003Cp>À partir de PrestaShop 1.7, le thème Classic inclut nativement un composant \u003Ccode>TouchSpin\u003C\u002Fcode> (via Bootstrap TouchSpin) qui gère les boutons +\u002F−. Le sélecteur de quantité est géré dans le fichier :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-\">\nthemes\u002Fclassic\u002Ftemplates\u002Fcatalog\u002Fproduct.tpl\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Le composant est initialisé automatiquement par le JavaScript du thème. Si ces boutons n'apparaissent pas, le problème vient généralement du thème personnalisé qui n'inclut pas les dépendances nécessaires.\u003C\u002Fp>\n\u003Ch2>Solution pour PrestaShop 1.7 \u002F 8.x (thème Classic et dérivés)\u003C\u002Fh2>\n\u003Ch3>Vérifier que le composant natif fonctionne\u003C\u002Fh3>\n\u003Cp>Dans le thème Classic, le sélecteur de quantité se trouve dans :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-\">\nthemes\u002Fclassic\u002Ftemplates\u002Fcatalog\u002F_partials\u002Fproduct-add-to-cart.tpl\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Le markup natif ressemble à ceci :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">\n<div class=\"qty\">\n  <input\n    type=\"number\"\n    name=\"qty\"\n    id=\"quantity_wanted\"\n    inputmode=\"numeric\"\n    pattern=\"[0-9]*\"\n    value=\"{$product.minimal_quantity}\"\n    class=\"input-group\"\n    min=\"{$product.minimal_quantity}\"\n    aria-label=\"{l s='Quantity' d='Shop.Theme.Actions'}\"\n  \u002F>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Le plugin jQuery Bootstrap TouchSpin transforme automatiquement cet input en un composant avec boutons. Si ça ne fonctionne pas, vérifiez que le fichier JavaScript du thème charge bien la bibliothèque.\u003C\u002Fp>\n\u003Ch3>Implémentation manuelle (thème custom sans TouchSpin)\u003C\u002Fh3>\n\u003Cp>Si votre thème personnalisé ne dispose pas de TouchSpin, voici une implémentation propre et moderne :\u003C\u002Fp>\n\u003Cp>#### 1. Modifier le template Smarty\u003C\u002Fp>\n\u003Cp>Créez ou éditez le fichier dans votre thème enfant :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-\">\nthemes\u002Fvotre-theme\u002Ftemplates\u002Fcatalog\u002F_partials\u002Fproduct-add-to-cart.tpl\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre>\u003Ccode class=\"language-html\">\n<div class=\"product-quantity clearfix\">\n  <div class=\"qty-wrapper d-flex align-items-center\">\n    <button\n      type=\"button\"\n      class=\"btn btn-touchspin qty-btn qty-down\"\n      data-action=\"decrease\"\n      aria-label=\"{l s='Decrease quantity' d='Shop.Theme.Actions'}\"\n    >\n      <span>−<\u002Fspan>\n    <\u002Fbutton>\n\n    <input\n      type=\"number\"\n      name=\"qty\"\n      id=\"quantity_wanted\"\n      inputmode=\"numeric\"\n      pattern=\"[0-9]*\"\n      value=\"{$product.minimal_quantity}\"\n      class=\"input-qty\"\n      min=\"{$product.minimal_quantity}\"\n      aria-label=\"{l s='Quantity' d='Shop.Theme.Actions'}\"\n    \u002F>\n\n    <button\n      type=\"button\"\n      class=\"btn btn-touchspin qty-btn qty-up\"\n      data-action=\"increase\"\n      aria-label=\"{l s='Increase quantity' d='Shop.Theme.Actions'}\"\n    >\n      <span>+<\u002Fspan>\n    <\u002Fbutton>\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>#### 2. JavaScript propre et compatible\u003C\u002Fp>\n\u003Cp>Ajoutez ce script dans le fichier \u003Ccode>custom.js\u003C\u002Fcode> de votre thème ou dans un bloc \u003Ccode>{literal}\u003C\u002Fcode> en bas du template :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\ndocument.addEventListener('DOMContentLoaded', function () {\n  const qtyInput = document.getElementById('quantity_wanted');\n  if (!qtyInput) return;\n\n  const minQty = parseInt(qtyInput.getAttribute('min'), 10) || 1;\n\n  document.querySelectorAll('.qty-btn').forEach(function (btn) {\n    btn.addEventListener('click', function () {\n      let currentVal = parseInt(qtyInput.value, 10);\n      if (isNaN(currentVal)) currentVal = minQty;\n\n      if (this.dataset.action === 'increase') {\n        qtyInput.value = currentVal + 1;\n      } else if (this.dataset.action === 'decrease') {\n        if (currentVal > minQty) {\n          qtyInput.value = currentVal - 1;\n        }\n      }\n\n      \u002F\u002F Déclencher l'événement change pour que PrestaShop\n      \u002F\u002F mette à jour le prix et la disponibilité\n      qtyInput.dispatchEvent(new Event('change', { bubbles: true }));\n    });\n  });\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>Point crucial :\u003C\u002Fstrong> le \u003Ccode>dispatchEvent\u003C\u002Fcode> sur l'événement \u003Ccode>change\u003C\u002Fcode> est indispensable. Sans cela, PrestaShop ne recalcule pas le prix unitaire en fonction des remises par quantité ni ne vérifie le stock disponible.\u003C\u002Fp>\n\u003Cp>#### 3. Styles CSS\u003C\u002Fp>\n\u003Cp>Ajoutez ces styles dans le fichier \u003Ccode>custom.css\u003C\u002Fcode> de votre thème :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n.qty-wrapper {\n  display: inline-flex;\n  align-items: center;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.qty-btn {\n  width: 40px;\n  height: 40px;\n  border: none;\n  background-color: #f5f5f5;\n  font-size: 1.2rem;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s;\n  user-select: none;\n}\n\n.qty-btn:hover {\n  background-color: #e0e0e0;\n}\n\n.qty-btn:active {\n  background-color: #d0d0d0;\n}\n\n.input-qty {\n  width: 50px;\n  height: 40px;\n  text-align: center;\n  border: none;\n  border-left: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  font-size: 1rem;\n  -moz-appearance: textfield;\n}\n\n.input-qty::-webkit-outer-spin-button,\n.input-qty::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>La suppression des flèches natives via \u003Ccode>-webkit-appearance: none\u003C\u002Fcode> évite le doublon visuel entre les boutons natifs du navigateur et vos boutons personnalisés.\u003C\u002Fp>\n\u003Ch2>Gestion de la quantité minimale\u003C\u002Fh2>\n\u003Cp>PrestaShop permet de définir une \u003Cstrong>quantité minimale d'achat\u003C\u002Fstrong> par produit (champ \u003Ccode>minimal_quantity\u003C\u002Fcode> dans la fiche produit). Votre implémentation doit impérativement respecter cette valeur :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>La valeur initiale de l'input doit être `minimal_quantity` (pas 1)\u003C\u002Fli>\n\u003Cli>Le bouton − ne doit jamais descendre en dessous de cette valeur\u003C\u002Fli>\n\u003Cli>L'attribut `min` de l'input HTML doit refléter cette valeur\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Dans le code JavaScript ci-dessus, la variable \u003Ccode>minQty\u003C\u002Fcode> gère cela automatiquement en lisant l'attribut \u003Ccode>min\u003C\u002Fcode> de l'input.\u003C\u002Fp>\n\u003Ch2>Mise à jour dynamique du prix\u003C\u002Fh2>\n\u003Cp>Sur PrestaShop 1.7+ et 8.x, le prix se met à jour dynamiquement grâce au composant JavaScript \u003Ccode>prestashop.on('updatedProduct')\u003C\u002Fcode>. Si vous avez des remises par paliers de quantité, le simple fait de déclencher l'événement \u003Ccode>change\u003C\u002Fcode> sur l'input suffit à ce que le core recalcule et affiche le bon prix.\u003C\u002Fp>\n\u003Cp>Si vous souhaitez afficher le \u003Cstrong>prix total\u003C\u002Fstrong> (prix unitaire × quantité) en temps réel, ajoutez un élément dans votre template :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">\n<p class=\"total-price\" id=\"total_price_display\"><\u002Fp>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Puis écoutez les changements :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\nif (typeof prestashop !== 'undefined') {\n  prestashop.on('updatedProduct', function (event) {\n    const qty = parseInt(document.getElementById('quantity_wanted').value, 10);\n    const unitPrice = parseFloat(event.product_prices?.price_amount || 0);\n    const totalEl = document.getElementById('total_price_display');\n    if (totalEl && qty && unitPrice) {\n      totalEl.textContent = 'Total : ' + (unitPrice * qty).toFixed(2) + ' €';\n    }\n  });\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Accessibilité (a11y)\u003C\u002Fh2>\n\u003Cp>Pour une implémentation conforme aux standards d'accessibilité :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Ajoutez des `aria-label` explicites sur chaque bouton (\"Diminuer la quantité\", \"Augmenter la quantité\")\u003C\u002Fli>\n\u003Cli>Utilisez des éléments `\u003Cbutton>` et non des `\u003Cspan>` ou `\u003Cdiv>` cliquables\u003C\u002Fli>\n\u003Cli>Assurez-vous que les boutons sont navigables au clavier (focus visible)\u003C\u002Fli>\n\u003Cli>Le champ input doit avoir `inputmode=\"numeric\"` pour afficher le clavier numérique sur mobile\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Erreurs fréquentes à éviter\u003C\u002Fh2>\n\u003Ch3>Ne pas déclencher l'événement `change`\u003C\u002Fh3>\n\u003Cp>C'est l'erreur la plus courante. Modifier \u003Ccode>input.value\u003C\u002Fcode> en JavaScript ne déclenche \u003Cstrong>pas\u003C\u002Fstrong> automatiquement l'événement \u003Ccode>change\u003C\u002Fcode>. Sans \u003Ccode>dispatchEvent\u003C\u002Fcode>, PrestaShop ne sait pas que la quantité a changé, le prix ne se met pas à jour, et le stock n'est pas revérifié.\u003C\u002Fp>\n\u003Ch3>Utiliser jQuery `.val()` sans `.trigger('change')`\u003C\u002Fh3>\n\u003Cp>Si vous utilisez jQuery, la même règle s'applique :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\n\u002F\u002F ❌ Mauvais\n$('#quantity_wanted').val(newQty);\n\n\u002F\u002F ✅ Correct\n$('#quantity_wanted').val(newQty).trigger('change');\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Oublier la validation de la saisie\u003C\u002Fh3>\n\u003Cp>Toujours vérifier que la valeur est un entier valide avec \u003Ccode>parseInt()\u003C\u002Fcode> et gérer le cas \u003Ccode>NaN\u003C\u002Fcode>. Un utilisateur peut vider le champ manuellement, et votre code doit remettre la quantité minimale dans ce cas.\u003C\u002Fp>\n\u003Ch3>Ignorer les produits virtuels\u003C\u002Fh3>\n\u003Cp>Les produits virtuels (fichiers téléchargeables) n'ont généralement pas de sélecteur de quantité visible. Votre code doit respecter la condition \u003Ccode>{if $product.add_to_cart_url}\u003C\u002Fcode> pour ne pas afficher les boutons inutilement.\u003C\u002Fp>",[41,44,47,50,53],{"q":42,"a":43},"Les boutons +\u002F- de quantité sont-ils natifs dans PrestaShop 8 ?","Oui, le thème Classic de PrestaShop 1.7 et 8.x intègre nativement un composant Bootstrap TouchSpin qui affiche les boutons d'incrémentation. Si votre thème personnalisé ne les affiche pas, c'est parce qu'il n'inclut pas la bibliothèque TouchSpin ou que le template a été modifié. Vérifiez que le fichier JavaScript du thème charge bien les dépendances, ou implémentez une solution manuelle en Vanilla JS.",{"q":45,"a":46},"Comment empêcher la quantité de descendre en dessous du minimum d'achat ?","PrestaShop permet de définir une quantité minimale d'achat par produit via le champ minimal_quantity. Dans votre JavaScript, lisez l'attribut min de l'input (#quantity_wanted) et bloquez le bouton − lorsque la valeur atteint ce seuil. Utilisez aussi l'attribut HTML min sur l'input pour que la validation native du navigateur intervienne en complément.",{"q":48,"a":49},"Pourquoi le prix ne se met pas à jour quand je clique sur + ou − ?","Modifier la valeur d'un champ input via JavaScript (input.value = x) ne déclenche pas automatiquement l'événement change. Vous devez appeler manuellement input.dispatchEvent(new Event('change', { bubbles: true })) après chaque modification. C'est cet événement qui permet à PrestaShop de recalculer le prix en fonction des remises par quantité et de vérifier la disponibilité en stock.",{"q":51,"a":52},"Comment afficher le prix total en temps réel selon la quantité choisie ?","Sur PrestaShop 1.7 et 8.x, écoutez l'événement prestashop.on('updatedProduct') qui est déclenché à chaque changement de quantité. Cet événement fournit le prix unitaire actualisé dans event.product_prices.price_amount. Multipliez-le par la quantité saisie et affichez le résultat dans un élément dédié de votre template.",{"q":54,"a":55},"Les boutons +\u002F- fonctionnent-ils correctement sur mobile ?","Oui, à condition de respecter quelques règles : utilisez des éléments button (pas des images ou spans), donnez-leur une taille de cible tactile d'au moins 40×40 pixels (recommandation WCAG), ajoutez inputmode='numeric' sur le champ pour afficher le clavier numérique, et masquez les flèches natives du navigateur avec la propriété CSS -webkit-appearance: none pour éviter le doublon visuel.","PrestaShop 1.7 et 8.x intègrent nativement des boutons +\u002F- via TouchSpin dans le thème Classic. Pour les thèmes personnalisés, une implémentation en Vanilla JS avec des boutons HTML accessibles, un dispatch d'événement change et le respect de la quantité minimale suffit à recréer cette fonctionnalité.",6,"2026-03-21T16:07:56.000Z",[],"PrestaShop pour les développeurs",{"columns":62},[63,79,109,130],{"title":64,"links":65},"Plateforme",[66,70,73,76],{"label":67,"href":68,"external":69},"Offre Starter (2 500 €)","\u002Foffre-starter",false,{"label":71,"href":72,"external":69},"Devenir Ambassadeur","\u002Fambassadeur",{"label":74,"href":75,"external":69},"Modules PrestaShop","\u002Fmodules",{"label":77,"href":78,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":80,"links":81},"Le Synedre",[82,85,88,91,94,97,100,103,106],{"label":83,"href":84,"external":69},"L'histoire","\u002Fsynedre",{"label":86,"href":87,"external":69},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":89,"href":90,"external":69},"L'équipe","\u002Fequipe",{"label":92,"href":93,"external":69},"Le réacteur en direct","\u002Freacteur",{"label":95,"href":96,"external":69},"Le Drill (entraînement)","\u002Fdrill",{"label":98,"href":99,"external":69},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":101,"href":102,"external":69},"Les agents IA","\u002Fagents-ia",{"label":104,"href":105,"external":69},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":107,"href":108,"external":69},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":110,"links":111},"Ressources",[112,115,118,121,124,127],{"label":113,"href":114,"external":69},"Blog","\u002Fblog",{"label":116,"href":117,"external":69},"Academy","\u002Facademy",{"label":119,"href":120,"external":69},"Dictionnaire","\u002Fdictionnaire",{"label":122,"href":123,"external":69},"Expertise PrestaShop","\u002Fexpertise",{"label":125,"href":126,"external":69},"Flywheel","\u002Fflywheel",{"label":128,"href":129,"external":69},"Manifeste","\u002Fmanifeste",{"title":131,"links":132},"À propos",[133,136,139],{"label":134,"href":135,"external":69},"Alexandre Carette","\u002Fa-propos",{"label":137,"href":138,"external":69},"Dossier de presse","\u002Fpresse",{"label":140,"href":141,"external":69},"Contact","\u002Fcontact",{"items":143},[144,153,159,165,173,181,187,192],{"id":145,"type":146,"label":147,"href":123,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":150,"children":151,"psChildren":152},41,"link",{"fr":148},"Expertise",null,0,[],[],{"id":154,"type":146,"label":155,"href":114,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":156,"children":157,"psChildren":158},42,{"fr":113},1,[],[],{"id":160,"type":146,"label":161,"href":75,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":162,"children":163,"psChildren":164},43,{"fr":74},2,[],[],{"id":166,"type":146,"label":167,"href":169,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":170,"children":171,"psChildren":172},44,{"fr":168},"Outils IA","\u002Foutils-ia",3,[],[],{"id":174,"type":146,"label":175,"href":68,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":177,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":178,"children":179,"psChildren":180},45,{"fr":176},"Offre Starter ✨",{"highlight":20},4,[],[],{"id":182,"type":146,"label":183,"href":117,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":184,"children":185,"psChildren":186},46,{"fr":116},5,[],[],{"id":188,"type":146,"label":189,"href":135,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":57,"children":190,"psChildren":191},47,{"fr":131},[],[],{"id":193,"type":146,"label":194,"href":141,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":195,"children":196,"psChildren":197},48,{"fr":140},7,[],[],{"header":199},{"logo":200,"topBar":205,"contactEmail":208,"features":209,"navBar":149},{"src":201,"alt":202,"text":134,"href":203,"class":204},"\u002Flogo-ac.svg","Alexandre Carette — Architecte E-commerce Souverain","\u002F","h-10 w-10",{"message":149,"showLanguages":69,"align":206,"languages":207},"left",[],"contact@alexandrecarette.fr",{"showSearch":69,"showWishlist":69,"showLogin":20,"showContact":69,"showCart":69,"stickyHeader":20,"headerLayout":210},"inline",{"academy":212,"blog":213,"expertise":224},[],[214,218,221],{"title":215,"url":216,"score":156,"type":217},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back","blog",{"title":219,"url":220,"score":156,"type":217},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",{"title":222,"url":223,"score":156,"type":217},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[],{"footer":226},{"theme":227,"description":149,"hours":149,"logo":228,"contact":229,"social":230,"bottomBar":240},"dark",{"src":201,"href":203,"alt":134},{"email":149,"phone":149,"address":149,"cta":149},[231,234,237],{"platform":232,"href":233,"label":232},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":235,"href":236,"label":235},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":238,"href":239,"label":238},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":149}]