
Tras años de abandono, he podido estar estas semanas atrás rediseñando mi blog (por favor, no seáis muy duros con las críticas, que el diseño no es mi fuerte 😅).

Además, he aprovechado que refactorizaba y limpiaba el código para migrar de Gatsby a Next.js. 
Lo que me hizo migrar fueron dos cosas:
La primera, y la más importante, es aprender algo nuevo.
La segunda… el tema de las imágenes en Gatsby me traía por el camino de la amargura. En Next.js lo veo mucho más claro y sencillo.
Yo de momento estoy contenta con el resultado. ¿Cuál es vuestro favorito?

A ver si ahora que la bebé me deja un poco de tiempo para mí puedo poner algún post de vez en cuando aunque mi tiempo es muy muy limitado y estoy con otros proyectos "tochos" entre manos.


Rediseñando mi blog


A petición de un buen compañero de trabajo, hoy os voy a contar cómo crear un tema hijo (_childtheme_) en Prestashop 1.7.x.

Antes de comenzar, pongámonos con la parte teórica para responder a dos preguntas clave:

## ¿Qué es un tema hijo o _childtheme_?

Un _childtheme_ es un tema que extiende todas las funcionalidades y apariencia de un tema padre o tema base del que extiende.

## ¿Por qué debería crear un childtheme y cuándo?

La ventaja que se obtiene al crear un tema hijo es que podemos modificar la funcionalidad y apariencia de un tema de Prestashop (por ejemplo: del tema por defecto _Classic_) sin tener que preocuparnos de las posibles posteriores actualizaciones del Core de Prestashop, ya que con el tema hijo evitaremos que con esta actualización nuestras modificaciones de plantillas, CSS y/o JS de nuestro tema personalizado se pierdan.

Por tanto, siempre que estemos ante la necesidad de modificar cualquier fichero de la carpeta del tema _Classic_, deberíamos plantearnos crear un tema hijo si queremos que nuestros cambios perduren tras las actualizaciones del Core.

## Crear un childtheme

He aquí la página de producto del tema _Classic_ de Prestashop:

![Página de producto por defecto {1163x786}](/files/default_product_page.png)

Imaginemos que queremos mostrar la referencia debajo del nombre del producto, que el tema _Classic_ no lo hace por defecto.

Es muy tentador ir a la plantilla (.tpl) de la página de producto: _\[rootPath]/themes/classic/templates/catalog/product.tpl_ y realizar ahí las modificaciones oportunas.

Sin embargo, hacer esto es un error ya que si en el futuro se realiza una actualización del Core podríamos perder los cambios realizados.

Para evitar esto, llega la posibilidad de crear un tema hijo.

### ¿Cómo se crea un tema hijo?

Crear un tema hijo es realmente sencillo. El tema padre pone una semillita en el tema madre y... :P

Ahora en serio. Para crear un tema hijo sólo necesitamos crear una carpeta en themes/ con el nombre que queramos ponerle a nuestro tema hijo. Yo me complicaré un montón y le llamaré _csoon-childtheme_.

Tras esto, clonamos la carpeta _config_ del tema padre (_Classic_) en la carpeta del tema hijo (_csoon-childtheme_) y el preview.png (como aún no tengo modificaciones del tema hechas, dejo la misma preview ya que no hay cambios), de modo que tendremos lo siguiente:

![Estructura básica del tema hijo {366x202}](/files/childtheme-folder-structure.png)

Ahora realizaremos unas pequeñas modificaciones en el fichero de configuración del tema hijo: _theme.yml_.

![Fichero de configuración del tema hijo {1229x624}](/files/childtheme-config.png)

Básicamente, lo que he hecho ha sido cambiar la información básica del tema (líneas 1-8) y descomentar (quitar la almohadilla "#") que había delante de _use_parent_assets_ para que se incluyan los assets del tema padre y toda la funcionalidad se mantenga tal cual está en el tema padre.

Con esto, ya tenemos un tema hijo creado. Ahora mismo es un tema hijo sin sentido, ya que no se ha realizado ninguna modificación respecto al tema padre, pero lo que es estar, está. De hecho, es hora de ir al Backoffice > Diseño > Tema y logotipo. Aquí ya debemos visualizar tanto el tema Classic seleccionado como un nuevo tema disponible llamado csoon-childtheme:

![Listado de temas en el BackOffice {1082x990}](/files/backoffice_themes.png)

Seleccionamos el nuevo y ya estamos listos para realizar modificaciones en el tema hijo e ir viéndolos aplicados en el front.

![Tema hijo seleccionado {1081x579}](/files/childtheme_selected.png)

### Realizar modificaciones en el tema hijo

Procedamos a incluir la referencia justo debajo del nombre del producto en la página de producto.

Para ello, creamos una plantilla para la página del producto en el tema hijo: _\[rootPath]/themes/csoon-childtheme/templates/catalog/product.tpl_ que extienda de la plantilla del tema padre.

```html
{extends file='parent:catalog/product.tpl'}
```

Si recargamos la página, seguiremos sin ver cambios, ya que simplemente extendemos de la plantilla del padre, sin cambio realizado aún.

Ahora, para añadir la referencia justo debajo del nombre del producto modificaré el bloque que contiene dicho elemento: _page_header_container_

Así está este bloque en el padre:

```html
{block name='page_header_container'} {block name='page_header'}
<h1 class="h1" itemprop="name">
  {block name='page_title'}{$product.name}{/block}
</h1>
{/block} {/block}
```

Así quedará este bloque en el tema hijo:

```html
{block name='page_header_container'} {block name='page_header'}
<h1 class="h1" itemprop="name">
  {block name='page_title'}{$product.name}{/block}
</h1>
<p class="product-reference">{$product.reference}</p>
{/block} {/block}
```

Para tener algún cambio más de ejemplo, eliminaremos la descripción de la página de producto, lo cual se encuentra en el bloque _product_description_short_ del tema padre:

```html
{block name='product_description_short'}
<div id="product-description-short-{$product.id}" itemprop="description">
  {$product.description_short nofilter}
</div>
{/block}
```

Lo modificamos y quedará así:

```html
{block name='product_description_short'}{/block}
```

Por tanto, la plantilla product.tpl del tema hijo completa, con la referencia incluida y la descripción corta eliminada, quedará así:

```html
{extends file='parent:catalog/product.tpl'} {block name='page_header_container'}
{block name='page_header'}
<h1 class="h1" itemprop="name">
  {block name='page_title'}{$product.name}{/block}
</h1>
<p class="product-reference">{$product.reference}</p>
{/block} {/block} {block name='product_description_short'}{/block}
```

Este asunto, aunque es sencillo, tiene varias vertientes, ya que al igual que se pueden crear plantillas en el tema hijo, se pueden crear nuevos CSS y JS que predominen frente a los existentes en el tema padre.

Para no alargar demasiado el post, lo cortaré por aquí, totalmente dispuesta a hacer un nuevo post de creación de nuevos CSS y JS si así lo necesitáis.

Espero haberos podido ayudar a entender cómo se crean los hijos...


Cómo crear un tema hijo en Prestashop 1.7


