Jump to content
  • 0
Enrique Gómez

[Aporte] Personalización de un producto con un selector en Prestashop

Question

Nos interesaría poner un selector en lugar del campo de texto, ya que Prestashop no ofrece de entrada esta posibilidad. Lo hacemos para un producto en particular con javascript/jquery.

 

Partimos de p.ej un producto camiseta con un campo color de base y otro campo de texto cualquiera. Queremos que el campo de texto color de base se "transforme" en un campo selector.

 

prestashop_personalizacion_sel3.jpg

 

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> para nuestro producto particular (en éste caso el que tiene por referencia camis0001).

 

<script type="text/javascript">
// <![CDATA[

//En el caso de que estemos en nuestro producto con el combo que es el primero (Por eso el 0 en el array $customizationFields)
{if $product->reference =='camis0001' }
{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$customizationFields[0].id_customization_field}

var comboVal='';
{if isset($textFields.$key)}
	comboVal='{$textFields.$key}';
{/if}
//Llamamos al javascript
camis001_texto_to_combo(comboVal);
//Sobreescribimos la función que vacia los campos de texto personalizados y comprueba los campos obligatorios
emptyCustomizations=camis001_emptyCustomizations;
checkCustomizations=camis001_checkCustomizations;
{/if}

// PrestaShop internal settings

 

En este código anterior verificamos que estamos viendo el producto que interesa modificar.

 

Añadiendo código javascript en product.js

 

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

/*Funcion que convierte el texto en un combo y mueve el tab para que la personalización
del producto sea la primera
*/
function camis001_texto_to_combo(val){
var option0='<option value=""></option>';
var option1='<option value="Blanco" '+((val=='Blanco')?"selected":"")+' >Blanco</option>';
var option2='<option value="Rojo" '+((val=='Rojo')?"selected":"")+' >Rojo</option>';
var option3='<option value="Azul" '+((val=='Azul')?"selected":"")+' >Azul</option>';
var option4='<option value="Negro" '+((val=='Negro')?"selected":"")+' >Negro</option>';
$(document).ready(function () {
	$("#textField0").replaceWith('<select id="textField0" name="'+$("#textField0").attr("name")+'" class="'+$("#textField0").attr("class")+' ">' +
			option0+
			option1 +
			option2 +
			option3 +
			option4 +
			'</select>');
	//Movemos las tabs
	$('a[href="#idTab10"]').parent().prependTo($('#more_info_tabs'));
	$("#more_info_tabs").idTabs("idTab10");
});

}

 

Aquí hacemos el cambio de caja de texto a selector utilizando jquery (ponemos el selector a pelo, aquí cada uno pondria sus valores, yo pongo una lista de colores). 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 (lo ponemos también en product.js).

 

// función idéntica a la original emptyCustomizations en tools.js linea 218
// pero teniendo en cuenta que en nuestro caso tenemos un input de tipo select que no necesita resetar el html
function camis001_emptyCustomizations(){
if(typeof(customizationFields) == 'undefined') return;

$('.customization_block .success').fadeOut(function(){
	$(this).remove();
});
$('.customization_block .error').fadeOut(function(){
	$(this).remove();
});
for (var i = 0; i < customizationFields.length; i++)
{
	var el=$('#' + customizationFields[i][0]);
	if(!el.is('select')){//Si es un select no hay que vaciar el html
		el.html('');
	}  
	el.val('');
}
}

//función idéntica a la original checkCustomizations en tools.js linea 204
//pero teniendo en cuenta que en nuestro caso tenemos un input de tipo select
function camis001_checkCustomizations()
{
var pattern = new RegExp(' ?filled ?');

if (typeof customizationFields != 'undefined')
	for (var i = 0; i < customizationFields.length; i++)
	{  
		var el=$('#' + customizationFields[i][0]);
		/* If the field is required and empty then we abort */

		if(el.is('select')){//Si es un select no hace falta mirar el html, con mirar el valor tenemos suficiente
			if (parseInt(customizationFields[i][1]) == 1
					&& (el.val().length == 0)
						&& !pattern.test(el.attr('class')))
				return false;
		}else{
			//original
			if (parseInt(customizationFields[i][1]) == 1
					&& (el.html() == '' ||  el.text() != el.val())
						&& !pattern.test(el.attr('class')))
				return false;
		}

	}
return true;
}

 

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.jpg

 

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

 

prestashop_personalizacion_sel4.jpg

Edited by egomezpe

Share this post


Link to post
Share on other sites

13 answers to this question

Recommended Posts

  • 0

Nos interesaría poner un selector en lugar del campo de texto, ya que Prestashop no ofrece de entrada esta posibilidad. Lo hacemos para un producto en particular con javascript/jquery.

 

Partimos de p.ej un producto camiseta con un campo color de base y otro campo de texto cualquiera. Queremos que el campo de texto color de base se "transforme" en un campo selector.

 

prestashop_personalizacion_sel3.jpg

 

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> para nuestro producto particular (en éste caso el que tiene por referencia camis0001).

 

<script type="text/javascript">
// <![CDATA[

//En el caso de que estemos en nuestro producto con el combo que es el primero (Por eso el 0 en el array $customizationFields)
{if $product->reference =='camis0001' }
{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$customizationFields[0].id_customization_field}

var comboVal='';
{if isset($textFields.$key)}
	comboVal='{$textFields.$key}';
{/if}
//Llamamos al javascript
camis001_texto_to_combo(comboVal);
//Sobreescribimos la función que vacia los campos de texto personalizados y comprueba los campos obligatorios
emptyCustomizations=camis001_emptyCustomizations;
checkCustomizations=camis001_checkCustomizations;
{/if}

// PrestaShop internal settings

 

En este código anterior verificamos que estamos viendo el producto que interesa modificar.

 

