Comment Faire un Contrôle de l’Age sur Shopify

Nous allons voir dans ce tutoriel comment créer un système de vérification de l’age sur Shopify. Ce système va mémoriser l’age renseigné par l’internaute et le stocker sur son ordinateur pendant 30 jours. En effet une fois accepté l’internaute ne sera plus obligé d’effectuer cette vérification.

Installation du Snippet

Voyons ensemble comment mettre en place sur Shopify un système de minimum age

Rendez-vous dans Boutique en ligne – Actions modifier le code – Ouvrez le dossier Extrait (Snippets) et cliquez sur Créer un nouveau extrait et nommez -le dg-age-check ! Copiez l’intégralité du code suivant dans ce fichier:

{% assign enter_date_of_birth = false %}

{% assign age = 18 %}

{% capture adult_header %}
Réservé aux Adultes (18+)
{% endcapture %}

{% capture adult_text %}
Ce site Internet contient du contenu pour adultes et ne convient qu'aux personnes âgées de 18 ans ou plus. Cliquez sur Entrer uniquement si vous avez au moins 18 ans..
{% endcapture %}

<div id="prompt-background">
  <div id="age-check-prompt" class="dg-modal-prompt">
    <h1>
      {{ adult_header }}
    </h1>
    <p>
      {{ adult_text }}
    </p>
    <div{% unless enter_date_of_birth %} style="display:none;"{% endunless %}>
      <select name="bmonth" id="bmonth"{% unless enter_date_of_birth %} value="1"{% endunless %}>
        {% if enter_date_of_birth %}
        <option value="1">- Month -</option>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
        {% endif %}
      </select> 
      <select name="bday" id="bday"{% unless enter_date_of_birth %} value="1"{% endunless %}>
        {% if enter_date_of_birth %}
        <option value="1">- Day -</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
        {% endif %}
      </select>
      <select name="byear" id="byear"{% unless enter_date_of_birth %} value="1950"{% endunless %}>
        {% if enter_date_of_birth %}
        <option value="2015">- Year -</option>
        <option value="2012">2012</option>
        <option value="2011">2011</option>
        <option value="2010">2010</option>
        <option value="2009">2009</option>
        <option value="2008">2008</option>
        <option value="2007">2007</option>
        <option value="2006">2006</option>
        <option value="2005">2005</option>
        <option value="2004">2004</option>
        <option value="2003">2003</option>
        <option value="2002">2002</option>
        <option value="2001">2001</option>
        <option value="2000">2000</option>
        <option value="1999">1999</option>
        <option value="1998">1998</option>
        <option value="1997">1997</option>
        <option value="1996">1996</option>
        <option value="1995">1995</option>
        <option value="1994">1994</option>
        <option value="1993">1993</option>
        <option value="1992">1992</option>
        <option value="1991">1991</option>
        <option value="1990">1990</option>
        <option value="1989">1989</option>
        <option value="1988">1988</option>
        <option value="1987">1987</option>
        <option value="1986">1986</option>
        <option value="1985">1985</option>
        <option value="1984">1984</option>
        <option value="1983">1983</option>
        <option value="1982">1982</option>
        <option value="1981">1981</option>
        <option value="1980">1980</option>
        <option value="1979">1979</option>
        <option value="1978">1978</option>
        <option value="1977">1977</option>
        <option value="1976">1976</option>
        <option value="1975">1975</option>
        <option value="1974">1974</option>
        <option value="1973">1973</option>
        <option value="1972">1972</option>
        <option value="1971">1971</option>
        <option value="1970">1970</option>
        <option value="1969">1969</option>
        <option value="1968">1968</option>
        <option value="1967">1967</option>
        <option value="1966">1966</option>
        <option value="1965">1965</option>
        <option value="1964">1964</option>
        <option value="1963">1963</option>
        <option value="1962">1962</option>
        <option value="1961">1961</option>
        <option value="1960">1960</option>
        <option value="1959">1959</option>
        <option value="1958">1958</option>
        <option value="1957">1957</option>
        <option value="1956">1956</option>
        <option value="1955">1955</option>
        <option value="1954">1954</option>
        <option value="1953">1953</option>
        <option value="1952">1952</option>
        <option value="1951">1951</option>
        <option value="1950">1950</option>
        <option value="1949">1949</option>
        <option value="1948">1948</option>
        <option value="1947">1947</option>
        <option value="1946">1946</option>
        <option value="1945">1945</option>
        <option value="1944">1944</option>
        <option value="1943">1943</option>
        <option value="1942">1942</option>
        <option value="1941">1941</option>
        <option value="1940">1940</option>
        <option value="1939">1939</option>
        <option value="1938">1938</option>
        <option value="1937">1937</option>
        <option value="1936">1936</option>
        <option value="1935">1935</option>
        <option value="1934">1934</option>
        <option value="1933">1933</option>
        <option value="1932">1932</option>
        <option value="1931">1931</option>
        <option value="1930">1930</option>
        <option value="1929">1929</option>
        <option value="1928">1928</option>
        <option value="1927">1927</option>
        <option value="1926">1926</option>
        <option value="1925">1925</option>
        <option value="1924">1924</option>
        <option value="1923">1923</option>
        <option value="1922">1922</option>
        <option value="1921">1921</option>
        <option value="1920">1920</option>
        <option value="1919">1919</option>
        <option value="1918">1918</option>
        <option value="1917">1917</option>
        <option value="1916">1916</option>
        <option value="1915">1915</option>
        <option value="1914">1914</option>
        <option value="1913">1913</option>
        <option value="1912">1912</option>
        <option value="1911">1911</option>
        <option value="1910">1910</option>
      {% endif %}
      </select>
      <div style="clear:both; margin-bottom:15px"></div>
    </div>
    <button id="submit_birthdate" class="button-enter btn styled-submit" onclick="ageCheck()" style="display:inline-block">Entrer</button> 
    <span style="padding: 0 4px">ou</span>
    <a href="http://google.com/" id="button-exit" name="button-exit">Fermer</a>
  </div>
