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>