Jump to content

[solucionado]seleccionar checkbox en ficha de producto antes de añadir al carrito

FERMB

By FERMB
in Discusión general

 Share

Recommended Posts

FERMB Newbie

FERMB

Posted
Posted (edited)

Hola a todos.

Para prestashop 1.5.6

En un producto específico del catálogo de la tienda, hemos hecho que aparezca un checkbox que hay que aceptar para que se añada al carrito.

Se trata de confirmar que se han leido unas condiciones de compra para ese artículo, antes de que se añada al carrito.

El código añadido en el product.tpl, es:

 

<!-- Codigo añadido---> 

{else if $product->id == 7331}
              <script type="text/javascript">
              //<![CDATA[
              var msg = "{l s='Read the SAT conditions before confirming your purchase.' js=1}";
              {literal}
              function acceptCGV()
              {
                if ($('#cgv').length && !$('input#cgv:checked').length)
                {
                  alert(msg);
                  return false;
                }
                else
                  return true;
              }
              {/literal}
              //]]>
              </script>
                 
 
<p id="add_to_cart" class="buttons_bottom_block">
<span>
</span>
<input type="submit" name="Submit" value="{l s='Add to cart'}" class="exclusive" onClick="return acceptCGV();"/>
</p>
                      
            <p class="checkbox" style="display:inline-block; text-align:left;">
              <input type="checkbox" name="cgv" id="cgv" value="1" checked="checked"/>
              <label for="cgv">{l s='I read and agree to the'}</label> <a href="{$base_dir}/content/23-condiciones-sat?content_only=1" class="iframe" style="text-decoration:underline;">{l s='SAT Conditions'} </a>
            </p>
            <script type="text/javascript">$('a.iframe').fancybox();</script> 
 
<!--  FIN Codigo añadido--->  
{else}
<p id="add_to_cart" class="buttons_bottom_block">
<span>
</span>
<input type="submit" name="Submit" value="{l s='Add to cart'}" class="exclusive" />
</p>
 
_______________________________________________
 
El caso es que el codigo, hace lo que se supone que debe hacer y muestra el mensaje de error si se pulsa el boton de añadir al carrito y no está el checkbox seleccionado, pero... no detiene el proceso de añadir el artículo al carrito, por que en cuanto cerramos la ventana que muestra el mensaje, el producto se añade al carrito.
Alguna sugerencia?
Que hacer para que el prodcuto no se añada al carrito, si no se marca el checbox?.
Que nos falta? Cual es el error?.
Edited by FERMB (see edit history)
Link to comment
Share on other sites
Enrique Gómez Collaborator

Enrique Gómez

Posted
Posted

Efectivamente en ajax-cart.js esta la función add que es la que se llama.

 

El evento click se le añade via jquery al elemento <p> con id=add_to_cart

 

Linea 43 aprox

//for product page 'add' button...
		$('#add_to_cart input').unbind('click').click(function(){
			ajaxCart.add( $('#product_page_product_id').val(), $('#idCombination').val(), true, null, $('#quantity_wanted').val(), null);
			return false;
		});

Puedes añadir tu código ahí de forma que en caso de no aceptar no llame a ajaxcart.add que es el que añade el producto al carrito

  • Like 1
Link to comment
Share on other sites
FERMB Newbie

FERMB

Posted
  • Author
Posted (edited)

Vaya!!

incluyo en el script que he añadido en el product.tpl

