Jump to content

Añadir check box para aceptar política de privacidad al formulario de contacto y newsletter 1.7

ICEpower

By ICEpower
in Discusión general

 Share

Recommended Posts

ICEpower Newbie

ICEpower

Posted
Posted (edited)

Hola, 

Tras tantos meses recibiendo ayuda, recopilando datos de aquí y de allí, quiero dar un pequeño aporte a la comunidad. 

La semana pasada me la pasé entera intentando poner un check box de confirmación para la política de privacidad de datos en prestashop 1.7. Tanto en la newssletter, como en el formulario de contacto. Tras mucho buscar di con un enlace en el que es bastante sencillo hacer esto.  Enlace original 

Antes de empezar quiero avisar que mis conocimientos de programación son nulos, por lo que cualquiera con ganas de fuchicar un poco puede hacerlo. Espero explicarme lo suficientemente bien y ser de ayuda para todos. 

El que quiera añadir un check en el formulario de registro, prestashop tiene un módulo gratuito únicamente para esto: Bloque de privacidad de datos del cliente

Para echarle un ojo antes de nada os dejo acceso a mi formulario de contacto: https://uesti.es/contacto

 

Bueno, lo primero es acceder a través de ftp a los datos de nuestro servidor. Ahí descargamos el siguiente archivo: /themes/tutema/modules/contactform/views/templates/widget descargamos el archivo contactform.tpl. 

Dentro de ese archivo debemos localizar la siguiente linea (casi al final)

 

<footer class="form-footer text-xs-right">
  <input class="btn btn-primary" type="submit" name="submitMessage" value="{l s='Send' d='Shop.Theme.Actions'}" disabled>
</footer>

 

Os añado mi código editado, si quereis el original copiarlo en el enlace original. Lo sustituimos por el siguiente:

<footer class="form-footer text-xs-right">
 
    <span class="privacy_wrp col-md-12" style="padding-left:0rem;">
        <input style="float:left;" type="checkbox" name="DG_terms" value="No" id="prv_ck" />
        <p style="text-align: left; display: inline; overflow: hidden; padding-left: 0.3rem;">
            {l s='Dichiaro di aver letto ed accetto l\' informativa sulla Privacy' d='Shop.Theme.Actions'}
            <br/>
            <a href="tu-enlace" onclick="window.open(this.href); return false;"><span style="color: #c69f70;">{l s='(LEER)' d='Shop.Theme.Actions'}</a>
        </p>
    </span>
    
 <p>
        <br/>
        <small><span style="font-size: 12px;">{l s='Tutti i campi contrassegnati con * sono da considerararsi obbligatori' d='Shop.Theme.Actions'}</small>
    </p>
 
    <input class="btn btn-primary" id="disabledInput" type="submit" name="submitMessage" value="{l s='Send' d='Shop.Theme.Actions'}"
        disabled>

 

Esto lo que hace es añadirnos el check box con el texto que hallamos añadido. Podéis cambiarlo antes de añadirlo o añadirlo así y después traducirlo en traducciones. Yo lo añadí primero y tuve que hacerlo a través de traducciones. En "tú-enlace" ponemos la página en la que está tu política de privacidad.

Guardamos y lo sustituimos por el archivo original. Recomiendo hacer copia del archivo y de todos los datos de la web por muy innecesario que lo veais. 

Debería quedaros algo así:

image.png.c4fa91960c07da82a1063b68b8eac1f3.png

Lo último que queda por hacer es añadir algo de JQuery en el check box para que cuando esté el check activo deje darle a enviar y cuando esté desactivado no deje. 

Para ello volvemos a necesitar acceder vía ftp a la siguiente ubicación vamos a /themes/tu_tema/assets/js y descargamos "custom.js", dentro pegamos lo siguiente:

$('#prv_ck').change(function() {
    console.log('ok changed');
    $("#disabledInput").attr('disabled', !this.checked)
});

 

Guardamos y sustituimos por el archivo anterior. Listo, ya tenemos nuestro check preparado para la nueva normativa LOPD. 

 

