商品ページにバリエーションの残りの在庫を表示する

注意

現在、以前のテーマはテーマストアでは提供されていません。以前のテーマには、ShopifyのOnline Store 2.0テーマに含まれている機能が盛り込まれておらず、セキュリティ修正以外のアップデートは行われません。

メモ

Shopifyの無料テーマを使用している場合は、Shopify サポートに連絡すると、このチュートリアルのサポートを受けることができます。設計には15分かかります。Shopifyデザインポリシーについて詳しくはこちらをご覧ください。

メモ

このカスタマイズは以前のShopifyテーマ向けで、Online Store 2.0のテーマには適用されません。

• 使用しているテーマのアーキテクチャバージョンを確認する
• Online Store 2.0のテーマのカスタマイズについて確認する

商品バリエーションの在庫が少なくなった場合、アイテムの在庫数を表示するメッセージを商品ページ、または特集商品セクションに追加できます。このメッセージを表示するには、商品の在庫追跡を有効にする必要があります。

このカスタマイズのステップは、テーマによって異なります。テーマのボタンをクリックし、手順に従ってください。

ヒント

ShopifyのテーマとVentureテーマには、[アイテムの残数のメッセージを表示する] 設定が組み込まれています。テーマエディタからこの設定を有効にできます。

Debut

Debutの手順

編集 theme.liquid

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
2. 編集するテーマを見つけて、[...] ボタン > [コードを編集] の順にクリックします。
3. [レイアウト] ディレクトリから、theme.liquidを開きます。
4. コードで</head>終了タグを探します。</head>終了タグの上の新しい行に、次のコードを貼り付けます。

<script>
  var variantStock = {};
</script>

1. [保存] をクリックします。

product-template.liquidを編集します。 featured-product.liquid

1. [セクション] ディレクトリから、product-template.liquidまたはfeatured-product.liquidを開きます。

   • product-template.liquidを開き、商品ページにこの機能を追加します。
   • featured-product.liquidを開き、ホームページの特集商品セクションにこの機能を追加します。

2. {% form 'product'を探します。このタグの上に次のコードを追加します。

<div class="inventoryWrapper">
  {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

上記のコードを使用してStock: xを出力します。<p>タグのコンテンツを調整して文言を変更できます。<p>タグに{{ current_variant.inventory_quantity }}を含めるようにします。

1. ファイルの最下部に次のコードを追加します。

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. [保存] をクリックします。

theme.js.liquidを編集します。 theme.js

これらのファイルに加える必要のある変更は、使用しているDebutのバージョンによって異なります。

バージョン17.8.0以前

1. theme.js.liquidまたはtheme.jsを開きます。
2. theme.Product = (function()を探します。this.selectors = {の下に、次のコードを追加します。

inventoryHtml: '.inventoryWrapper',

1. 同じファイルで、_updateAddToCart: function(evt) {を探します。すぐ下に次のコードを追加します。

var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);

1. if (variant.available) {を探します。} else {ステートメントの前に、次のコードを追加します。

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify' && inventoryWrapper !== null) {
      const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
      inventoryWrapper.innerHTML = inventoryHtml;
    } else {
      inventoryWrapper.innerHTML = '';
}

上記のコードを使用してStock: xを出力します。<p>タグのコンテンツを調整して文言を変更できます。<p>タグに${variantStock[variant.id]}を含めるようにします。

1. [保存] をクリックします。

バージョン17.9.0以降

1. theme.js.liquidまたはtheme.jsを開きます。
2. theme.Product = (function()を探します。this.selectors = {の下に、次のコードを追加します。

inventoryHtml: '.inventoryWrapper',

1. 同じファイルで、_setProductState: function(evt) {を探します。すぐ下に次のコードを追加します。

var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);

1. 同じ機能で、if (!variant) {を探します。終了かっこ}の後に、次のコードを追加します。

else {
  if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify' && inventoryWrapper !== null) {
    const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
    inventoryWrapper.innerHTML = inventoryHtml;
  } else {
    inventoryWrapper.innerHTML = '';
  }
}

上記のコードを使用してStock: xを出力します。<p>タグのコンテンツを調整して文言を変更できます。<p>タグに${variantStock[variant.id]}を含めるようにします。

1. [保存] をクリックします。

Brooklyn

Brooklynの手順

編集 theme.liquid

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
2. 編集するテーマを見つけて、[...] ボタン > [コードを編集] の順にクリックします。
3. [レイアウト] ディレクトリから、theme.liquidを開きます。
4. コードで</head>終了タグを探します。</head>終了タグの上の新しい行に、次のコードを貼り付けます。

<script>
  var variantStock = {};
</script>

1. [保存] をクリックします。

product-template.liquidを編集します。 featured-product.liquid

1. [セクション] ディレクトリから、product-template.liquidまたはfeatured-product.liquidを開きます。

   • product-template.liquidを開き、商品ページにこの機能を追加します。
   • featured-product.liquidを開き、ホームページの特集商品セクションにこの機能を追加します。

2. {% form 'product'を探します。このタグの上に次のコードを追加します。

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

上記のコードを使用してStock: xを出力します。<p>タグのコンテンツを調整して文言を変更できます。<p>タグに{{current_variant.inventory_quantity }}を含めるようにします。

1. ファイルの最下部に次のコードを追加します。

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. [保存] をクリックします。

theme.js.liquidを編集します。 theme.js

1. theme.js.liquidまたはtheme.jsを開きます。
2. theme.Product = (function()を探します。this.selectors = {の下に、次のコードを追加します。

inventoryHtml: '.inventoryWrapper',

1. 同じファイルで、if (variant.available) {を探します。} else {ステートメントの前に、次のコードを追加します。

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

上記のコードを使用してStock: xを出力します。<p>タグのコンテンツを調整して文言を変更できます。<p>タグに${variantStock[variant.id]}を含めるようにします。

1. [保存] をクリックします。

Simple

Simpleの手順

編集 theme.liquid

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
2. 編集するテーマを見つけて、[...] ボタン > [コードを編集] の順にクリックします。
3. [レイアウト] ディレクトリから、theme.liquidを開きます。
4. コードで</head>終了タグを探します。</head>終了タグの上の新しい行に、次のコードを貼り付けます。

<script>
  var variantStock = {};
</script>

1. [保存] をクリックします。

product-template.liquidを編集します。 featured-product.liquid

1. [セクション] ディレクトリから、product-template.liquidまたはfeatured-product.liquidを開きます。

   • product-template.liquidを開き、商品ページにこの機能を追加します。
   • featured-product.liquidを開き、ホームページの特集商品セクションにこの機能を追加します。

2. {% form 'product'を探します。このタグの上に次のコードを追加します。

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

上記のコードを使用してStock: xを出力します。<p>タグのコンテンツを調整して文言を変更できます。<p>タグに{{current_variant.inventory_quantity }}を含めるようにします。

1. ファイルの最下部に次のコードを追加します。

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. [保存] をクリックします。

theme.js.liquidを編集します。 theme.js

1. theme.js.liquidまたはtheme.jsを開きます。
2. theme.Product = (function()を探します。this.selectors = {の下に、次のコードを追加します。

inventoryHtml: '.inventoryWrapper',

1. 同じファイルで、if (variant.available) {を探します。} else {ステートメントの前に、次のコードを追加します。

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

上記のコードを使用してStock: xを出力します。<p>タグのコンテンツを調整して文言を変更できます。<p>タグに${variantStock[variant.id]}を含めるようにします。

1. [保存] をクリックします。

Minimal

Minimalの手順

編集 theme.liquid

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
2. 編集するテーマを見つけて、[...] ボタン > [コードを編集] の順にクリックします。
3. [レイアウト] ディレクトリから、theme.liquidを開きます。
4. コードで</head>終了タグを探します。</head>終了タグの上の新しい行に、次のコードを貼り付けます。

<script>
  var variantStock = {};
</script>

1. [保存] をクリックします。

product-template.liquidを編集します。 featured-product.liquid

1. [セクション] ディレクトリから、product-template.liquidまたはfeatured-product.liquidを開きます。

   • product-template.liquidを開き、商品ページにこの機能を追加します。
   • featured-product.liquidを開き、ホームページの特集商品セクションにこの機能を追加します。

2. {% form 'product'を探します。このタグの上に次のコードを追加します。

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

上記のコードを使用してStock: xを出力します。<p>タグのコンテンツを調整して文言を変更できます。<p>タグに{{current_variant.inventory_quantity }}を含めるようにします。

1. ファイルの最下部に次のコードを追加します。

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. [保存] をクリックします。

theme.js.liquidを編集します。 theme.js

1. theme.js.liquidまたはtheme.jsを開きます。
2. theme.Product = (function()を探します。this.selectors = {の下に、次のコードを追加します。

inventoryHtml: '.inventoryWrapper',

1. 同じファイルで、if (variant.available) {を探します。} else {ステートメントの前に、次のコードを追加します。

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

上記のコードを使用してStock: xを出力します。<p>タグのコンテンツを調整して文言を変更できます。<p>タグに${variantStock[variant.id]}を含めるようにします。

1. [保存] をクリックします。

Boundless

Boundlessの手順

編集 theme.liquid

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
2. 編集するテーマを見つけて、[...] ボタン > [コードを編集] の順にクリックします。
3. [レイアウト] ディレクトリから、theme.liquidを開きます。
4. コードで</head>終了タグを探します。</head>終了タグの上の新しい行に、次のコードを貼り付けます。

<script>
  var variantStock = {};
    </script>

1. [保存] をクリックします。

product-template.liquidを編集します。 featured-product.liquid

1. [セクション] ディレクトリから、product-template.liquidまたはfeatured-product.liquidを開きます。

   • product-template.liquidを開き、商品ページにこの機能を追加します。
   • featured-product.liquidを開き、ホームページの特集商品セクションにこの機能を追加します。

2. {% form 'product'を探します。このタグの上に次のコードを追加します。

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
        <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

上記のコードを使用してStock: xを出力します。<p>タグのコンテンツを調整して文言を変更できます。<p>タグに{{current_variant.inventory_quantity }}を含めるようにします。

1. ファイルの最下部に次のコードを追加します。

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. [保存] をクリックします。

theme.js.liquidを編集します。 theme.js

1. 「theme.js.liquid」*または*「theme.js」を開きます。
2. theme.Product = (function()を探します。var selectors = {の下に、次のコードを追加します。

inventoryHtml: '.inventoryWrapper',

1. 同じファイルで、$(selectors.SKU, this.$container).html(variant.sku);を探します。すぐ下に次のコードを追加します。

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
      const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $('.inventoryWrapper').html(inventoryHtml);
} else {
    $('.inventoryWrapper').html("");
}

上記のコードを使用してStock: xを出力します。<p>タグのコンテンツを調整して文言を変更できます。<p>タグに${variantStock[variant.id]}を含めるようにします。

1. [保存] をクリックします。

Narrative

Narrativeの手順

編集 theme.liquid

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
2. 編集するテーマを見つけて、[...] ボタン > [コードを編集] の順にクリックします。
3. [レイアウト] ディレクトリから、theme.liquidを開きます。
4. コードで</head>終了タグを探します。</head>終了タグの上の新しい行に、次のコードを貼り付けます。

<script>
      var variantStock = {};
    </script>

1. [保存] をクリックします。

product-template.liquidを編集します。 featured-product.liquid

1. [セクション] ディレクトリから、product-template.liquidまたはfeatured-product.liquidを開きます。

   • product-template.liquidを開き、商品ページにこの機能を追加します。
   • featured-product.liquidを開き、ホームページの特集商品セクションにこの機能を追加します。

2. {% include 'product-form' %}を探します。このタグの上に次のコードを追加します。

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
        <p>Stock: {{ current_variant.inventory_quantity }}</p>
      {% endif %}
</div>

上記のコードを使用してStock: xを出力します。<p>タグのコンテンツを調整して文言を変更できます。<p>タグに{{current_variant.inventory_quantity }}を含めるようにします。

1. ファイルの最下部に次のコードを追加します。

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. [保存] をクリックします。

編集 custom.js

1. custom.jsを開きます。
2. ファイルの最下部に次のコードを追加します。

var sections = window.theme.sections;
    var inventorySelectorHtml = '.inventoryWrapper';
    var productExtension = {
      init: function() {
          this.on('variant_change_successful', this._updateInventory.bind(this));
          this.on('variant_change_undefined', this._removeInventory.bind(this));
      },
      _removeInventory: function() {
    $(inventorySelectorHtml, this.container).html('');
      },
      _updateInventory: function(event, instance, product, variant) {
    if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
      $(inventorySelectorHtml, this.container).html(`<p>Stock: ${variantStock[variant.id]}</p>`);
    } else {
      $(inventorySelectorHtml, this.container).html('');
    }
  }
};
    sections.extend('product-template', productExtension);
    sections.extend('featured-product', productExtension);

上記のコードを使用してStock: xを出力します。<p>タグのコンテンツを調整して文言を変更できます。<p>タグに${variantStock[variant.id]}を含めるようにします。

1. [保存] をクリックします。