[SOLUCIONADO] condicionar lista de productos

[silo]

Hola a todos.

Necesito saber cómo podría lograr que el proceso se parase cuando llegue al cupo máximo de productos seleccionados.

Estoy utilizando los archivos de Simplecart (http://simplecartjs.com) y sólo necesito parte del proceso que este programa ofrece y no tengo más remedio que modificarlo.

Para que lo veáis con más claridad, aquí os dejo el código completo a ver si alguien sabe o se le ocurre alguna solución.

Código:

<script type="text/javascript">
function tope()
{
var contador= document.getElementById("cantidad").innerHTML; //recoge cantidad de productos que lleva hasta el momento (correcto)
if (contador >=3) // limita sólo a 3 elementos seleccionados (correcto)
	{
    alert('Ya tienes tu lote completo con ' + contador + ' productos seleccionados.');
	// AQUÍ SE DEBERÍA DETENER EL PROCESO 
}
else
{
	alert('Continúa seleccionando productos'); // continúa normalmente agregando productos (correcto)
}   
}
</script>

El código del botón es el siguiente:

Código:

<li class="Cart_shelfItem" >
		<h2 class="item_name">producto-1</h2>
		<input type="text" class="item_quantity" value="1" readonly="readonly" /> // solo se debe poner un solo producto  (correcto)
		<input onclick="tope()" class="item_add" id="enviar" type="button"  value="Enviar"  /> //botón que desencadena el evento
</li>

El problema es que si llega al tope de 3 elementos debería detener el proceso y no dejarlo continuar.

En el sitio real tendrían que haber muchos botones (uno por cada producto) y debería bloquearlos según se haga clic en cualquiera de ellos ¿esto cómo se podría hacer?

Estoy probando con return false; pero el evento ya se ha desencadenado al hacer clic en el botón y no hace efecto, también he probado con
document.getElementById(enviar).disabled=true; pero en este caso el problema sería el ID, debería ser un ID general para que valiera según a qué botón le tocara, no se si me he explicado bien y espero que a alguien se le ocurra alguna solución porque no doy con ella.

En realidad lo único que necesito es un script que me permita agregar una cierta cantidad de productos a un div al estilo carro de compra, agregar y quitar cualquier producto sobre la marcha y ya está, ¿conocéis algo así de simple que se pueda descargar?

Saludos y muchas gracias.

[alexg88]

Puede pasarle la referencia a this a la función tope.

Código Javascript:

function tope(elemento)
{
var contador= document.getElementById("cantidad").innerHTML; //recoge cantidad de productos que lleva hasta el momento (correcto)
if (contador >=3) // limita sólo a 3 elementos seleccionados (correcto)
    {
    alert('Ya tienes tu lote completo con ' + contador + ' productos seleccionados.');
    elemento.disabled=true;
}
else
{
    alert('Continúa seleccionando productos'); // continúa normalmente agregando productos (correcto)
}   
}
 

Código HMTL:

<li class="Cart_shelfItem" >
        <h2 class="item_name">producto-1</h2>
        <input type="text" class="item_quantity" value="1" readonly="readonly" /> // solo se debe poner un solo producto  (correcto)
        <input onclick="tope(this)" class="item_add" id="enviar" type="button"  value="Enviar"  /> //botón que desencadena el evento
</li>
 

[silo]

Hola alexg88, ante todo muchas gracias por responder.

He probado el código que me pasas y sigue sin funcionar, el script sigue agregando productos ignorando la instrucción.

Supongo que donde pone (elemento) tendría que poner el nombre del elemento que deseo bloquear, en este caso debería ser el botón o la etiqueta <LI> donde está el botón ¿verdad?, pero desde luego como (elemento) no funciona.

También había pensado que se podría modificar con una variable las propiedades del botón para cambiar el estado "class=" de la siguiente forma.

Código:

function tope(elemento)
    {
    var contador= document.getElementById("cantidad").innerHTML; 
    var estado = " ";
    if (contador >=3)
        {
        alert('Ya tienes tu lote completo con ' + contador + ' productos seleccionados.');
        estado =" ";
    }
    else
    {
        alert('Continúa seleccionando productos'); 
        estado ='class="item_add"';
    }  
    }

</script>

y en el botón poner una variable que recoja el estado de class, por ejemplo

Código:

<input type="button" onclick="tope()"  AQUÍ VARIABLE id="enviar"  value="add to cart"  />

¿Podría funcionar de esta forma? y cómo debería poner en el botón el script para insertar la variable donde debe aparecer "class=" " o class="item_add".

Saludos

[alexg88]

Tienes que pasarle this a la función tope y veo que en el código que has puesto tú no se lo estabas pasando.

[silo]

Perdona pero no lo pillo, ¿te refieres a ponerlo de esta forma?

this.elemento.disabled=true;
this.disabled=true;

Lo siento pero no entiendo mucho de javascript, si es algo más laborioso te pediría que me especificaras un poco más cómo lo paso.

Muchas gracias y perdona las molestias.

[alexg88]

Me refiero en el evento onclick:

Código HTML:

<input type="button" onclick="tope(this)" class="enviar"  value="add to cart"  />
 

[silo]

Esto es otra cosa, ya funciona perfectamente.

Ahora voy a ver si los puedo activar a todos los desactivados en caso de quitar algún producto de la lista y que no llegue al tope máximo.

Muchas gracias, me has ayudado mucho y espero no tener que molestarte de nuevo