function acceptCGV()
              {
                if ($('#cgv').length && !$('input#cgv:checked').length)
                {
                $('#add_to_cart input').click(function(){
                $('#add_to_cart input').unbind();
                });
                alert(msg);
                  return false;
 
para hacer que si el checkbox no está seleccionado detenga la funcion aplicada al input "add to cart", pero veo que habrá que aplicar el unbind, antes de que se defina la funcion, es decir en el ajaxcart.js
 
He creado un ajaxcart.js en la carpeta js/modules/blockcart dentro de mi theme para no tocar el modulo original
El problema es que no me reconoce la sintasix para que solo lo haga en el producto con id 7331 y me anula la funcion de añadir el carrtito en todos los articulos. Agg!! Llevo un buen rato probando diferentes sintasix y no doy con la correcta.!!
Podeis por favor,  indicarme la sintasix a incluir en el ajaxcart.js para que anule la funcion ajaxCart.add si no está el checkbox checked y solo en el producto.id =7331.
Edited by FERMB (see edit history)
Link to comment
Share on other sites
Enrique Gómez Collaborator

Enrique Gómez

Posted
Posted

En ajaxCart linea 43 aprox

//for product page 'add' button...
		$('#add_to_cart input').unbind('click').click(function(){
			var id_product=$('#product_page_product_id').val();
			if(id_product == 7331 && $('#cgv').length && !$('input#cgv:checked').length){				
				alert(msg);
			}else{
				ajaxCart.add( $('#product_page_product_id').val(), $('#idCombination').val(), true, null, $('#quantity_wanted').val(), null);
			}		
			return false;
		});
Link to comment
Share on other sites
FERMB Newbie

FERMB

Posted
  • Author
Posted

Gracias Enrique.

Supongo que esto es lo que no poníamos correctamente  var id_product=$('#product_page_product_id').val(); pero creo que con el resto del codigo que pones, lo que sucederá es que como el chekbox esté sin clicar, sale el alert y no se añade al carrito, pero aunque selecciones el checkbox despues del aviso de alert, no se vuelve a activar el boton de añadir al carrito, salvo que se recargue la pagina.

Lo pruebo y te digo.

Gracias de nuevo.

Link to comment
Share on other sites
Enrique Gómez Collaborator

Enrique Gómez

Posted
Posted

La var mssg no te queda otra que crearla en el product.tpl. como una variable global. Luego se lee sin problemas desde ajax-cart.js

 

p.ej

// Translations
var doesntExist = '{l s='This combination does not exist for this product. Please select another combination.' js=1}';
var doesntExistNoMore = '{l s='This product is no longer in stock' js=1}';
var doesntExistNoMoreBut = '{l s='with those attributes but is available with others.' js=1}';
var uploading_in_progress = '{l s='Uploading in progress, please be patient.' js=1}';
var fieldRequired = '{l s='Please fill in all the required fields before saving your customization.' js=1}';
Link to comment
Share on other sites
FERMB Newbie

FERMB

Posted
  • Author
Posted (edited)

Así, para incluir un checkbox de condiciones para un artículo en concreto,  la solución es:

en product.tpl:

Sustituir

<p id="add_to_cart" class="buttons_bottom_block">
<span>
</span>
<input type="submit" name="Submit" value="{l s='Add to cart'}" class="exclusive" />
</p>
 
Por:
 
<!-- GP Condiciones especificas para este prodcuto--->
{else if $product->id == 331}
           
<p id="add_to_cart" class="buttons_bottom_block">
<span>
</span>
<input type="submit" name="Submit" value="{l s='Add to cart'}" class="exclusive"/>
</p>                      
            <p class="checkbox" style="display:inline-block; text-align:left;">
              <input type="checkbox" name="cgv" id="cgv" value="1" checked="checked"/>
 
            </p>
            <script type="text/javascript">$('a.iframe').fancybox();</script>    
 
<!-- GP FIN Condiciones especificas para este prodcuto--->  
 
{else}
<p id="add_to_cart" class="buttons_bottom_block">
<span>
</span>
<input type="submit" name="Submit" value="{l s='Add to cart'}" class="exclusive" />
</p>
_____________________________________
 
Sustituir "ruta a condiciones" por la url hacia el cms o el html de condiciones 
331 es la id del producto del ejemplo, sustituir por la id que corresponda, tanto en el tpl como en el js.
 
EDITO: en la parte  //traslations dentro de script en product.tpl,  añadir la variable para las traducciones:
var msgconditions = '{l s='Read the conditions before confirming your purchase.' js=1}';
hay que darle un nombre específico y no msg por que esa variable ya se usa .
 
y el ajax-cart.js cambiar hacia la llinea 43, el apartado //for product page 'add' button... 
Por:
 
//for product page 'add' button... 
$('#add_to_cart input').unbind('click').click(function(){
var id_product=$('#product_page_product_id').val();
if(id_product == 331 && $('#cgv').length && !$('input#cgv:checked').length){
alert(msgconditions);
}else{
ajaxCart.add( $('#product_page_product_id').val(), $('#idCombination').val(), true, null, $('#quantity_wanted').val(), null);
}
return false;
});

 

EDITO: 331 es la id del producto del ejemplo, Recordad, sustituir por la id que corresponda, tanto en el tpl como en el js.

Edited by FERMB (see edit history)
Link to comment
Share on other sites
FERMB Newbie

FERMB

Posted
  • Author
Posted

 

La var mssg no te queda otra que crearla en el product.tpl. como una variable global. Luego se lee sin problemas desde ajax-cart.js

 

p.ej

// Translations
var doesntExist = '{l s='This combination does not exist for this product. Please select another combination.' js=1}';
var doesntExistNoMore = '{l s='This product is no longer in stock' js=1}';
var doesntExistNoMoreBut = '{l s='with those attributes but is available with others.' js=1}';
var uploading_in_progress = '{l s='Uploading in progress, please be patient.' js=1}';
var fieldRequired = '{l s='Please fill in all the required fields before saving your customization.' js=1}';

 

Claro, está el asunto de las traducciones.... así que quito la var msg del js,  y añado en el tpl  

 var msg = '{ l s ='Read the conditions before confirming your purchase.' js=1}';

 

pero no lo pilla!! y muestra [object Object] en lugar del mensaje de alerta.

Link to comment
Share on other sites
FERMB Newbie

FERMB

Posted
  • Author
Posted

ponle un nombre de variable mas exclusivo, ese debe estar usado

eso era!

he cambiado el nombre de la variable de msg por var = msgconditions

Ahora pilla las traducciones.

Todo OK

Muchas, muchisimas gracias.

Link to comment
Share on other sites
Enrique Gómez Collaborator

Enrique Gómez

Posted
Posted

De nada.

Una idea para el futuro si esto lo vais ha hacer para muchos productos. Seria fácil añadirle un checkbox (nueva variable booleana) al backoffice del producto para evitar checkear el id y así hacerlo totalmente configurable para cualquier producto.

 

Saludos

Link to comment
Share on other sites
FERMB Newbie

FERMB

Posted
  • Author
Posted

He editado el post con el codigo, poniendo la variable del mensaje de alerta en el tpl y modificando el nombre de la variable del mensaje de alerta,  para que pille las traducciones que se incluiran desde la pestaña de localizacion/traducción de mensajes del backoffice en traducciones del FrontOffice, en product.tpl del theme que se esté utilizando en la tienda

 

Así funciona OK.

Gracias a Enrique por la ayuda.

Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...