Shopify:在庫切れ商品を「売り切れ」にする

やりたいこと

  • Shopify で在庫がなくなった商品を「売り切れ」にしたい
  • 購入カートで在庫数以上の数を選択できないようにしたい

実装例

各商品の設定

各商品ページの「Inventory」セクションにて、Inventory policy を「Shopify tracks this product inventory」(Shopifyがこの商品の在庫を追跡する)にし、チェックボックス 「Allow customers to purchase this product when it’s out of stock」のチェックを外す。

商品設定

Products API で商品を作成・更新するときは、以下のパラメータを渡す。

{
   "product": {
     "variants": [
       {
         'inventory_management': 'shopify',
         'inventory_policy':     'deny',
         'inventory_quantity':   QUANTITY # 在庫数
       }
     ]
   }
}

これで、在庫数がゼロの場合、商品は「売り切れ」となる。

コレクションの設定

売り切れ商品を一覧に表示したくない場合は、コレクションを新規作成し、条件に「Inventory stock is greater than 0」を加える。

コレクションの設定

購入カート上限数の設定

jQuery を使って、購入カートに購入上限数は設定する。

まずは「theme.liquid」の head タグ内に CDN で jQuery をインポートする。

<head>
  .
  .
  .
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

「cart.liquid」の最下部に次のコードスニペットを加える。

<script type="text/javascript">
  (function($) {
    $('[max]').change(function() {
        var max = parseInt(jQuery(this).attr('max'), 10) || 10000;
        var value = parseInt(jQuery(this).val(), 10) || 0;
        if (value > max) {
            alert('We only have ' + max + ' of this item in stock');
            jQuery(this).val(max);
        }
    });
  })( jQuery );
</script>

最後に「cart-template.liquid」の購入数 input タグの「max」を次のように書き換える。

{% unless item.variant.inventory_management == blank or item.variant.inventory_policy == 'continue' %} 
max="{{ item.variant.inventory_quantity }}" 
{% endunless %}

更新後の input タグは次のとおり。

<input class="cart__qty-input"
        type="number" 
        name="updates[]"
        id="updates_large_{{ item.key }}" 
        value="{{ item.quantity }}" 
        min="0" 
        {% unless item.variant.inventory_management == blank or item.variant.inventory_policy == 'continue' %} 
        max="{{ item.variant.inventory_quantity }}" 
        {% endunless %}
        pattern="[0-9]*" data-quantity-item="{{ forloop.index }}">

以上で、在庫数以上の数を購入カートで選択できなくなる。

Sources

兵庫県西宮市生まれのフリーランスRailsエンジニア。海外を拠点にデジタルノマド生活中。/ 前職・資格:公認会計士 / プログラミング言語:Ruby, JavaScript, HTML, CSS / 日本語・英語
コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です