Visa återstående lager för en variant på produktsidor
Du kan lägga till ett meddelande på produktsidan eller avsnittet med utvalda produkter som visar det antal artiklar du har i lager när lagret börjar ta slut för en produktvariant. Du måste aktivera lagerspårning för produkten för att det här meddelandet ska visas.
Stegen för denna anpassning varierar beroende på ditt tema. Klicka på knappen för ditt tema och följ anvisningarna.
Steg för Debut
Redigera theme.liquid
- Från din Shopify admin går du till Webbshop > teman.
- Hitta det tema du vill redigera och klicka sedan på knappen ... > Redigera kod.
- Öppna
theme.liquid
i katalogen Layout. -
Hitta sluttaggen
</head>
i koden. På en ny rad ovanför sluttaggen</head>
klistrar du in följande kod:
<script>
var variantStock = {};
</script>
- Klicka på Spara.
Redigera product-template.liquid
eller featured-product.liquid
-
Öppna
product-template.liquid
ellerfeatured-product.liquid
i katalogen Avsnitt:- Öppna
product-template.liquid
för att lägga till den här funktionen på produktsidor. - Öppna
featured-product.liquid
för att lägga till den här funktionen i avsnittet för utvalda produkter på startsidan.
- Öppna
Hitta
{% form 'product'
. Lägg till följande kod ovanför den här taggen:
<div class="inventoryWrapper">
{% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
<p>Stock: {{ current_variant.inventory_quantity }}</p>
{% endif %}
</div>
Ovanstående kod matar ut Stock: x
. Du kan ändra formuleringen genom att justera innehållet i <p>
-taggarna. Se till att inkludera {{ current_variant.inventory_quantity }}
i dina <p>
-taggar.
- Lägg till följande kod längst ner i filen:
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- Klicka på Spara.
Redigera theme.js.liquid
eller theme.js
Vilka ändringar du behöver göra i dessa filer beror på vilken version av Debut du använder.
Versionerna 17.8.0 och lägre
- Öppna
theme.js.liquid
ellertheme.js
. -
Hitta
theme.Product = (function()
. Underthis.selectors = {
lägger du till följande kod:
inventoryHtml: '.inventoryWrapper',
- I samma fil, hitta
_updateAddToCart: function(evt) {
. Lägg till följande kod direkt under:
var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);
-
Hitta
if (variant.available) {
. Före utdraget} else {
lägger du till följande kod:
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 = '';
}
Ovanstående kod matar ut Stock: x
. Du kan ändra formuleringen genom att justera innehållet i <p>
-taggarna. Se till att inkludera ${variantStock[variant.id]}
i dina <p>
-taggar.
- Klicka på Spara.
Versionerna 17.9.0 och högre
- Öppna
theme.js.liquid
ellertheme.js
. -
Hitta
theme.Product = (function()
. Underthis.selectors = {
lägger du till följande kod:
inventoryHtml: '.inventoryWrapper',
- I samma fil, hitta
_setProductState: function(evt) {
. Lägg till följande kod direkt under:
var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);
- I samma funktion, hitta
if (!variant) {
. Efter den avslutande}
-parentesen lägger du till följande kod:
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 = '';
}
}
Ovanstående kod matar ut Stock: x
. Du kan ändra formuleringen genom att justera innehållet i <p>
-taggarna. Se till att inkludera ${variantStock[variant.id]}
i dina <p>
-taggar.
- Klicka på Spara.
Steg för Brooklyn, Simple och Minimal
Redigera theme.liquid
- Från din Shopify admin går du till Webbshop > teman.
- Hitta det tema du vill redigera och klicka sedan på knappen ... > Redigera kod.
- Öppna
theme.liquid
i katalogen Layout. -
Hitta sluttaggen
</head>
i koden. På en ny rad ovanför sluttaggen</head>
klistrar du in följande kod:
<script>
var variantStock = {};
</script>
- Klicka på Spara.
Redigera product-template.liquid
eller featured-product.liquid
Öppna
product-template.liquid
ellerfeatured-product.liquid
i katalogen Avsnitt:Hitta
{% form 'product'
. Lägg till följande kod ovanför den här taggen:
<div class="inventoryWrapper">
{% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
<p>Stock: {{ current_variant.inventory_quantity }}</p>
{% endif %}
</div>
Ovanstående kod matar ut Stock: x
. Du kan ändra formuleringen genom att justera innehållet i <p>
-taggarna. Se till att inkludera {{current_variant.inventory_quantity }}
i dina <p>
-taggar.
- Lägg till följande kod längst ner i filen:
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- Klicka på Spara.
Redigera theme.js.liquid
eller theme.js
- Öppna
theme.js.liquid
ellertheme.js
. -
Hitta
theme.Product = (function()
. Underthis.selectors = {
lägger du till följande kod:
inventoryHtml: '.inventoryWrapper',
- I samma fil, hitta
if (variant.available) {
. Före utdraget} else {
lägger du till följande kod:
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('');
}
Ovanstående kod matar ut Stock: x
. Du kan ändra formuleringen genom att justera innehållet i <p>
-taggarna. Se till att inkludera ${variantStock[variant.id]}
i dina <p>
-taggar.
- Klicka på Spara.
Steg för Boundless
Redigera theme.liquid
- Från din Shopify admin går du till Webbshop > teman.
- Hitta det tema du vill redigera och klicka sedan på knappen ... > Redigera kod.
- Öppna
theme.liquid
i katalogen Layout. -
Hitta sluttaggen
</head>
i koden. På en ny rad ovanför sluttaggen</head>
klistrar du in följande kod:
<script>
var variantStock = {};
</script>
- Klicka på Spara.
Redigera product-template.liquid
eller featured-product.liquid
Öppna
product-template.liquid
ellerfeatured-product.liquid
i katalogen Avsnitt:Hitta
{% form 'product'
. Lägg till följande kod ovanför den här taggen:
<div class="inventoryWrapper">
{% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
<p>Stock: {{ current_variant.inventory_quantity }}</p>
{% endif %}
</div>
Ovanstående kod matar ut Stock: x
. Du kan ändra formuleringen genom att justera innehållet i <p>
-taggarna. Se till att inkludera {{current_variant.inventory_quantity }}
i dina <p>
-taggar.
- Lägg till följande kod längst ner i filen:
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- Klicka på Spara.
Redigera theme.js.liquid
eller theme.js
- Öppna "theme.js.liquid" *eller *"theme.js".
-
Hitta
theme.Product = (function()
. Undervar selectors = {
lägger du till följande kod:
inventoryHtml: '.inventoryWrapper',
- I samma fil, hitta
$(selectors.SKU, this.$container).html(variant.sku);
. Lägg till följande kod direkt under:
if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
$('.inventoryWrapper').html(inventoryHtml);
} else {
$('.inventoryWrapper').html("");
}
Ovanstående kod matar ut Stock: x
. Du kan ändra formuleringen genom att justera innehållet i <p>
-taggarna. Se till att inkludera ${variantStock[variant.id]}
i dina <p>
-taggar.
- Klicka på Spara.
Steg för Narrative
Redigera theme.liquid
- Från din Shopify admin går du till Webbshop > teman.
- Hitta det tema du vill redigera och klicka sedan på knappen ... > Redigera kod.
- Öppna
theme.liquid
i katalogen Layout. -
Hitta sluttaggen
</head>
i koden. På en ny rad ovanför sluttaggen</head>
klistrar du in följande kod:
<script>
var variantStock = {};
</script>
- Klicka på Spara.
Redigera product-template.liquid
eller featured-product.liquid
Öppna
product-template.liquid
ellerfeatured-product.liquid
i katalogen Avsnitt:Hitta
{% include 'product-form' %}
. Lägg till följande kod ovanför den här taggen:
<div class="inventoryWrapper">
{% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
<p>Stock: {{ current_variant.inventory_quantity }}</p>
{% endif %}
</div>
Ovanstående kod matar ut Stock: x
. Du kan ändra formuleringen genom att justera innehållet i <p>
-taggarna. Se till att inkludera {{current_variant.inventory_quantity }}
i dina <p>
-taggar.
- Lägg till följande kod längst ner i filen:
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- Klicka på Spara.
Redigera custom.js
- Öppna
custom.js
. - Lägg till följande kod längst ner i filen:
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);
Ovanstående kod matar ut Stock: x
. Du kan ändra formuleringen genom att justera innehållet i <p>
-taggarna. Se till att inkludera ${variantStock[variant.id]}
i dina <p>
-taggar.
- Klicka på Spara.