</div>

<script>
 function ageCheck() {
   var min_age = {{ age }};  // Set the minimum age. 
   var year =   parseInt(document.getElementById('byear').value);
   var month =  parseInt(document.getElementById('bmonth').value);
   var day =    parseInt(document.getElementById('bday').value);
   var theirDate = new Date((year + min_age), month, day);
   var today = new Date;
   if ((today.getTime() - theirDate.getTime()) < 0) {
     window.location = 'http://google.com'; //enter domain url where you would like the underaged visitor to be sent to.
   } else {
     var days = 30; //number of days until they must go through the age checker again.
     var date = new Date();
     date.setTime(date.getTime()+(days*24*60*60*1000));
     var expires = "; expires="+date.toGMTString();
     document.cookie = 'isAnAdult=true;'+expires+"; path=/";
     location.reload();
   };
  };
  function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
      var c = ca[i];
      while (c.charAt(0)==' ') c = c.substring(1,c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
  };
  var isAnAdult = readCookie('isAnAdult');
  if (isAnAdult) {
    document.write("<style> #prompt-background { display: none; }</style>");
  };
</script>

<style>
.dg-modal-prompt {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
  width: 330px;
  height: auto;
  margin: 0 auto;
  padding: 20px 35px 30px 35px;
  position: relative;
  top: 25%;
  z-index: 1000000;
}
.dg-modal-prompt p, .dg-modal-prompt h1 {
  color: #555555;
}
#prompt-background {
  background: #555;  
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999999;
}
  
.dg-modal-prompt select { float: left; margin-right: 10px; }
</style>

{% comment %}
Copyright: https://github.com/carolineschnapp/age-check/blob/master/age-check.liquid
{% endcomment %}

A ce stade ouvrez le dossier Mise en page (Layout) et le fichier theme.liquid – Trouvez la balise <body…> et sur la ligne du dessous vide (créez un espace au besoin) copiez/collez l’appel du script suivant:

{% include "dg-age-check" %}

Comment personnaliser les textes ?

C’est très simple il vous suffit de les trouver et de les remplacer 😉

Pour plus d’infos… visionnez la vidéo !

PS: Je mentionne que ce code n’est pas le mien mais une adaptation du code de Caroline Schnapp !

copyright: https://github.com/carolineschnapp/age-check/blob/master/age-check.liquid

Ce tuto existe également en vidéo

Ce type de tutoriel est idéal pour les sites pour adultes comme les sites de vente de produits érotiques ou tout simplement pour des sites de ventes d’alcool.

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 1 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 9 commentaires

  1. Pierre Martin

    25 Août 2021 Répondre

    Bonjour,

    Merci beaucoup pour l’astuce ! Comment changer la couleur des boutons et de l’écriture ?

    1. Dgeo Dev

      27 Août 2021 Répondre

      Hello en modifiant en css comme ceci : #submit_birthdate { color:couleurhexadecimale; } à mettre dans votre theme.css.liquid ou assimilé

  2. Mas

    4 Jan 2022 Répondre

    Bonjour je n’arrive toujours pas à changer la couleur du bouton entrer et fermer, est-il possible de m’aider 🙂

    1. Dgeo Dev

      6 Jan 2022 Répondre

      Hello, en rajoutant ceci dans le css… form button.styled-submit { background:couleur-hexadecimale-a-trouver; color:couleur-hexadecimale-a-trouver; }

  3. Hunter

    3 Sep 2022 Répondre

    jai tout suivie sa marche pas moi :/

    1. Dgeo Dev

      4 Sep 2022 Répondre

      Hello 🙂 cad ? surement un thème incompatible ou faut refaire le tuto de A à Z… il manque peut être une étape 🙂

  4. MORENO

    8 Mar 2023 Répondre

    Bonjour 🙂
    Je voudrais savoir comment je peux utiliser ce tuto uniquement pour l’affichage d’une collection de produits ?
    Merci par avance

  5. Lauric

    22 Août 2024 Répondre

    Bonjour petit probleme je pense que cela peut venir du css mais le bouton entrer est simple comme si il y avait juste la balise et le non s’affiche comme un lien, c’est a dire mot en bleu simple

    1. Dgeo Dev

      26 Août 2024 Répondre

      Bonjour, il reprend certainement le css du thème. Il faudrait voir le site afin de voir ce qu’il est possible de faire. Si besoin me contacter ici : https://speed-ecom.eu/contact

Laisser un commentaire

Fermer le menu
×
×

Panier