Personnalisation & spécificités
Lors de la personnalisation d'un thème PrestaShop, il est recommandé de respecter les bonnes pratiques de surcharges (overrides) pour effectuer des modifications spécifiques à un module, sans altérer son code source d'origine. Cette approche permet de préserver les mises à jour et les évolutions du module tout en bénéficiant d'une personnalisation sur mesure.
Concernant le module EveryParts, deux possibilités s’offrent à vous :
- Cas n°1 - Personnalisation totale : vous souhaitez personnaliser totalement le module EveryParts, soit les couleurs, structures des pages et des ajustements divers et variés.
- Cas n°2 - Personnalisation partielle : vous souhaitez personnaliser de façon succincte le module EveryParts soit les couleurs et des légers ajustements
Cas n°1 - Personnalisation totale
Pour une personnalisation totale, nous vous recommandons de surcharger tous les fichiers du dossier « /modules/everyparts/_dev », ainsi que les fichiers spécifiques nécessaires à la compilation. Cela vous permettra d’écraser toutes les feuilles de styles, fichiers JavaScript et fichiers templates originels du module EveryParts.
Récupération des fichiers nécessaires
- Récupérez et dupliquez les fichiers présents dans le dossier « /modules/everyparts/_dev », en suivant la logique des surcharges PrestaShop, à savoir « /themes/[votre_thème]/modules/everyparts/_dev »
Récupération des fichiers nécessaires à la compilation
- Récupérez et dupliquez les fichiers suivants dans votre thème en suivant la logique de surcharge PrestaShop :
- package.json
- package-lock.json
- postcss.config.js
- webpack.config.js
- .eslintignore
- .eslintrc.js
Cas n°2 - Personnalisation partielle
Pour une personnalisation partielle, nous vous recommandons de suivre la logique décrite ci-dessous. Cela vous permettra de générer une nouvelle feuille de styles (CSS) qui coexistera en parallèle de la feuille de styles originelle. Vous écraserez et ajusterez uniquement ce dont vous avez besoin, tout en profitant de mises à jour simplifiées sur notre module.
Récupération des fichiers back
- Récupérez et dupliquez les fichiers suivants dans votre thème en suivant la logique de surcharge PrestaShop :
- /modules/everyparts/_dev/back/js/back.js
- /modules/everyparts/_dev/back/scss/back.scss
- Renommez les deux fichiers précédant comme suit :
- customback.js
- customback.scss
- Nettoyez le contenu de ces deux fichiers et ne gardez que ce dont vous avez besoin.
Récupération des fichiers front
- Récupérez et dupliquez les fichiers suivants dans votre thème en suivant la logique de surcharge PrestaShop :
- /modules/everyparts/_dev/front/js/front/front.js
- /modules/everyparts/_dev/front/scss/front.scss
- Renommez les deux fichiers précédant comme suit :
- customfront.js
- customfront.scss
- Nettoyez le contenu de ces deux fichiers et ne gardez que ce dont vous avez besoin.
Récupération des fichiers nécessaires à la compilation
- Récupérez et dupliquez les fichiers suivants dans votre thème en suivant la logique de surcharge PrestaShop :
- package.json
- package-lock.json
- postcss.config.js
- webpack.config.js
- .eslintignore
- .eslintrc.js
- Dans le fichier « webpack.config.js », renommez les entry suivantes :
- back.js en customback.js
- back.scss en customback.scss
- front.js en customfront.js
- front.scss en customfront.scss
- Renommez également le nom de l’entrée back par customback
- Renommer également le nom de l’entrée front par customfront
Récupération des fichiers .tpl
- Toujours en suivant la logique de surcharge de PrestaShop, récupérez les templates que vous souhaitez modifier.
Arborescence
À ce stade des modifications, l’arborescence mise en place devrait ressembler à ceci au sein de votre thème.
Le respect de l’arborescence du module originel est une bonne pratique essentielle lors de la personnalisation de notre module EveryParts.
En effet, plus l’arborescence de votre override sera conforme à celle du module initial, plus il sera facile de maintenir à jour notre module.
Compilation
Installation des dépendances
Une fois vos fichiers surchargés, il vous suffit de lancer la commande « npm install » afin d’installer les dépendances requises pour la génération des fichiers CSS et JS. Après le lancement de cette commande un dossier « node_modules » a fait son apparition. Ce fichier n’a pas besoin d’être transféré sur votre serveur, il vous servira uniquement pour la compilation en local.
Commandes
Une fois effectué l’installation des dépendances effectuée, vous n’aurez plus qu’à lancer les commandes pour la compilation. Elles se trouvent dans le fichier « /themes/montheme/modules/everyparts/package.json » dans la section « scripts » :
- npm run build, pour le mode production
- npm run dev, pour le mode développement
La commande « npm run dev » exécute également une surveillance de vos fichiers (watch) ce qui vous permet de déployer vos modifications au fur et à mesure sans avoir besoin de lancer la commande à chaque fois.
Arborescence
En lançant la commande « npm run build », votre arborescence devrait désormais ressembler à ceci :
Related Articles
Pouvez-vous intervenir pour personnaliser le module à mon thème ?
Oui. Notre équipe de webdesigners propose aussi la création de templates sur mesure ou l’adaptation à votre template existant. Contactez-nous pour toutes questions.Le bloc de recherche peut-il se greffer dans d'autres positions / hooks ?
Non, uniquement sur les hooks proposés par la configuration du module. Pour tout ajustement, il est nécessaire d'apporter des modifications au code du module. Comme toute modification fonctionnelle, celles-ci sont facturables et ne seront effectuées ...Le module peut-il s'adapter à mon thème PrestaShop personnalisé ?
Oui. Notre module est entièrement surchargeable. Ce qui signifie que vous pouvez en dupliquer les fichiers de template dans votre thème afin de les adapter à celui-ci. De plus, ce phénomène n’empêche pas les mises à jour futures. Notre équipe se ...