Ü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
- Shopify yöneticinizden online mağaza > temaları' na gidin.
- Düzenlemek istediğiniz temayı bulun ve ... düğmesi > Kodu düzenle'ye tıklayın.
-
Düzen dizininden,
theme.liquid
dosyasını açın. - 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>
- Kayıtyap ' a tıklayın.
Dosyaları düzenleyin: product-template.liquid
veya featured-product.liquid
-
Bölümler dizininden
product-template.liquid
veyafeatured-product.liquid
dosyasını açın:- Bu özelliği ürün sayfalarına eklemek için
product-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.
- Bu özelliği ürün sayfalarına eklemek için
{% 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.
- Dosyanın en altına aşağıdaki kodu ekleyin:
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- 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
-
theme.js.liquid
veyatheme.js
dosyasını açın. -
theme.Product = (function()
kodunu bulun.this.selectors = {
altında, aşağıdaki kodu ekleyin:
inventoryHtml: '.inventoryWrapper',
- Aynı dosyada
_updateAddToCart: function(evt) {
kodunu bulun. Hemen altına aşağıdaki kodu ekleyin:
var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);
-
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.
- Kayıtyap ' a tıklayın.
17.9.0 ve üzeri sürümler
-
theme.js.liquid
veyatheme.js
dosyasını açın. -
theme.Product = (function()
kodunu bulun.this.selectors = {
altında, aşağıdaki kodu ekleyin:
inventoryHtml: '.inventoryWrapper',
- Aynı dosyada
_setProductState: function(evt) {
kodunu bulun. Hemen altına aşağıdaki kodu ekleyin:
var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);
- 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.
- Kayıtyap ' a tıklayın.
Brooklyn
Brooklyn için adımlar
Düzenle theme.liquid
- Shopify yöneticinizden online mağaza > temaları' na gidin.
- Düzenlemek istediğiniz temayı bulun ve ... düğmesi > Kodu düzenle'ye tıklayın.
-
Düzen dizininden,
theme.liquid
dosyasını açın. - 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>
- Kayıtyap ' a tıklayın.
Dosyaları düzenleyin: product-template.liquid
veya featured-product.liquid
-
Bölümler dizininden
product-template.liquid
veyafeatured-product.liquid
dosyasını açın:- Bu özelliği ürün sayfalarına eklemek için
product-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.
- Bu özelliği ürün sayfalarına eklemek için
{% 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.
- Dosyanın en altına aşağıdaki kodu ekleyin:
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- Kayıtyap ' a tıklayın.
Dosyaları düzenleyin: theme.js.liquid
veya theme.js
-
theme.js.liquid
veyatheme.js
dosyasını açın. -
theme.Product = (function()
kodunu bulun.this.selectors = {
altında, aşağıdaki kodu ekleyin:
inventoryHtml: '.inventoryWrapper',
- 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.
- Kayıtyap ' a tıklayın.
Simple
Simple için adımlar
Düzenle theme.liquid
- Shopify yöneticinizden online mağaza > temaları' na gidin.
- Düzenlemek istediğiniz temayı bulun ve ... düğmesi > Kodu düzenle'ye tıklayın.
-
Düzen dizininden,
theme.liquid
dosyasını açın. - 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>
- Kayıtyap ' a tıklayın.
Dosyaları düzenleyin: product-template.liquid
veya featured-product.liquid
-
Bölümler dizininden
product-template.liquid
veyafeatured-product.liquid
dosyasını açın:- Bu özelliği ürün sayfalarına eklemek için
product-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.
- Bu özelliği ürün sayfalarına eklemek için
{% 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.
- Dosyanın en altına aşağıdaki kodu ekleyin:
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- Kayıtyap ' a tıklayın.
Dosyaları düzenleyin: theme.js.liquid
veya theme.js
-
theme.js.liquid
veyatheme.js
dosyasını açın. -
theme.Product = (function()
kodunu bulun.this.selectors = {
altında, aşağıdaki kodu ekleyin:
inventoryHtml: '.inventoryWrapper',
- 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.
- Kayıtyap ' a tıklayın.
Minimal
Minimal için adımlar
Düzenle theme.liquid
- Shopify yöneticinizden online mağaza > temaları' na gidin.
- Düzenlemek istediğiniz temayı bulun ve ... düğmesi > Kodu düzenle'ye tıklayın.
-
Düzen dizininden,
theme.liquid
dosyasını açın. - 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>
- Kayıtyap ' a tıklayın.
Dosyaları düzenleyin: product-template.liquid
veya featured-product.liquid
-
Bölümler dizininden
product-template.liquid
veyafeatured-product.liquid
dosyasını açın:- Bu özelliği ürün sayfalarına eklemek için
product-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.
- Bu özelliği ürün sayfalarına eklemek için
{% 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.
- Dosyanın en altına aşağıdaki kodu ekleyin:
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- Kayıtyap ' a tıklayın.
Dosyaları düzenleyin: theme.js.liquid
veya theme.js
-
theme.js.liquid
veyatheme.js
dosyasını açın. -
theme.Product = (function()
kodunu bulun.this.selectors = {
altında, aşağıdaki kodu ekleyin:
inventoryHtml: '.inventoryWrapper',
- 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.
- Kayıtyap ' a tıklayın.
Boundless
Boundless için adımlar
Düzenle theme.liquid
- Shopify yöneticinizden online mağaza > temaları' na gidin.
- Düzenlemek istediğiniz temayı bulun ve ... düğmesi > Kodu düzenle'ye tıklayın.
-
Düzen dizininden,
theme.liquid
dosyasını açın. - 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>
- Kayıtyap ' a tıklayın.
Dosyaları düzenleyin: product-template.liquid
veya featured-product.liquid
-
Bölümler dizininden
product-template.liquid
veyafeatured-product.liquid
dosyasını açın:- Bu özelliği ürün sayfalarına eklemek için
product-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.
- Bu özelliği ürün sayfalarına eklemek için
{% 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.
- Dosyanın en altına aşağıdaki kodu ekleyin:
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- Kayıtyap ' a tıklayın.
Dosyaları düzenleyin: theme.js.liquid
veya theme.js
- "theme.js.liquid" *veya *"theme.js" dosyasını açın.
-
theme.Product = (function()
kodunu bulun.var selectors = {
altında, aşağıdaki kodu ekleyin:
inventoryHtml: '.inventoryWrapper',
- 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.
- Kayıtyap ' a tıklayın.
Narrative
Narrative için adımlar
Düzenle theme.liquid
- Shopify yöneticinizden online mağaza > temaları' na gidin.
- Düzenlemek istediğiniz temayı bulun ve ... düğmesi > Kodu düzenle'ye tıklayın.
-
Düzen dizininden,
theme.liquid
dosyasını açın. - 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>
- Kayıtyap ' a tıklayın.
Dosyaları düzenleyin: product-template.liquid
veya featured-product.liquid
-
Bölümler dizininden
product-template.liquid
veyafeatured-product.liquid
dosyasını açın:- Bu özelliği ürün sayfalarına eklemek için
product-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.
- Bu özelliği ürün sayfalarına eklemek için
{% 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.
- Dosyanın en altına aşağıdaki kodu ekleyin:
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- Kayıtyap ' a tıklayın.
Düzenle custom.js
-
custom.js
uygulamasını açın. - 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.
- Kayıtyap ' a tıklayın.