Personalización de un producto con un selector en Prestashop

Prestashop 1.5 ofrece la posibilidad de añadir campos personalizados a un producto, concretamente en el apartado Productos > Personalización. Estos campos sólo pueden ser cajas de texto, pero se podría aprovechar mas esta sección.

Se me ocurre p.ej si tenemos un producto muy personalizable como puede ser una camiseta donde se podría seleccionar el color de base y luego ir añadiendo un diseño y demás. Para el color de base ya tenemos el generador de combinaciones que nos ayuda a generar “subproductos” de ese producto base y cada una de esas combinaciones tiene su stock y su impacto en el precio.

Eso esta muy bien en la mayoría de casos, pero en el caso de las camisetas podemos tener un producto altamente customizable que se cree bajo demanda, es decir tenemos un color a escoger entre un montón (incluso podría utilizarse un color picker) y no queremos mantener el stock de cada uno de ellos, esto es, una vez hecho el pedido se “creara” el color de la camiseta (como cuando vamos a comprar pintura).

Pues bien, en un principio nos interesaría poner un selector en lugar del campo de texto, pero Prestashop no ofrece de entrada esta posibilidad, así que habría que buscarse la vida entre las plantillas, hooks, sobrescribiendo controladores  y demás posibilidades que existen.

En una primera aproximación, vale la pena centrarse en usar código javascript para modificar un campo de texto ya existente de la forma menos intrusiva posible. Entonces partimos de por ejemplo un campo color de base que sera el selector obligatorio y otro campo de texto normal para probar que nuestro código no tenga efectos laterales con los demás campos.

prestashop_personalizacion_sel3

Modificando product.tpl

La plantilla que hay que tocar es product.tpl. Estas modificaciones las realizamos en nuestro tema (p.ej copia del tema por defecto). Ponemos el código al principio de la  sección <script>.

En este código verificamos que estamos viendo el producto que interesa modificar. Utilizamos las variables smarty $textFields y $customizationFields. $textFields es un array asociativo que contiene los valores de los campos personalizables (en caso de haberlos guardado con el botón guardar)

La clave de ese array asociativo esta compuesta por la cadena textFields_Id del producto_Id del campo personalizable. Para encontrar el id del campo personalizable necesitamos de la variable $customizationFields.

Este array esta ordenado tal y como lo hemos definido en el back office, así que cogiendo el primer elemento encontraremos el id que interesa.

De esta forma recuperamos el valor del selector en caso de que exista, sino estará vacío.

Añadiendo código javascript en product.js

El código javascript lo podemos poner al final de de product.js.

Aquí hacemos el cambio de caja de texto a selector utilizando jquery. El identificador del campo de texto será textField0 porque es el primero. Aprovechamos para mover también el tab de personalización de producto para que aparezca el primero.

El problema que surge es que al añadir a la cesta el código javascript del módulo blockcart usa dos funciones que se encuentran en tools.js. Una se ocupa de vaciar el campo de texto una vez añadido el producto (emptyCustomizations) y otra de validar los campos obligatorios (checkCustomizations). Estas dos funciones no tienen en cuenta a nuestro recién añadido selector. Sobrescribimos estas dos funciones, copiamos íntegramente su código y añadimos una condición para que tenga en cuenta si el campo es un selector.

 Finalmente

Con estas modificaciones tenemos un selector además de tener la pestaña de personalización de producto en primer plano.

prestashop_personalizacion_sel

La validación de campo obligatorio funciona perfectamente y podemos ver como se pasa esta información a la siguiente etapa

prestashop_personalizacion_sel4

  • rorifra

    Muy interesante y muy currado los artículos … lo has probado en 1.6?
    gracias,

    • https://pelechano.es Enrique Gómez

      Gracias. No lo he probado pero diria que si.

  • https://pelechano.es Enrique Gómez

    Gracias. No lo he probado pero diria que si..

  • Isabel

    Hola Enrique,

    veo que no hay entradas desde hace un año, pero a ver si tengo suerte…

    Estoy empezando con el prestashop, así que no controlo mucho y despues de mucho buscar por internet aquí en tu web he encontrado lo que busco! Y si todo esto lo has aprendido tú sólo, oooole tú!

    He provado de hacer lo que explicas y no consigo que salga el desplegable. No sé si es porque en la versión que utilizo, esto no se puede hacer :s. Me he descargado el prestashop 1.6.1.0. pero veo que a rorifra le comentas que sí puede funcionar.

    No sé dónde tiene que ir exactamente las declaraciones de $textFields y $customizationFields, puede ser ese el problema?. Creo que lo primero lo he puesto bien

    También quisiera saber si este tutorial “Añadir selectores en la sección de personalizacion en Prestashop (I)” puedo hacerlo para la versión 1.6.1.0.

    muchas gracias!

    • https://pelechano.es/ Enrique Gómez

      El artículo es para 1.5 .
      No tengo todo el tiempo que me gustaría para actualizarlo a 1.6 pero probaré que tal funciona en 1.6 y probablemente lo actualize-> ya te comento algo

      El otro tutorial es mas complicado y en principio nofuncionaría para 1.6.

  • Thiago Lopez Alfaro

    hola me podrias ayudar? necesito poner en un cuadro de texto a todos los productos de mi tienda pero cuando lo hago desde excel no aparece el cuadro y cuando voy al backO. de presta shop y pongo un nombre ya me aparece pero la idea es poner a todos de una sola vez. muchas gracias de ante mano.