En mi anterior [post](/posts/como-instalar-prestashop-utilizando-docker) os conté cómo instalar Prestashop 1.7 utilizando [Docker](https://docs.docker.com/get-started/) y el asistente de instalación que nos ofrece Prestashop. Pero... ¿qué ocurre con aquellos que son tan fanáticos de la consola de comandos?

Prestashop trae consigo un pequeño script de instalación vía consola de comandos que permite realizar la instalación sin necesidad de acceder a nuestro navegador.

La primera parte es exactamente igual que en el post anteriormente mencionado, por ello, os dejo enlace para no repetirnos: [Preparar el entorno Docker](/como-instalar-prestashop-utilizando-docker#preparar-el-entorno-docker).

Tras realizar estos 9 pasos, ya estamos listos para comenzar la instalación de Prestashop.

## Realizar la instalación de Prestashop

En la terminal, vamos a la carpeta raíz de nuestro proyecto y ejecutamos el siguiente comando para conocer las opciones que le podemos enviar al script de instalación:

`$ ./vessel install`

![Parámetros para el script cli {755x487}](/files/how-install-ps-via-cli/index_cli_params.png)

Nota: mediante este comando se ejecuta el script **index_cli.php** que hay en la carpeta de instalación de Prestashop (install-dev/) que es el script que nos permitirá realizar la instalación de Prestashop mediante comando.

Ahora procedemos a crear el comando que nos realizará la instalación completa de nuestro Prestashop y lo dejará listo para comenzar a funcionar con nuestra tienda.

`$ ./vessel install --db_server=mysql --db_user=basicusr --db_password=usersecret --db_create=1 --prefix=ps_ --name=Prestashop --firstname=Cristina --lastname=Soler --email=csoon1992@gmail.com --password=admin --language=es`

Según la configuración deseada, le pasaremos unas opciones u otras. En mi caso me ha valido con las siguientes:

- **db_server:** si el puerto configurado en docker-compose.yml es distinto al puerto por defecto (3306) es muy importante que le especifiquemos el puerto, ya que de otro modo no encontrará el servidor mysql.
- **db_user:** usuario mysql.
- **db_password:** contraseña para el usuario mysql.
- **db_create:** forzamos que se cree la base de datos si no existe, ya que nosotros no hemos creado la base de datos previamente.
- **prefix:** prefijo para las tablas creadas en esta base de datos.
- **name:** nombre de la tienda.
- **firstname:** nombre del usuario admin que se creará.
- **firstname:** apellidos del usuario admin que se creará.
- **email:** correo electrónico del usuario admin que se creará.
- **password:** contraseña del usuario admin que se creará, necesaria para acceder al panel de administración (Backoffice).
- **language:** idioma en el que queremos realizar la instalación.

**Nota:** no te preocupes si olvidas alguna de ellas, pues la mayoría de estas opciones de configuración se pueden modificar desde el Backoffice una vez finalizada la instalación.

Si todo ha ido correctamente, aparecerá el mensaje "**\-- Installation successful! --**".
Es el momento de navegar un poco tanto por el front como por el backoffice y si todo está OK, eliminamos la carpeta de instalación por motivos de seguridad:

`$ sudo rm -R install-dev/`


Cómo instalar Prestashop utilizando Docker y CLI


En este post voy a contar cómo instalar Prestashop utilizando [Docker](https://docs.docker.com/get-started/). Es un post muy básico y sencillo que espero que ayude, especialmente, a los que se estén inicializando en el mundo de Prestashop.

Me centraré en la versión Prestashop 1.7.5.0 (así me servirá para cacharrear y ver las novedades de esta versión que, si son interesantes, os las contaré más adelante) y, en lugar de utilizar el docker-compose.yml que trae Prestashop por defecto, he utilizado un repositorio [prestashop-vessel](https://github.com/csoon1992/prestashop-vessel) que he creado anteriormente con la colaboración de mi programador friki favorito: [Antonio Gázquez](https://antoniogazquez.me/).

¡Vamos al lío!

## Preparar el entorno Docker

Preparar nuestro entorno con Docker es muy sencillo y rápido. Lo único que tenemos que hacer es abrir una terminal y realizar los siguientes pasos:

1. Clonar el repositorio git de prestashop-vessel:
   `$ git clone git@github.com:csoon1992/prestashop-vessel.git`
2. Ir a la carpeta prestashop de este repositorio:
   `$ cd prestashop-vessel`
3. Crear una copia de .env.example llamada .env con la configuración deseada:
   `$ cp .env.example .env`
4. Clonar el repositorio git de Prestashop dentro de vessel:
   `$ git clone git@github.com:PrestaShop/PrestaShop.git prestashop`
5. Ir a la raíz del proyecto
   `$ cd prestashop`
6. Hacer checkout a la rama Prestashop 1.7.5.x para trabajar con esta versión.
   `$ git checkout 1.7.5.x`
7. Eliminar el directorio .git de prestashop de nuestro proyecto para no pushear al repositorio oficial de Prestashop que nos clonamos:
   `$ rm -Rvf ./.git`
8. Arrancar docker:
   `$ cd ..`
   `$ ./vessel start`
   Tras esto, si todo ha ido correctamente, la carpeta de instalación install-dev pasará a llamarse, en este caso: adminps, tal y como he configurado en el .env.
9. Instalar las dependencias de composer (esto llevará un rato):
   `$ ./vessel composer install`

¡Ya tenemos listo nuestro entorno!
Ahora estamos listos para acceder a http://localhost en nuestro navegador para comenzar el proceso de instalación de Prestashop!

**Nota:** si queréis utilizar otro puerto distinto al 80 debéis cambiarlo en el fichero _docker-compose.yml_.

## Realizar la instalación de Prestashop

El proceso de instalación de compone de seis pasos súper sencillos:

### 1. Elección de lenguaje

![Instalación de Prestashop: Paso 1 {990x712}](/files/01_install.png)

### 2. Acuerdo de licencia

Ya sabéis, nos leemos el acuerdo como siempre, aceptamos y listo.

![Instalación de Prestashop: Paso 2 {990x708}](/files/02_install.png)

### 3. Compatibilidad del sistema

Yo de momento pasaré de la recomendación de Prestashop para obtener los datos de internacionalización más recientes, por lo que no actualizaré el **paquete de sistema ICU** ni la **extensión Intl PHP**.

![Instalación de Prestashop: Paso 3 sin error {990x709}](/files/03_install_b.png)

### 4. Información de la tienda

![Instalación de Prestashop: Paso 4 {993x1069}](/files/04_install.png)

### 5. Configuración del sistema

En este paso, se configura la conexión a la base de datos que se utilizará para este proyecto de acuerdo a las variables definidas en el **.env**.
Recordad que la dirección del servidor de base de datos es el nombre del servicio mysql definido en el docker-compose.yml

![Instalación de Prestashop: Paso 5 {991x866}](/files/05_install.png)

Si tras hacer clic al botón "Comprobar conexión a la base de datos ahora" nos aparece un maravilloso mensajito verde, ¡estamos de suerte!

Por último, damos al botón "Siguiente" y se comenzará a instalar Prestashop. Este proceso tardará un rato, ya que se configurará todo el sistema: ficheros de parámetros, tablas en la base de datos, tienda y lenguajes, etc.

Finalmente, obtendremos una pantalla en la que se nos informa de que la instalación ha finalizado por completo.

![Instalación de Prestashop: Paso 6 {986x703}](/files/06_install.png)

Acto seguido, hacemos lo que nos pide Prestashop: eliminamos la carpeta de instalación de nuestro proyecto, por motivos de seguridad.

`$ sudo rm -R install-dev/`

Ahora es el momento de comprobar que tanto el Backoffice como el Front funcionan correctamente. Normalmente, el Backoffice funcionará a la primera. Yo lo primero que hago es acceder a **Parámetros Avanzados > Información** para comprobar que no hay ningún error de configuración:

![Backoffice {437x142}](/files/backoffice_info.png)

Sin embargo, el Front normalmente necesitará que demos permisos de escritura al directorio _assets/_ del tema para que pueda crear el directorio _cache/_ dentro de este.
Por tanto, volvemos a la terminal y ejecutamos el siguiente comando:

`$ sudo chmod a+rw -R themes/classic/assets/`

Recargamos la página del front y veremos que ahora sí, todo está funcionando correctamente.

![Front {2493x2333}](/files/front.png)


Cómo instalar Prestashop utilizando Docker


¡Bienvenidos a mi web personal recién salida del horno!

En ella he incluido un blog donde añadiré algunos posts en los que contaré mis diversas batallas, mis mejores (y no tan mejores) formas de "apagar fuegos" y algunos trucos y recomendaciones.

Además, en un futuro no muy lejano me gustaría desarrollar algún que otro módulo de Prestashop que también compartiré con vosotros.

¡Espero que sea de vuestro agrado!

Cualquier comentario o sugerencia será bien recibida.

Muchas gracias.


Mis artículos

Rediseñando mi blog

Cómo crear un tema hijo en Prestashop 1.7

Cómo instalar Prestashop utilizando Docker y CLI

Cómo instalar Prestashop utilizando Docker

Welcome!