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

Dikkat

Vintage temalar Theme Store'da bulunmaz. Vintage temalar, Shopify'ın Online Store 2.0 temalarında yer alan özellikleri içermez ve Shopify'ın ücretsiz vintage temaları, güvenlik düzeltmelerinin dışında güncelleme almaz.

Not

Shopify'ın ücretsiz bir temasını kullanıyorsanız bu eğitimle ilgili yardım almak için Shopify Destek ekibiyle iletişime geçebilirsiniz. 15 dakikalık bir tasarım süresi gerekir. Shopify Tasarım Politikası hakkında daha fazla bilgi edinin.

Not

Bu özelleştirme, vintage Shopify temaları içindir ve Online Store 2.0 temalarına uygulanmaz.

• Temanızın mimari sürümünü öğrenin
• Online Store 2.0 tema özelleştirmelerini keşfedin

Ü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.

İpucu

Shopify'ın Supply temasında ve Venture temasında zaten bir Kalan adet mesajını göster ayarı bulunur. Bu ayarı, tema düzenleyicisinden etkinleştirebilirsiniz.

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.

Dosyaları düzenleyin: product-template.liquid veya featured-product.liquid

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.

Dosyaları düzenleyin: product-template.liquid veya featured-product.liquid

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.

Dosyaları düzenleyin: product-template.liquid veya featured-product.liquid

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.

Dosyaları düzenleyin: product-template.liquid veya featured-product.liquid

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.

Dosyaları düzenleyin: product-template.liquid veya featured-product.liquid

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.

Dosyaları düzenleyin: product-template.liquid veya featured-product.liquid

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.