Ürün sayfalarında bir varyasyonun kalan envanterini gösterme

Ürün sayfasına veya öne çıkan ürün bölümüne, bir ürün varyasyonunun envanteri azaldığında stokta bulunan ürün sayısını gösteren bir mesaj ekleyebilirsiniz. Bu mesajın gösterilebilmesi için üründe envanter takibini etkinleştirmeniz gerekir.

Bu özelleştirmeye yönelik adımlar, temanıza göre değişiklik gösterir. Temanıza ilişkin düğmeye basın ve talimatları uygulayın.

Debut

Debut için adımlar

Düzenle theme.liquid

  1. Shopify yöneticinizden online mağaza > temaları' na gidin.
  2. Düzenlemek istediğiniz temayı bulun ve ... düğmesi > Kodu düzenle'ye tıklayın.
  3. Düzen dizininden, theme.liquid dosyasını açın.
  4. Koddaki kapatma </head> etiketini bulun. Kapatma </head> etiketinin tam üzerindeki yeni satıra aşağıdaki kodu yapıştırın:
<script>
  var variantStock = {};
</script>
  1. Kayıtyap ' a tıklayın.
  1. Bölümler dizininden product-template.liquid veya featured-product.liquid dosyasını açın:

    • Bu özelliği ürün sayfalarına eklemek içinproduct-template.liquid dosyasını açın.
    • Bu özelliği ana sayfadaki öne çıkan ürün bölümüne eklemek için featured-product.liquid dosyasını açın.
  2. {% form 'product' kodunu bulun. Bu etiketin üstüne aşağıdaki kodu ekleyin:

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

Yukarıdaki kod, Stock: x çıktısı vermektedir. <p> etiketlerinin içeriğini ayarlayarak ifadeleri değiştirebilirsiniz . <p> etiketleriniz içerisine {{ current_variant.inventory_quantity }} koyduğunuzdan emin olun.

  1. Dosyanın en altına aşağıdaki kodu ekleyin:
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. Kayıtyap ' a tıklayın.

Dosyaları düzenleyin: theme.js.liquid veya theme.js

Bu dosyalarda yapmanız gereken değişiklikler, kullandığınız Debut sürümüne bağlıdır.

17.8.0 ve altı sürümler

  1. theme.js.liquid veya theme.js dosyasını açın.
  2. theme.Product = (function() kodunu bulun. this.selectors = { altında, aşağıdaki kodu ekleyin:
inventoryHtml: '.inventoryWrapper',
  1. Aynı dosyada _updateAddToCart: function(evt) { kodunu bulun. Hemen altına aşağıdaki kodu ekleyin:
var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);
  1. if (variant.available) { kodunu bulun. } else { kısmından öncesine aşağıdaki kodu ekleyin:
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 = '';
}

Yukarıdaki kod, Stock: x çıktısı vermektedir. <p> etiketlerinin içeriğini ayarlayarak ifadeleri değiştirebilirsiniz . <p> etiketleriniz içerisine ${variantStock[variant.id]} koyduğunuzdan emin olun.

  1. Kayıtyap ' a tıklayın.

17.9.0 ve üzeri sürümler

  1. theme.js.liquid veya theme.js dosyasını açın.
  2. theme.Product = (function() kodunu bulun. this.selectors = { altında, aşağıdaki kodu ekleyin:
inventoryHtml: '.inventoryWrapper',
  1. Aynı dosyada _setProductState: function(evt) { kodunu bulun. Hemen altına aşağıdaki kodu ekleyin:
var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);
  1. Aynı işlevde, if (!variant) { kodunu bulun. Kapatma } etiketinden sonrasına aşağıdaki kodu ekleyin:
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 = '';
  }
}

Yukarıdaki kod, Stock: x çıktısı vermektedir. <p> etiketlerinin içeriğini ayarlayarak ifadeleri değiştirebilirsiniz . <p> etiketleriniz içerisine ${variantStock[variant.id]} koyduğunuzdan emin olun.

  1. Kayıtyap ' a tıklayın.
Brooklyn

Brooklyn için adımlar

Düzenle theme.liquid

  1. Shopify yöneticinizden online mağaza > temaları' na gidin.
  2. Düzenlemek istediğiniz temayı bulun ve ... düğmesi > Kodu düzenle'ye tıklayın.
  3. Düzen dizininden, theme.liquid dosyasını açın.
  4. Koddaki kapatma </head> etiketini bulun. Kapatma </head> etiketinin tam üzerindeki yeni satıra aşağıdaki kodu yapıştırın:
<script>
  var variantStock = {};
</script>
  1. Kayıtyap ' a tıklayın.
  1. Bölümler dizininden product-template.liquid veya featured-product.liquid dosyasını açın:

    • Bu özelliği ürün sayfalarına eklemek içinproduct-template.liquid dosyasını açın.
    • Bu özelliği ana sayfadaki öne çıkan ürün bölümüne eklemek için featured-product.liquid dosyasını açın.
  2. {% form 'product' kodunu bulun. Bu etiketin üstüne aşağıdaki kodu ekleyin:

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

Yukarıdaki kod, Stock: x çıktısı vermektedir. <p> etiketlerinin içeriğini ayarlayarak ifadeleri değiştirebilirsiniz . <p> etiketleriniz içerisine {{current_variant.inventory_quantity }} koyduğunuzdan emin olun.

  1. Dosyanın en altına aşağıdaki kodu ekleyin:
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. Kayıtyap ' a tıklayın.

Dosyaları düzenleyin: theme.js.liquid veya theme.js

  1. theme.js.liquid veya theme.js dosyasını açın.
  2. theme.Product = (function() kodunu bulun. this.selectors = { altında, aşağıdaki kodu ekleyin:
inventoryHtml: '.inventoryWrapper',
  1. Aynı dosyada if (variant.available) { kodunu bulun. } else { kısmından öncesine aşağıdaki kodu ekleyin:
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('');
}

Yukarıdaki kod, Stock: x çıktısı vermektedir. <p> etiketlerinin içeriğini ayarlayarak ifadeleri değiştirebilirsiniz . <p> etiketleriniz içerisine ${variantStock[variant.id]} koyduğunuzdan emin olun.

  1. Kayıtyap ' a tıklayın.
Simple

Simple için adımlar

Düzenle theme.liquid

  1. Shopify yöneticinizden online mağaza > temaları' na gidin.
  2. Düzenlemek istediğiniz temayı bulun ve ... düğmesi > Kodu düzenle'ye tıklayın.
  3. Düzen dizininden, theme.liquid dosyasını açın.
  4. Koddaki kapatma </head> etiketini bulun. Kapatma </head> etiketinin tam üzerindeki yeni satıra aşağıdaki kodu yapıştırın:
<script>
  var variantStock = {};
</script>
  1. Kayıtyap ' a tıklayın.
  1. Bölümler dizininden product-template.liquid veya featured-product.liquid dosyasını açın:

    • Bu özelliği ürün sayfalarına eklemek içinproduct-template.liquid dosyasını açın.
    • Bu özelliği ana sayfadaki öne çıkan ürün bölümüne eklemek için featured-product.liquid dosyasını açın.
  2. {% form 'product' kodunu bulun. Bu etiketin üstüne aşağıdaki kodu ekleyin:

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

Yukarıdaki kod, Stock: x çıktısı vermektedir. <p> etiketlerinin içeriğini ayarlayarak ifadeleri değiştirebilirsiniz . <p> etiketleriniz içerisine {{current_variant.inventory_quantity }} koyduğunuzdan emin olun.

  1. Dosyanın en altına aşağıdaki kodu ekleyin:
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. Kayıtyap ' a tıklayın.

Dosyaları düzenleyin: theme.js.liquid veya theme.js

  1. theme.js.liquid veya theme.js dosyasını açın.
  2. theme.Product = (function() kodunu bulun. this.selectors = { altında, aşağıdaki kodu ekleyin:
inventoryHtml: '.inventoryWrapper',
  1. Aynı dosyada if (variant.available) { kodunu bulun. } else { kısmından öncesine aşağıdaki kodu ekleyin:
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('');
}

Yukarıdaki kod, Stock: x çıktısı vermektedir. <p> etiketlerinin içeriğini ayarlayarak ifadeleri değiştirebilirsiniz . <p> etiketleriniz içerisine ${variantStock[variant.id]} koyduğunuzdan emin olun.

  1. Kayıtyap ' a tıklayın.
Minimal

Minimal için adımlar

Düzenle theme.liquid

  1. Shopify yöneticinizden online mağaza > temaları' na gidin.
  2. Düzenlemek istediğiniz temayı bulun ve ... düğmesi > Kodu düzenle'ye tıklayın.
  3. Düzen dizininden, theme.liquid dosyasını açın.
  4. Koddaki kapatma </head> etiketini bulun. Kapatma </head> etiketinin tam üzerindeki yeni satıra aşağıdaki kodu yapıştırın:
<script>
  var variantStock = {};
</script>
  1. Kayıtyap ' a tıklayın.
  1. Bölümler dizininden product-template.liquid veya featured-product.liquid dosyasını açın:

    • Bu özelliği ürün sayfalarına eklemek içinproduct-template.liquid dosyasını açın.
    • Bu özelliği ana sayfadaki öne çıkan ürün bölümüne eklemek için featured-product.liquid dosyasını açın.
  2. {% form 'product' kodunu bulun. Bu etiketin üstüne aşağıdaki kodu ekleyin:

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

Yukarıdaki kod, Stock: x çıktısı vermektedir. <p> etiketlerinin içeriğini ayarlayarak ifadeleri değiştirebilirsiniz . <p> etiketleriniz içerisine {{current_variant.inventory_quantity }} koyduğunuzdan emin olun.

  1. Dosyanın en altına aşağıdaki kodu ekleyin:
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. Kayıtyap ' a tıklayın.

Dosyaları düzenleyin: theme.js.liquid veya theme.js

  1. theme.js.liquid veya theme.js dosyasını açın.
  2. theme.Product = (function() kodunu bulun. this.selectors = { altında, aşağıdaki kodu ekleyin:
inventoryHtml: '.inventoryWrapper',
  1. Aynı dosyada if (variant.available) { kodunu bulun. } else { kısmından öncesine aşağıdaki kodu ekleyin:
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('');
}

Yukarıdaki kod, Stock: x çıktısı vermektedir. <p> etiketlerinin içeriğini ayarlayarak ifadeleri değiştirebilirsiniz . <p> etiketleriniz içerisine ${variantStock[variant.id]} koyduğunuzdan emin olun.

  1. Kayıtyap ' a tıklayın.
Boundless

Boundless için adımlar

Düzenle theme.liquid

  1. Shopify yöneticinizden online mağaza > temaları' na gidin.
  2. Düzenlemek istediğiniz temayı bulun ve ... düğmesi > Kodu düzenle'ye tıklayın.
  3. Düzen dizininden, theme.liquid dosyasını açın.
  4. Koddaki kapatma </head> etiketini bulun. Kapatma </head> etiketinin tam üzerindeki yeni satıra aşağıdaki kodu yapıştırın:
<script>
  var variantStock = {};
    </script>
  1. Kayıtyap ' a tıklayın.
  1. Bölümler dizininden product-template.liquid veya featured-product.liquid dosyasını açın:

    • Bu özelliği ürün sayfalarına eklemek içinproduct-template.liquid dosyasını açın.
    • Bu özelliği ana sayfadaki öne çıkan ürün bölümüne eklemek için featured-product.liquid dosyasını açın.
  2. {% form 'product' kodunu bulun. Bu etiketin üstüne aşağıdaki kodu ekleyin:

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

Yukarıdaki kod, Stock: x çıktısı vermektedir. <p> etiketlerinin içeriğini ayarlayarak ifadeleri değiştirebilirsiniz . <p> etiketleriniz içerisine {{current_variant.inventory_quantity }} koyduğunuzdan emin olun.

  1. Dosyanın en altına aşağıdaki kodu ekleyin:
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. Kayıtyap ' a tıklayın.

Dosyaları düzenleyin: theme.js.liquid veya theme.js

  1. "theme.js.liquid" *veya *"theme.js" dosyasını açın.
  2. theme.Product = (function() kodunu bulun. var selectors = { altında, aşağıdaki kodu ekleyin:
inventoryHtml: '.inventoryWrapper',
  1. Aynı dosyada $(selectors.SKU, this.$container).html(variant.sku); kodunu bulun. Hemen altına aşağıdaki kodu ekleyin:
if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
      const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $('.inventoryWrapper').html(inventoryHtml);
} else {
    $('.inventoryWrapper').html("");
}

Yukarıdaki kod, Stock: x çıktısı vermektedir. <p> etiketlerinin içeriğini ayarlayarak ifadeleri değiştirebilirsiniz . <p> etiketleriniz içerisine ${variantStock[variant.id]} koyduğunuzdan emin olun.

  1. Kayıtyap ' a tıklayın.
Narrative

Narrative için adımlar

Düzenle theme.liquid

  1. Shopify yöneticinizden online mağaza > temaları' na gidin.
  2. Düzenlemek istediğiniz temayı bulun ve ... düğmesi > Kodu düzenle'ye tıklayın.
  3. Düzen dizininden, theme.liquid dosyasını açın.
  4. Koddaki kapatma </head> etiketini bulun. Kapatma </head> etiketinin tam üzerindeki yeni satıra aşağıdaki kodu yapıştırın:
<script>
      var variantStock = {};
    </script>
  1. Kayıtyap ' a tıklayın.
  1. Bölümler dizininden product-template.liquid veya featured-product.liquid dosyasını açın:

    • Bu özelliği ürün sayfalarına eklemek içinproduct-template.liquid dosyasını açın.
    • Bu özelliği ana sayfadaki öne çıkan ürün bölümüne eklemek için featured-product.liquid dosyasını açın.
  2. {% include 'product-form' %} kodunu bulun. Bu etiketin üstüne aşağıdaki kodu ekleyin:

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

Yukarıdaki kod, Stock: x çıktısı vermektedir. <p> etiketlerinin içeriğini ayarlayarak ifadeleri değiştirebilirsiniz . <p> etiketleriniz içerisine {{current_variant.inventory_quantity }} koyduğunuzdan emin olun.

  1. Dosyanın en altına aşağıdaki kodu ekleyin:
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. Kayıtyap ' a tıklayın.

Düzenle custom.js

  1. custom.js uygulamasını açın.
  2. Dosyanın en altına aşağıdaki kodu ekleyin:
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);

Yukarıdaki kod, Stock: x çıktısı vermektedir. <p> etiketlerinin içeriğini ayarlayarak ifadeleri değiştirebilirsiniz . <p> etiketleriniz içerisine ${variantStock[variant.id]} koyduğunuzdan emin olun.

  1. Kayıtyap ' a tıklayın.
Aradığınız cevapları bulamıyor musunuz? Yardımcı olmak için buradayız.