Añadir selectores en la sección de personalizacion en Prestashop (II)

En la anterior entrada hemos conseguido en el back office gestionar la personalización de un producto con selectores, pero de momento no tiene ningún efecto en nuestra parte visible de la tienda.

El objetivo ahora es mostrar esa información que hemos conseguido introducir mediante el back office en el front office de la tienda para que se pueda utilizar por los clientes y posteriormente se pueda visualizar en las diferentes pantallas donde se muestran los pedidos.

anadir-selectores-front

En esta imagen se ven seleccionados los ficheros en la carpeta override que crearemos ahora.

anadir-selectores-front+3

Presentación de los selectores en la página de producto

En este caso el controlador que hay que modificar es ProductControllerCore y la plantilla product.tpl la modificamos directamente en nuestro tema.

La función que se ocupa de generar el contenido para la plantilla dentro de la clase ProductControllerCore es initContent(). Sobrescribimos la función en la clase hija y en este caso llamamos primero a la función padre para luego añadir nuestra nueva variable de forma homóloga a como se hace para los otros dos campos

Hay que cambiar ligeramente getProductCustomization de la clase Cart para que tenga en cuenta nuestro nuevo tipo de campo, así que creamos una clase Cart que hereda de CartCore para sobrescribir ese método. La ponemos en la carpeta override classes junto a la clase Product.

Modificamos la plantilla product.tpl en nuestro tema para que tenga una nueva sección para pintar los selectores (justo después de la sección de Texto).

Las opciones se sacan del nuevo atributo combo que se corresponde al campo combo de la tabla ps_customization_select_field_lang. Los retornos de carro nos marcan cada item del selector.

Guardado de los selectores en la página de producto

La función que se ocupa de guardar los campos de texto es textRecord(). Sobrescribimos esta función copiándola de la clase core y la modificamos para que además guarde en el carrito nuestros campos selectores.

Como vimos en una entrada anterior hay un par de funciones javascript que se ocupan de validar y vaciar los campos al añadir el producto a la cesta que no están pensadas para selectores. Las sobrescribimos al principio de product.tpl en la sección de <script>.

Utilizamos las mismas funciones que entonces en el mismo fichero product.js. En este caso las he añadido el prefijo custom_.

 Buscando plantillas donde se visualice los productos del pedido y un par de bugs de prestashop

El grueso del trabajo ya esta hecho, pero nos falta tener en cuenta todas las pantallas donde por un motivo o por otro se visualiza la información del producto en el pedido. Entre otras la pantalla del back office donde se visualizan los productos en los pedidos y al hacer el checkout de la cesta en el front office.

Lo mejor es hacer una búsqueda del texto CUSTOMIZE_TEXTFIELD en todas las plantillas del proyecto.  Una vez descartadas las del tema default salen 21. P.ej en el front end tenemos

anadir-selectores-front+2

Simplemente añadimos la condición OR y el valor aparecerá. Estas modificaciones las hacemos directamente en nuestro tema.

En el back office la plantilla que interesa es _customized_data.tpl (sección productos en la pantalla de detalle de pedido). La sobrescritura de esta plantilla en la carpeta override no funciona directamente. Me imagino que es algo que tendrán en cuenta para futuras versiones.

De momento o machacas directamente la plantilla original o sobrescribes la plantilla orders/helpers/view/view.tpl donde se hace un include de _customized_data.tpl. El único objetivo de sobrescribir view.tpl es que incluya nuestra versión modificada de forma que en vez de

ponemos

Así funciona el sistema de override, aunque me he encontrado que el tema de las traducciones falla en prestashop para este caso (me salia la pantalla de pedidos en inglés en lugar de español). Lo que he hecho es en la clase smartyadmin.config.inc.php al final del método smartyTranslate modificar un fallo que producía que no buscase las traducciones bien. Supongo que en futuras versiones lo solucionarán.

Todo el código de este ejemplo estructurado a partir de la carpeta override te lo puedes descargar aquí. Los ficheros product.tpl, product.js y también smartyadmin.config.inc.php desde éste otro link. Las modificaciones de la búsqueda de CUSTOMIZE_TEXTFIELD te las dejo para tí 😉.