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

Rendez-vous dans Boutique en ligne – Actions modifier le code – Ouvrez le dossier Snippets et cliquez sur Créer un nouveau Snippet 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 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

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

🤗 Vous souhaitez me remercier pour mes Tutos ?

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

Payer un Café à Dgeo Dev

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine