Websource Prestashop Theme — référence développeur

Vue d'ensemble

• Thème Smarty classique (themes/WebsourcePrestashopTheme), déclaré dans config/theme.yml (name: WebsourcePrestashopTheme, display_name: Websource Prestashop Theme, version: 0.1.0, compatibilité from: 1.7.0.0, to: ~).
• CSS écrit en Tailwind v4 et compilé en CSS statique : un socle commun assets/css/theme.css chargé partout par PrestaShop, puis un fichier par type de page dans assets/css/pages/*.css. Aucune compilation dans le navigateur, aucune dépendance à un CDN.
• JavaScript sans jQuery pour le thème lui-même (assets/js/theme.js) ; assets/js/vendor-theme.js conserve les greffons hérités du thème Classic dont dépendent PrestaShop et certains modules natifs.
• Les réglages (couleurs, variantes d'en-tête et de pied de page, badges, données structurées…) ne sont pas dans le thème : ils sont fournis par le module Websource Theme Config au moyen de variables Smarty et de variables CSS décrites plus bas. Le thème fonctionne sans ce module avec des valeurs de repli.
• Sources : assets/src/*.css (jetons, socle, en-tête, formulaires, badges, dispositions de fiche produit, variantes, compatibilité Bootstrap), cartographie page → gabarits dans scripts/pages.config.mjs.

Compilation du CSS

cd themes/WebsourcePrestashopTheme
npm install
npm run build

Le script scripts/build-css.mjs produit assets/css/theme.css et assets/css/pages/<page>.css à partir de scripts/pages.config.mjs : pour chaque page, il suit les {include}/{extends} des gabarits racines, ajoute les gabarits des modules surchargés (modules/<nom>) utilisés par la page et conserve une liste blanche de classes ajoutées dynamiquement (baseSafelist, pageSafelist). Un tableau des tailles s'affiche en fin de compilation.

Les classes CSS n'existent que si elles ont été vues à la compilation : une nouvelle classe utilitaire ajoutée dans un gabarit n'a d'effet qu'après npm run build.

Gabarits

Mises en page (templates/layouts/)

Structure commune : <html lang="{$language.locale}" dir="rtl"> si $language.is_rtl, lien d'évitement #content, <header id="header">, <section id="wrapper"> avec #left-column, #content-wrapper > #content, #right-column, <footer id="footer">, barre mobile _partials/tabbar.tpl, scripts du bas.

Blocs Smarty surchargeables dans un thème enfant : head, hook_after_body_opening_tag, product_activation, header, notifications, breadcrumb, left_column, content_wrapper, content, right_column, footer, javascript_bottom, hook_before_body_closing_tag. Dans _partials/header.tpl : header_banner, header_nav, header_top. Dans _partials/footer.tpl : hook_footer_before, hook_footer, copyright_link, hook_footer_after. Dans catalog/product.tpl : page_header_container, product_cover_thumbnails, product_prices, product_description_short, product_variants, product_pack, product_discounts, product_add_to_cart, product_buy, product_customization, product_additional_info, product_refresh, product_tabs, product_description, product_details, product_attachments, product_accessories, product_footer, product_images_modal, hook_display_reassurance, head_microdata_special.

Classes du <body>

Le <body> porte {$page.body_classes} puis la chaîne $wsx_body_classes (fournie par Websource Theme Config). Valeur de repli si le module est absent :

wsx-mn-bottom wsx-mh-icons_right wsx-dh-classic wsx-ft-dark wsx-sw-md wsx-sa-center wsx-ha-main

Partials notables (templates/_partials/)

Modules surchargés (modules/)

Le thème redessine les gabarits des modules natifs suivants (sans modifier leur code) : blockreassurance, blockwishlist, contactform, ps_advertising, ps_banner, ps_bestsellers, ps_brandlist, ps_categoryproducts, ps_categorytree, ps_contactinfo, ps_crossselling, ps_currencyselector, ps_customeraccountlinks, ps_customersignin, ps_emailalerts, ps_emailsubscription, ps_facetedsearch, ps_featuredproducts, ps_imageslider, ps_languageselector, ps_legalcompliance, ps_linklist, ps_mainmenu, ps_newproducts, ps_productinfo, ps_rssfeed, ps_sharebuttons, ps_shoppingcart, ps_socialfollow, ps_specials, ps_supplierlist, ps_viewedproduct.

Hooks

Hooks d'affichage appelés par les gabarits

Natifs PrestaShop : displayAfterBodyOpeningTag, displayBeforeBodyClosingTag, displayBanner, displayNav1, displayNav2, displayTop, displayNavFullWidth, displayWrapperTop, displayWrapperBottom, displayContentWrapperTop, displayContentWrapperBottom, displayLeftColumn, displayRightColumn, displayLeftColumnProduct, displayRightColumnProduct, displayFooterBefore, displayFooter, displayFooterAfter, displayAfterTitleTag, displayNotFound, displaySearch, displayReassurance, displayProductPriceBlock (13 appels, types before_price, after_price, unit_price, weight, old_price…), displayProductActions, displayProductAdditionalInfo, displayAfterProductThumbs, displayFooterProduct, displayProductListReviews, displayShoppingCart, displayShoppingCartFooter, displayCrossSellingShoppingCart, displayCartExtraProductActions, displayExpressCheckout, displayCheckoutSummaryTop, displayCheckoutSubtotalDetails, displayPersonalInformationTop, displayPaymentTop, displayPaymentByBinaries, displayCustomerLoginFormAfter, displayCustomerAccount, displayAdditionalCustomerAddressFields, displayCMSPrintButton, displayCMSDisputeInformation, actionProductOutOfStock.

Hooks propres au thème (créés par les modules Websource)

Aucun modules_to_hook n'est déclaré dans theme.yml (PrestaShop remplacerait sinon la liste complète des modules de chaque hook) : chaque module Websource se greffe lui-même à l'installation. Le bouton Rétablir les accroches de Websource Theme Config refait ce greffage.

Variables Smarty lues par le thème

Toutes sont facultatives ; sans elles le thème applique un repli.

Variables natives utilisées sans modification : $page, $shop, $urls, $language, $customer, $cart, $product, $category, $listing, $breadcrumb, $javascript.

Variables CSS

Déclarées dans assets/src/tokens.css (bloc @theme, non inlinées) et surchargées à l'exécution par Websource Theme Config dans un :root{…}. Un module tiers peut donc s'y référer avec une valeur de repli.

Autres règles de style : propriétés logiques uniquement (margin-inline, inset-inline-start, text-align:start), inversion automatique sous [dir=rtl], classe wsx-flip pour les icônes directionnelles, montants isolés (unicode-bidi:isolate), prefers-reduced-motion respecté.

Feuilles de style et scripts déclarés (theme.yml)

Les pages de modules (module-*) ne sont pas listées : leur CSS est servi par Websource Page Styles. Priorité des feuilles de page : 60.

Scripts (position bottom) : wsx-vendor (vendor-theme.js, 150), wsx-theme (theme.js, 200), wsx-categorytree (210), wsx-subcategories (220), wsx-product (230). theme.js se protège contre un double chargement (window.__wsxThemeJs).

Comportements JavaScript (theme.js)

Tout se déclenche par attributs data-*, sans initialisation à écrire :

categorytree.js (arbre des catégories pliable), subcategories.js (carrousel des sous-catégories) et product.js (déclinaisons, quantité, rafraîchissement de la fiche) complètent le socle.

Réglages appliqués à l'activation (global_settings)

• PS_QUICK_VIEW: false (aperçu rapide désactivé).
• modules.to_enable : websourcethemeconfig, websourcepagestyles, websourcebuilder, websourcemegamenu, websourcecartblock, websourceaccountblock, websourcelinklists, websourcefacetedsearch, websourcereassurance, websourcenewproducts, websourcesearchbar, websourceslider, websourcebrands, websourcestoreinfo, websourcenewsletter, websourcegooglereviews, websourcesociallogin, websourcebandeau (ignorés s'ils ne sont pas installés).
• modules.to_disable : ps_mainmenu, ps_shoppingcart, ps_customersignin, ps_linklist, ps_facetedsearch, ps_customeraccountlinks, ps_searchbar, ps_imageslider, ps_newproducts, ps_featuredproducts, ps_bestsellers, ps_specials, ps_brandlist, blockreassurance, ps_contactinfo, ps_emailsubscription, ps_banner, ps_customtext.
• image_types : cart_default 125×125, small_default 98×98, medium_default 452×452, home_default 250×250, large_default 800×800, category_default 1400×280, stores_default 170×115.

Ces listes ne s'appliquent qu'à la boutique active au moment de l'activation (multiboutique : activer boutique par boutique).

Traductions

Toutes les chaînes passent par {l s='…' d='Shop.Theme.*'}, Shop.Forms.*, Shop.Notifications.* (domaines du thème Classic) : les traductions existantes de PrestaShop sont réutilisées. Deux chaînes propres au thème sont à traduire dans International > Traductions > Traductions du thème, domaine Shop.Theme.Global : « Nouveautés » (barre mobile) et « Pause » (carrousel).

Thème enfant

Créez un thème enfant depuis Apparence > Thème et logo > Personnalisation avancée ou à la main (themes/<enfant>/config/theme.yml avec parent: WebsourcePrestashopTheme). Un gabarit placé au même chemin dans l'enfant remplace celui du parent ; les blocs Smarty listés plus haut permettent de ne surcharger qu'une zone ({extends file='parent:catalog/product.tpl'}). Pour du CSS seul, préférez le module Websource Page Styles, qui évite la création d'un thème enfant.

Export / import complet (.wsxtheme)

Le thème lui-même ne contient aucune donnée de boutique. L'export complet d'une configuration (réglages, mises en page, menus, contenus, catalogue de démonstration) est assuré par Websource Theme Config 1.11+ (schéma wsxtheme/1, fichiers .wsxtheme.json / .wsxtheme.zip) : voir la référence développeur de ce module.