Shopify: add quantity button to cart

Sat, 01 Feb 2020 13:35:31 +0300

Добавить в cart-template.liquid

<input type='button' value='-' class='qtyminus' field='updates_{{ item.id }}' />
<input type="number" name="updates[]" id="updates_{{ item.id }}" class="quantity" value="{{ item.quantity }}" />
<input type='button' value='+' class='qtyplus' field='updates_{{ item.id }}' />

Добавить в Assets cart.js и его содержание:

jQuery(document).ready(function(){
    $('.qtyplus').click(function(e){
        e.preventDefault();
        fieldName = $(this).attr('field');
        var currentVal = parseInt($('input[id='+fieldName+']').val());
        if (!isNaN(currentVal)) {
            $('input[id='+fieldName+']').val(currentVal + 1);
        } else {
            $('input[id='+fieldName+']').val(0);
        }
    });
    $(".qtyminus").click(function(e) {
        e.preventDefault();
        fieldName = $(this).attr('field');
        var currentVal = parseInt($('input[id='+fieldName+']').val());
        if (!isNaN(currentVal) && currentVal > 0) {
            $('input[id='+fieldName+']').val(currentVal - 1);
        } else {
            $('input[id='+fieldName+']').val(0);
        }
    });
});

Не забыть подключить JS с условием если вы находитесь на странице корзины, чтобы не перегружать сайт лишними скриптами.

Shopify: check user age before shopping

Fri, 31 Jan 2020 03:26:16 +0300

Есть продукты, которые можно продавать в США только лицам старше 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>

Блог Чуденкова Алексея, заметки с тегом: shopify

Shopify: add quantity button to cart

Shopify: check user age before shopping