Personalización y especificidades

Personalización y especificidades

Al personalizar un tema de PrestaShop, se recomienda seguir buenas prácticas de sobrecargas (overrides) para realizar cambios específicos a un módulo sin alterar su código fuente original. Este enfoque le permite conservar las actualizaciones y desarrollos del módulo y, al mismo tiempo, beneficiarse de una personalización a medida.
Respecto al módulo EveryParts, tienes dos opciones :
  1.  Caso n.° 1: Personalización completa : desea personalizar completamente el módulo EveryParts, es decir, colores, estructuras de página y varios ajustes.
  2.  Caso #2 - Personalización parcial : desea personalizar brevemente el módulo EveryParts, es decir, los colores y pequeños ajustes

Caso #1 – Personalización total

Para una personalización completa, recomendamos anular todos los archivos en la carpeta "/modules/everyparts/_dev", así como los archivos específicos necesarios para la compilación. Esto sobrescribirá todas las hojas de estilo originales, archivos JavaScript y archivos templates del módulo EveryParts.

Recuperando los archivos necesarios


 Recuperar y duplicar los archivos presentes en la carpeta "/modules/everyparts/_dev", siguiendo la lógica de sobrecargas de PrestaShop, es decir "/themes/[your_theme]/modules/everyparts/_dev"

Recuperando los archivos necesarios para la compilación


Obtenga y duplique los siguientes archivos en su tema siguiendo la lógica de sobrecarga de PrestaShop :
  • package.json
  • package-lock.json
  • postcss.config.js
  • webpack.config.js
  • .eslintignore
  • .eslintrc.js

    • Caso #2 – Personalización parcial

    Para una personalización parcial, recomendamos seguir la lógica que se describe a continuación. Esto le permitirá generar una nueva hoja de estilo (CSS) que coexistirá junto con la hoja de estilo original. Sobrescribirás y ajustarás solo lo que necesites, mientras disfrutas de actualizaciones simplificadas en nuestro módulo.

    Recuperando archivos


    1.   Recupere y duplique los siguientes archivos en su tema siguiendo la lógica de sobrecarga de PrestaShop :
      1.   /modules/everyparts/_dev/back/js/back.js
      2.  /modules/everyparts/_dev/back/scss/back.scss
    2.    Cambie el nombre de los dos archivos anteriores de la siguiente manera :
      1. customback.js
      2. customback.scss
    3. Limpia el contenido de estos dos archivos y guarda sólo lo que necesites.

    Recuperar los archivos front

    1.   Recupere y duplique los siguientes archivos en su tema utilizando la lógica de sobrecarga de PrestaShop :
      1. /modules/everyparts/_dev/front/js/front/front.js
      2. /modules/everyparts/_dev/front/scss/front.scss
    2.   Cambie el nombre de los dos archivos anteriores de la siguiente manera :
      1. customfront.js
      2. customfront.scss
    3.   Limpia el contenido de estos dos archivos y guarda sólo lo que necesites.


    Recuperar los archivos necesarios para la compilación

    1. Recupere y duplique los siguientes archivos en su tema, siguiendo la lógica de sobrecarga de PrestaShop :
      1. paquete.json
      2. paquete-lock.json
      3. postcss.config.js
      4. webpack.config.js
      5. .eslintignore
      6. .eslintrc.js
    2.   En el archivo «webpack.config.js», cambie el nombre de las siguientes entradas :
      1. back.js a customback.js
      2. back.scss a customomback.scss
      3. front.js a customfront.js
      4. front.scss a customfront.scss
    3. Cambie también el nombre de la entrada back a customback
    4. Cambie también el nombre de front a customfront

    Recuperación de archivos .tpl

     Siguiendo aún la lógica de sobrecarga de PrestaShop, recupera los templates  que quieras modificar.
     

    Estructura de árbol

    En esta etapa de las modificaciones, la estructura de árbol en su tema debe tener este aspecto.



    Respetar la estructura de árbol del módulo original es una buena práctica esencial a la hora de personalizar nuestro módulo EveryParts.
    De hecho, cuanto más se acerque la estructura de árbol de tu override a la del módulo original, más fácil será mantener nuestro módulo actualizado.

    Compilando

    Instalación de dependencias

    Una vez los archivos sobrecargados, basta con ejecutar el comando «npm install» para instalar las dependencias necesarias para generar los archivos CSS y JS. Al ejecutar este comando, aparecerá una carpeta «node_modules». No es necesario transferir este archivo a tu servidor; sólo se utilizará para la compilación local. 

    Comandos

    Una vez instaladas las dependencias, basta con ejecutar los comandos de compilación. Se encuentran en el archivo «/themes/montheme/modules/everyparts/package.json» en la sección «scripts» :
    1. npm run build, para el modo de producción
    2. npm run dev, para el modo de desarrollo

    El comando «npm run dev» también monitoriza tus archivos (watch), para que puedas desplegar tus cambios sobre la marcha sin necesidad de ejecutar el comando cada vez.

    Árbol

    Al ejecutar el comando «npm run build», tu árbol debería tener ahora este aspecto :