Añadiendo código javascript en product.js

 

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

/*Funcion que convierte el texto en un combo y mueve el tab para que la personalización
del producto sea la primera
*/
function camis001_texto_to_combo(val){
var option0='<option value=""></option>';
var option1='<option value="Blanco" '+((val=='Blanco')?"selected":"")+' >Blanco</option>';
var option2='<option value="Rojo" '+((val=='Rojo')?"selected":"")+' >Rojo</option>';
var option3='<option value="Azul" '+((val=='Azul')?"selected":"")+' >Azul</option>';
var option4='<option value="Negro" '+((val=='Negro')?"selected":"")+' >Negro</option>';
$(document).ready(function () {
	$("#textField0").replaceWith('<select id="textField0" name="'+$("#textField0").attr("name")+'" class="'+$("#textField0").attr("class")+' ">' +
			option0+
			option1 +
			option2 +
			option3 +
			option4 +
			'</select>');
	//Movemos las tabs
	$('a[href="#idTab10"]').parent().prependTo($('#more_info_tabs'));
	$("#more_info_tabs").idTabs("idTab10");
});

}

 

Aquí hacemos el cambio de caja de texto a selector utilizando jquery (ponemos el selector a pelo, aquí cada uno pondria sus valores, yo pongo una lista de colores). 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 (lo ponemos también en product.js).

 

// función idéntica a la original emptyCustomizations en tools.js linea 218
// pero teniendo en cuenta que en nuestro caso tenemos un input de tipo select que no necesita resetar el html
function camis001_emptyCustomizations(){
if(typeof(customizationFields) == 'undefined') return;

$('.customization_block .success').fadeOut(function(){
	$(this).remove();
});
$('.customization_block .error').fadeOut(function(){
	$(this).remove();
});
for (var i = 0; i < customizationFields.length; i++)
{
	var el=$('#' + customizationFields[i][0]);
	if(!el.is('select')){//Si es un select no hay que vaciar el html
		el.html('');
	}  
	el.val('');
}
}

//función idéntica a la original checkCustomizations en tools.js linea 204
//pero teniendo en cuenta que en nuestro caso tenemos un input de tipo select
function camis001_checkCustomizations()
{
var pattern = new RegExp(' ?filled ?');

if (typeof customizationFields != 'undefined')
	for (var i = 0; i < customizationFields.length; i++)
	{  
		var el=$('#' + customizationFields[i][0]);
		/* If the field is required and empty then we abort */

		if(el.is('select')){//Si es un select no hace falta mirar el html, con mirar el valor tenemos suficiente
			if (parseInt(customizationFields[i][1]) == 1
					&& (el.val().length == 0)
						&& !pattern.test(el.attr('class')))
				return false;
		}else{
			//original
			if (parseInt(customizationFields[i][1]) == 1
					&& (el.html() == '' ||  el.text() != el.val())
						&& !pattern.test(el.attr('class')))
				return false;
		}

	}
return true;
}

 

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.jpg

 

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

 

prestashop_personalizacion_sel4.jpg

 

Notificación para egomezpe

 

* Aporte agregado al "Índice de Aportes" : http://www.prestasho...s-foro-espanol/

 

PD: Gracias por su colaboración con la Comunidad de Prestashop.

Share this post


Link to post
Share on other sites
  • 0

Hola Enrique, tengo un problema con el modulo personalizacion de producto, y es que me aparece 2 veces, una en el pb-left column (que es donde lo quiero)

Y otra vez debajo de las tabs del producto

¿me puedes ayudar a resolverlo?

Mi web www.lagoa.es

mi version 1.5.3

Gracias de antemano!

Share this post


Link to post
Share on other sites
  • 0

se podria hacer este aporte pero cobrar x la personalizacion??

 

Bueno en realidad este aporte lo único que hace es transformar una caja de texto en un selector, no modifica para nada el funcionamiento de "customización" que tiene Prestashop. Para cobrar más tienes que ir vía combinaciones, y haría falta algo más de Javascript para que al coger la combinación de "personalización" (+X €) se mostrase la caja de texto (o selector) de personalización (y se escondiese en caso contrario)

Share this post


Link to post
Share on other sites
  • 0

Hola Enrique,

 

Mi duda es cómo puedo modificar todo este código para poner un campo selector debajo de otro, ya que necesito que un cliente pueda modificar varias cosas de un producto.

Tengo que modificar sólo el fichero product.js?

Espero que me puedas orientar, pues voy bastante perdida...trabajo con la versión 1.5.6 de prestashop.

 

Gracias!

Share this post


Link to post
Share on other sites
  • 0

Hola buenas, muchas gracias por el post.

Tengo una duda y es que no se donde debería de insertar el primer codigo script dentro de mi product.tpl. Gracias

Share this post


Link to post
Share on other sites
  • 0

Actualizado a 1.6 http://pelechano.es/personalizacion-de-un-producto-con-un-selector-en-prestashop-1-6/


Tal vez esto ya no cabe en el rango, ya que uso prestashop 1.6 pero hay alguna forma de poner estos custom fields en el quick view, estoy algo desesperado :D

 

No lo se Dany, parece que el quick view te manda directamente a la página completa si quieres rellenar los campos y estos son obligatorios, si no lo son, tampoco los muestra (vamos que no los tiene en cuenta porque al ser un proceso en dos etapas no lo han metido en el quick view..). No debe ser trivial hacer que se pueda customizar desde el quick view..

Edited by Enrique Gómez

Share this post


Link to post
Share on other sites
  • 0

Encontré un tutorial donde ya no necesitas dar guardar solo añadir carrito, el autor me sugirio que hiciera post aqui en el foro pero al parecer si es mas complicado de lo que pense. :S

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×