[SOLUCIONADO] Recoger valor campo formulario en product-list.tpl

[OPS]

Nuevamente acudo a vosotros para solicitar vuestra ayuda. En esta ocasión estamos haciendo una ventana emergente con un formulario básico para que el cliente pueda calcular lo que le va a costar la cantidad de producto que desea comprar.

Por lo tanto el formulario tiene tres cajas:

 

1.- Precio

2.- Cantidad deseada

3.- Resultado

 

Los productos los estamos presentando en un listado vertical por categoría.

Cuando en el listado hay un único producto que se vende al peso el formulario funciona perfectamente, os muestro una imagen en el adjunto 1.

 

El problema que tenemos es que cuando en una categoría tenemos varios productos que se venden al peso el formulario no nos está cogiendo correctamente los valores de los campos.

 

El Código que estamos utilizando para el formulario es el siguiente:

 

<form id="calcula_precio"><p>

<input type="text" name="coste" readonly="true" id="Precio" value="{$product.price}" maxlength="5">

</p><br />

<p>X

<input type="text" id="Cantidad" onkeyup="multiplicar();" value=0.00 maxlength="5" autocomplete="off">

</p><br /><p>=

<input type="text" id="resultado" value=0.00></p> <br /><p>

</p>

</form>

 

El código que utilizamos para la función que calcula el valor de la compra en función de la cantidad de producto es el siguiente:

 

<script type="text/javascript">

{literal}

function multiplicar()

{

m1 = parseFloat((document.getElementById("Precio").value).replace(",",".")).toFixed(2);

m2 = (document.getElementById("Cantidad").value).replace(",",".");

r = parseFloat(m1*m2).toFixed(2);

document.getElementById("resultado").value = r;

}

{/literal}

</script>

 

 

El código desde el que llamamos al formulario para que lo abra con el efecto fancybox y en los casos concretos de venta al peso, etc es el siguiente:

 

{if ($product.allow_oosp || $product.quantity > 0)} {*El producto no está en oferta*}

 

{if ({$product.description_short|upper|truncate:360:'...'|strip_tags:'UTF-8'} == "VENTA AL PESO")}

75]<a Class="fancybox" style="background-color: #669900; color:#FFFFFF; font-weight:bold; font-size:9px" href="#{$product.id_product}" title="Indiquenos la cantidad de producto que desea...">Click para indicar peso</a>

 

<div style="display: none;">

75]<div id="{$product.id_product}"style="width:800px;height:170px; overflow:auto; "> <div id="calculapeso" style="position: absolute; left:200px; width:300px; height:100px; z-index :4;">

De manera que lo que hay dentro de este último Div con identificador “calculapeso” es el formulario antes mostrado.

 

La página sobre la que estoy haciendo las pruebas y sobre la que podéis ver el fallo comentado es la siguiente:

 

http://www.chapaypin...?id_category=25

 

Veréis que hay dos productos en la categoría “patatas”, os adjunto imagen en el adjunto2.

 

Cuando hacemos click en el botón del primer producto la función multiplicar() recoge como valor (document.getElementById("Precio").value) el correspondiente al segundo producto y viceversa.

 

¿Alguien podría indicarme por qué puede estar sucediendo esto?

 

Muchas gracias de antemano.

Edited July 24, 2012 by OPS (see edit history)

[OPS]

Bueno, pues hemos solventado el tema haciendo sendas modificaciones en la función que realiza el cálculo y en el propio formulario. El problema radicaba en que estabamos llamando siempre al mismo formulario y por eso no funcionaba correctamente. Cada formulario de los que se generan en la página debe tener un nombre claramente diferenciado, hemos utilizado como veréis el propio nombre el producto, podría haber sido el id o cualquier otro que sepamos que no se va a repetir en el listado.

 

Aquí está el código del formulario

 

<form id="calcula_precio" name="{$product.name}"><p>

 

<input type="text" name="coste" readonly="true" id="Precio" value="{$product.price}" maxlength="5"/>

</p><br />

<p>X

 

 

<input name="peso" type="text" id="quantity_wanted_{$product.id_product|intval}"

onkeyup="multiplicar('{$product.name}');" value="0.0" maxlength="3" autocomplete="off"/>

 

 

</p><br /><p>=

<input type="text" name="total" id="resultado" value="0.00" />

</p>

<br />

 

<p>

 

<label>

<a class="button ajax_add_to_cart_button exclusive"

onClick="$.fancybox.close();"

rel="ajax_id_product_{$product.id_product|intval}"

title="{l s=' Añadi'}">{l s='Comprar solo producto'} </a>

</label>

 

 

</p>

</form>

 

Y aquí el de la función

 

<script type="text/javascript">

{literal}

 

function multiplicar(formulario)

{

var f = document.forms[formulario];

m1 = parseFloat((f.coste.value).replace(",",".")).toFixed(2);

m2 = ((f.peso.value).replace(",","."));

f.peso.value = m2;

r = parseFloat(m1*m2).toFixed(2);

f.total.value = r;

}

{/literal}

</script>

 

Espero que a alguien le sea de ayuda.

 

Saludos,

[nadie]

Hola OPS.

 

Si tienes un hueco libre, crea un tema nuevo aquí: http://www.prestashop.com/forums/index.php?/forum/168-modulos-gratis-sobrecargas-y-otras-astucias-que-cambian-la-vida/ explicando tu solución, que al fin y al cabo es un aporte. (Y así queda todo mas organizado)