Customization & specificities

Customization & specificities


When customizing a PrestaShop theme, it is recommended to follow the best practices of overloads (overrides) to make specific changes to a module, without altering its original source code. This approach preserves module updates and developments while providing custom custom customization.
About the moduleEveryParts, two opportunities are available to you:
  1. Case #1 - Total customization: you want to fully customize the moduleEveryParts, i.e. the colors, pages and various adjustments.
  2. Case #2 - Partial customization: you want to briefly customize the moduleEveryPartseither colors and light adjustments

Case #1 - Total customization

For full customization, we recommend that you overload all files in the folder Â"/modules/everyparts/_devÂ", as well as the specific files necessary for compilation. This will allow you to overwrite all the style sheets, JavaScript files and original template files of the moduleEveryParts.

Recovery of required files

  1. Recover and duplicate the present files in the folder "/modules/everyparts/_devÂ", following the logic of PrestaShop overloads, namely "/themes/[your theme]/modules/everyparts/_devÂ"

Recover the files needed for compilation:

  1. Recover and duplicate the following files in your theme by following the PrestaShop overload logic:
    1. package.json
    2. package-lock.json
    3. postcss.config.js
    4. webpack.config.js
    5. .eslintignore
    6. .eslintrc.js

Case #2 - Partial customization

For partial customization, we recommend that you follow the logic described below. This will allow you to generate a new Style Sheet (CSS) that will coexist in parallel with the original style sheet. You will only crush and adjust what you need, while taking advantage of simplified updates on our module.

Recovery of back files:

  1. Recover and duplicate the following files in your theme by following the PrestaShop overload logic:
    1. /modules/everyparts/_dev/back/js/back.js/back.js
    2. /modules/everyparts/_dev/back/scss/back.scss
  2. Rename the two preceding files as follows:
    1. customback.js
    2. customback.scss
  3. Clean the contents of these two files and keep only what you need.

Recovery of front files:

  1. Recover and duplicate the following files in your theme by following the PrestaShop overload logic:
    1. /modules/everyparts/_dev/front/js/front/front.js/front/front.js
    2. /modules/everyparts/_dev/front/scss/front.scss
  2. Rename the two preceding files as follows:
    1. customfront.js
    2. customfront.scss
  3. Clean the contents of these two files and keep only what you need.

Recover files needed for compilation:

  1. Recover and duplicate the following files in your theme by following the PrestaShop overload logic:
    1. package.json
    2. package-lock.json
    3. postcss.config.js
    4. webpack.config.js
    5. .eslintignore
    6. .eslintrc.js
  2. In the file Â"webpack.config.jsÂ", rename the following entries:
    1. back.js in customback.js
    2. back.scss in customback.scss
    3. front.js in customfront.js
    4. front.scss in customfront.scss
  3. Also rename the name of the back entry bycustomback
  4. Also rename the name of the front entry bycustomfront

Recovering .tpl files

  1. Always following PrestaShop's overload logic, recover the templates you want to modify.

Tree

At this stage of changes, the tree set up should look like this within your theme.



Respecting the tree of the original module is an essential good practice when customizing our EveryParts module.
Indeed, the more the tree of your override is consistent with that of the initial module, the easier it will be to keep our module up to date.

Compilation

Installation of dependencies

Once your files are overloaded, simply run the command Â"npm installto install the dependencies required to manage CSS and JS files. After the launch of this command a folder Â"node_modulesÂ" made its appearance. This file does not need to be transferred to your server, it will only be used for local compilation.

Orders

Once the dependencies are installed, you will only have to start the commands for compilation. They are in the file Â"/themes/mytheme/modules/ukooparts/package.jsonÂ" in the section "scripts:
  1. npm run build, for the production mode
  2. npm run dev, for the development mode
The command Â"npm run devAlso monitors your files (watch) which allows you to deploy your changes as you go without the need to run the order each time.

Tree

By linking the command Â"npm run buildÂ", your tree should now look like this: