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

このページはOct 09, 2024に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-remaining-quantityをご覧ください。

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

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

Debutの手順

編集 theme.liquid

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

  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の手順

編集 theme.liquid

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

  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の手順

編集 theme.liquid

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

  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の手順

編集 theme.liquid

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

  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の手順

編集 theme.liquid

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

  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の手順

編集 theme.liquid

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

  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. [保存] をクリックします。

Shopifyで販売を開始する準備はできていますか?

無料体験を試す