Jump to content
Afropawn

[Aporte] Checkbox "privacidad" obligatorio en Comentarios de productos

Recommended Posts

Hola, encontré la necesidad de insertar un checkbox en los comentarios de los productos, que sea obligatorio marcar para que el usuario pueda enviar el comentario. Al no encontrar nada especifico, muestro lo que hice, para adaptarlo. 
 
 
1.- Abrir "productcomments.tpl" en "themes\tu_plantilla\modules\productcomments\"
 
2.- Localizar el "<form>" que se abre en Fancybox, no lo muestro todo porque lo tengo bastante personalizado.

<div style="display: none;">
	<div id="new_comment_form">
		<form id="id_new_comment_form" action="#" />
...

3.- Localizar estas líneas:

<label for="comment_title">
	{l s='Title' mod='productcomments'}: <sup class="required">*</sup>
</label>
<input id="comment_title" name="title" type="text" value=""/>
<label for="content">
	{l s='Comment' mod='productcomments'}: <sup class="required">*</sup>
</label>
<textarea id="content" name="content"></textarea>
{if $allow_guests == true && !$is_logged}
	<label>
		{l s='Your name' mod='productcomments'}: <sup class="required">*</sup>
	</label>
	<input id="commentCustomerName" name="customer_name" type="text" value=""/>
{/if}

y añadir la siguiente línea en los "<input>", para prevenir que el formulario funcione apretando la tecla enter :

onKeypress="if (event.keyCode == 13) event.returnValue = false;"

quedando así:

<label for="comment_title">
	{l s='Title' mod='productcomments'}: <sup class="required">*</sup>
</label>
<input id="comment_title" name="title" type="text" value="" onKeypress="if (event.keyCode == 13) event.returnValue = false;"/>
<label for="content">
	{l s='Comment' mod='productcomments'}: <sup class="required">*</sup>
</label>
<textarea id="content" name="content"></textarea>
{if $allow_guests == true && !$is_logged}
	<label>
		{l s='Your name' mod='productcomments'}: <sup class="required">*</sup>
	</label>
	<input id="commentCustomerName" name="customer_name" type="text" value="" onKeypress="if (event.keyCode == 13) event.returnValue = false;"/>
{/if}

4.- Pegar las siguientes líneas justo después de las anteriores que hemos modificado, esto es el checkbox (casilla) con href (link) a la política de privacidad:

...
{/if} <!-- Esto pertenece a las anteriores líneas -->

<div class="required checkbox" style="line-height: 10px;">
	<input type="checkbox" value="1" id="customer_privacy" name="customer_privacy" autocomplete="off" required onclick="CheckIfChecked()" />
	<div style="float: left;"> <sup>*</sup>
        <label for="customer_privacy" style="font-weight: 0;font-size: smaller;margin-top: 0;">{l s='He leído y acepto ' }</label> <a href="{$link->getCMSLink(3)|escape:'html'}?content_only=1}" rel="nofollow" class="iframe" style="font-size: smaller;">{l s='la política de privacidad.'}</a>			
	</div></div>
    <br />

5.- Localizamos el <button> que se encarga de enviar, un poco más abajo:
 

<button id="submitNewMessage" name="submitMessage" type="submit" class="btn button button-small">
<span>{l s='Send' mod='productcomments'}</span>
</button>
<a class="closefb" href="#">
{l s='Cancel' mod='productcomments'}
</a>

y añadimos el siguiente <div>, esto esconderá el botón de Enviar / Cancelar si el checkbox no está marcado:

<div class="submit" id="submit-button-container" ><button></div>

Quedando así:
 

<div class="submit" id="submit-button-container" >
<button id="submitNewMessage" name="submitMessage" type="submit" class="btn button button-small">
<span>{l s='Send' mod='productcomments'}</span>
</button>
<a class="closefb" href="#">
{l s='Cancel' mod='productcomments'}
</a>
</div>

6.- Ahora pegaremos los siguientes <scripts> al final del </form>:

</form>
        <script type="text/javascript"><!--
function CheckIfChecked()
{
   var CheckboxID = "customer_privacy";
   var SubmitButtonContainerID = "submit-button-container";
   if( document.getElementById(CheckboxID).checked ) { document.getElementById(SubmitButtonContainerID).style.display = "block"; }
   else { document.getElementById(SubmitButtonContainerID).style.display = "none"; }
}
CheckIfChecked();
//-->
</script>
    <script type="text/javascript">
	$('a.iframe').fancybox({
		'type' : 'iframe',
	});
</script>
<!-- /end new_comment_form_content -->

El primer Javascript se encarga de esconder el botón de "Enviar / Cancelar" si la casilla no está marcada y el segundo de abrir el archivo de "privacidad"  también en una ventana Fancybox, si se accede al archivo, se cerraría la ventana del comentario.
 
Mi archivo de privacidad es el 3, según el archivo CMS que quieran mostrar, solo deberán cambiar el "3" por el número de página a mostrar.

$link->getCMSLink(3)|escape:'html'}?content_only=1

Espero me explique bien y les ayude, a mi me va de perlas. Saludos!!

Edited by Afropawn (see edit history)
  • Like 2

Share this post


Link to post
Share on other sites

versión del script adaptada a GDPR, que lanza alerta y desactiva el botón de envío si no está la casilla marcada y lo activa para poder seguir con el envío si esta marcada.


<script type="text/javascript">{literal}	
	$("#submitNewMessage").on('click',function(){
  if(!$("#customer_privacy").is(':checked')){
   window.alert('Marque la casilla de privacidad antes de continuar, leer y entender esta información es primordial para sus derechos en Internet.');
		$('#submitNewMessage').prop( "disabled", true );
  } else {
	  
		$('#submitNewMessage').prop( "disabled", false );
  }
});{/literal}
	</script>

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More