Shopify: check user age before shopping

Есть продукты, которые можно продавать в США только лицам старше 21 года, да и то, не во всех штатах. Сам шопифай такого решения разумеется не имеет, поэтому появилось следующее решение, которое работает так: если нет соответствующей куки, то показываем пользователю предупреждение (предупреждение сами верстаем), а если кука есть, то не показываем пользователю предупреждение N-дней. Если пользователю нет 21 года, то отправляем его в магазин лего и куку не присваиваем.

Я запихал текст предупреждения в переменные, чтобы их можно было просто отредактировать.

{% capture warning_header %}
THE SITE IS ONLY AVAILABLE TO PERSONS OVER 21 YEARS OF AGE.
{% endcapture %}

{% capture warning_question %}
ARE YOU'RE 21 YEARS OLD?
{% endcapture %}

Далее вёрстка самого предупреждения, который нужно запихать в theme.liquid сразу после body. Рекомендую подключить сниппетом, чтобы не засорять шаблон кучей строк.

<div class="warning" id="warning">
    <div class="warning-popup" id="popup">
        <div class="logo">
            <img src="https://cdn.shopify.com/s/files/logo.svg" alt="logo">
        </div>
        <div>{{ warning_header }}</div>
        <div class="warning-question">{{ warning_question }}</div>
        <div class="btns">
            <a href="https://lego.com/"><button class="btn">No</button></a>
            <button class="btn" onclick="ageCheck()">Yes</button>
        </div>
    </div>
</div>

Далее сам скрипт, логику работы описал выше.

<script>
 function ageCheck() {
     var days = 14; //количество дней, через которое спросим возраст снова
     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> #warning { display: none; overflow:hidden; }</style>");
  };
</script>
Поделиться
Отправить
 35   2020   js   shopify
Популярное