Ahora seguramente os preguntaréis lo siguiente. Como añado esto a la newsletter. Es sencillo simplemente debemos buscar el archivo tpl de nuestra newsletter, yo no utilizo la newsletter que trae por defecto prestashop pero el proceso debería ser parecido. Descargamos el archivo tpl de nuestra newsletter, en mi caso es en la siguiente ruta modules/stnewsletter/views/templates/hook yo lo añadí sobre el hook del footer, ya que únicamente tengo mi suscripción a la newsletter ahí. 

Buscamos el botón, en mi caso es el siguiente y se encuentra casi al final:

<button type="submit" name="submitStNewsletter" class="btn btn-less-padding st_news_letter_submit link_color">

Y lo customizamos de la siguiente manera:

<button id="disabledInput"  type="submit" name="submitStNewsletter" class="btn btn-less-padding st_news_letter_submit link_color" value="{l s='Send' d='Shop.Theme.Actions'}" disabled>

Lo que hemos hecho es añadir id="disabledInput" y value="{l s='Send' d='Shop.Theme.Actions'}" disabled> al final. Así no hace falta otra configuración de JQuery

Lo último es pegar el primer código del checkbox justo encima, antes de que empiece el botón. Tal que así:
    <span class="privacy_wrp col-md-12" style="padding-left:0rem;">
        <input style="float:left;" type="checkbox" name="DG_terms" value="No" id="prv_ck" />
        <p style="text-align: left; display: inline; overflow: hidden; padding-left: 0.3rem;">
            {l s='Dichiaro di aver letto ed accetto l\' informativa sulla Privacy' d='Shop.Theme.Actions'}
            <br/>
            <a href="tu-url" onclick="window.open(this.href); return false;"><span style="color: #c69f70;">{l s='(LEER)' d='Shop.Theme.Actions'}</a>
        </p>
    </span>

Si os fijáis en comparación con el primero, eliminé el botón que traía y lo de "los campos con un * son obligatorios" Yo no lo necesitaba, si lo queréis añadir es cuestión de hacer copia pega, ponemos la url de nuestra política de privacidad y sustituimos el archivo. 

 

Espero haberos sido de ayuda y poder aportar algo de valor a la comunidad.

Un saludo a todos! Y mucha suerte a través de los campos tenebrosos de prestashop.

 

Edito el post. hay un módulo gratis para poner el check de la política de privacidad. Tanto para el formulario de contacto cómo para el registro. 

El módulo es Cumplimiento del RGPD de PrestaShop y en la versión 1.7 ya viene disponible en el listado de módulos del back office. Aquí os hablan de el.

Edited by ICEpower (see edit history)
Link to comment
Share on other sites
  • 4 weeks later...
JOSSm Apprentice

JOSSm

Posted
Posted

Hola buenas,

 

En el formulario de contacto me funciona perfectamente pero en las newsletter no se desbloquea el botón al aceptar el checkbox.

Saben que puede ser.

Un saludo, gracias

  

<div class="block_newsletter col-lg-8 col-md-12 col-sm-12">
  <div class="row">
  <h2 class="newsletter h3 hidden-sm-down">Newsletter</h2>

	      <p class="col-md-5 col-xs-12">{l s='Get our latest news and special sales' d='Shop.Theme.Global'}</p>
      <form action="{$urls.pages.index}#footer" method="post">
          <div class="col-xs-12">
            <input
              id="disabledInput"
              type="submit"
              class="btn btn-primary pull-xs-right hidden-xs-down"
              name="submitNewsletter"
              value="{l s='Subscribe' d='Shop.Theme.Actions'}" disabled>
            <input
              class="btn btn-primary pull-xs-right hidden-sm-up"
              name="submitNewsletter"
              type="submit"
              value="{l s='OK' d='Shop.Theme.Actions'}"
            >
            <div class="input-wrapper">
              <input
                name="email"
                type="text"
                value="{$value}"
                placeholder="{l s='Your email address' d='Shop.Forms.Labels'}"
              >     
              
               <input style="float:right padding-left:20px;" type="checkbox" name="DG_terms" value="No" id="prv_ck" />
        <p style="text-align: left; display: inline; overflow: hidden; padding-left: 0.3rem;">
            {l s='He leido y acepto los terminos y condiciones' d='Shop.Theme.Actions'}
            <a href="https://www.joyeriaflores.com/es/content/2-aviso-legal" onclick="window.open(this.href); return false;"><span style="color: #c69f70;">{l s='(LEER)' d='Shop.Theme.Actions'}</a>
        </p>
              
            </div>
            <input type="hidden" name="action" value="0">
            <div class="clearfix"></div>
          </div>
          <div class="col-xs-12">
              {if $conditions}
                <p>{$conditions}</p>
              {/if}
              {if $msg}
                <p class="alert {if $nw_error}alert-danger{else}alert-success{/if}">
                  {$msg}
                </p>
              {/if}
          </div>

      </form>
  </div>
</div>

 

Link to comment
Share on other sites
gusman126 Proficient

gusman126

Posted
Posted
hace 20 minutos, JOSSm dijo:

Hola buenas,

 

En el formulario de contacto me funciona perfectamente pero en las newsletter no se desbloquea el botón al aceptar el checkbox.

Saben que puede ser.

Un saludo, gracias

  


<div class="block_newsletter col-lg-8 col-md-12 col-sm-12">
  <div class="row">
  <h2 class="newsletter h3 hidden-sm-down">Newsletter</h2>

	      <p class="col-md-5 col-xs-12">{l s='Get our latest news and special sales' d='Shop.Theme.Global'}</p>
      <form action="{$urls.pages.index}#footer" method="post">
          <div class="col-xs-12">
            <input
              id="disabledInput"
              type="submit"
              class="btn btn-primary pull-xs-right hidden-xs-down"
              name="submitNewsletter"
              value="{l s='Subscribe' d='Shop.Theme.Actions'}" disabled>
            <input
              class="btn btn-primary pull-xs-right hidden-sm-up"
              name="submitNewsletter"
              type="submit"
              value="{l s='OK' d='Shop.Theme.Actions'}"
            >
            <div class="input-wrapper">
              <input
                name="email"
                type="text"
                value="{$value}"
                placeholder="{l s='Your email address' d='Shop.Forms.Labels'}"
              >     
              
               <input style="float:right padding-left:20px;" type="checkbox" name="DG_terms" value="No" id="prv_ck" />
        <p style="text-align: left; display: inline; overflow: hidden; padding-left: 0.3rem;">
            {l s='He leido y acepto los terminos y condiciones' d='Shop.Theme.Actions'}
            <a href="https://www.joyeriaflores.com/es/content/2-aviso-legal" onclick="window.open(this.href); return false;"><span style="color: #c69f70;">{l s='(LEER)' d='Shop.Theme.Actions'}</a>
        </p>
              
            </div>
            <input type="hidden" name="action" value="0">
            <div class="clearfix"></div>
          </div>
          <div class="col-xs-12">
              {if $conditions}
                <p>{$conditions}</p>
              {/if}
              {if $msg}
                <p class="alert {if $nw_error}alert-danger{else}alert-success{/if}">
                  {$msg}
                </p>
              {/if}
          </div>

      </form>
  </div>
</div>

 

 

Si es por la ley GDPR, instala el modulo oficial es gratuito para el PS 1.7, y activa las casillas con ese modulo, recuerda actualizar los modulos

https://www.prestashop.com/forums/topic/819213-modulo-oficial-gdpr-para-prestashop-17-preguntas-y-errores/

https://www.prestashop.com/forums/topic/830787-actualizaciones-de-modulos-adaptados-al-modulo-gdpr-oficial-y-ps-17/

 

Link to comment
Share on other sites
gusman126 Proficient

gusman126

Posted
Posted
hace 2 horas, JOSSm dijo:

Muchisimas gracias gusman126,

Pero en el modulo solo me pone para el formulario de registro y lo necesitaba también para las newsletter, para el formulario de contacto y para pedir como invitado.

Como debo hacer?

Un saludo

 

haz la pregunta en el modulo oficial , yo no lo estoy usando y no se tanto como otros que estan publicando ahi

Link to comment
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
 Share
Go to topic listing
×
×
  • Create New...