Vis gjenværende lagerbeholdning av en variant på produktsider
Du kan legge inn en melding på produktsiden eller seksjonen med utvalgte produkter, som viser antall varer du har på lager når lagerbeholdningen av en produktvariant er lav. Du må aktivere lagersporing for produktet for at denne meldingen skal vises.
Trinnene for denne tilpasningen varierer avhengig av valgt tema. Klikk på knappen for ditt tema og følg instruksjonene.
Debut
Steg for Debut
Rediger theme.liquid
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Finn temaet du vil redigere, og klikk på knappen … > Rediger kode.
- Fra Layout-katalogen åpner du
theme.liquid
. -
Finn den avsluttende
</head>
-taggen i koden. Lim inn følgende kode på en ny linje like over den avsluttende</head>
-taggen:
<script>
var variantStock = {};
</script>
- Klikk på Lagre.
Rediger product-template.liquid
eller featured-product.liquid
-
Fra Seksjoner-katalogen åpner du
product-template.liquid
ellerfeatured-product.liquid
:- Åpne
product-template.liquid
for å legge til denne funksjonen på produktsider. - Åpne
featured-product.liquid
for å legge til denne funksjonen i seksjonen for fremhevede produkter på startsiden.
- Åpne
Finn
{% form 'product'
. Legg til følgende kode over denne 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>
Koden over gir resultatet Stock: x
. Du kan endre ordleggingen ved å justere innholdet i <p>
-taggene. Pass på at du tar med {{ current_variant.inventory_quantity }}
i <p>
-taggene.
- Nederst i filen legger du til følgende kode:
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- Klikk på Lagre.
Rediger theme.js.liquid
eller theme.js
Hvilke endringer du må gjøre i disse filene avhenger av hvilken Debut-versjon du bruker.
Versjon 17.8.0 og lavere
- Åpne
theme.js.liquid
ellertheme.js
. -
Finn
theme.Product = (function()
. Legg til følgende kode underthis.selectors = {
:
inventoryHtml: '.inventoryWrapper',
- I samme fil, finn
_updateAddToCart: function(evt) {
. Legg til følgende kode rett nedenfor:
var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);
-
Finn
if (variant.available) {
. Legg til følgende kode før} else {
-uttrykket:
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 = '';
}
Koden over gir resultatet Stock: x
. Du kan endre ordleggingen ved å justere innholdet i <p>
-taggene. Pass på at du tar med ${variantStock[variant.id]}
i <p>
-taggene.
- Klikk på Lagre.
Versjon 17.9.0 og nyere
- Åpne
theme.js.liquid
ellertheme.js
. -
Finn
theme.Product = (function()
. Legg til følgende kode underthis.selectors = {
:
inventoryHtml: '.inventoryWrapper',
- I samme fil, finn
_setProductState: function(evt) {
. Legg til følgende kode rett nedenfor:
var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);
- I samme funksjon, finn
if (!variant) {
. Legg til følgende kode etter den avsluttende}
-braketten:
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 = '';
}
}
Koden over gir resultatet Stock: x
. Du kan endre ordleggingen ved å justere innholdet i <p>
-taggene. Pass på at du tar med ${variantStock[variant.id]}
i <p>
-taggene.
- Klikk på Lagre.
Brooklyn
Trinn for Brooklyn
Rediger theme.liquid
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Finn temaet du vil redigere, og klikk på knappen … > Rediger kode.
- Fra Layout-katalogen åpner du
theme.liquid
. -
Finn den avsluttende
</head>
-taggen i koden. Lim inn følgende kode på en ny linje like over den avsluttende</head>
-taggen:
<script>
var variantStock = {};
</script>
- Klikk på Lagre.
Rediger product-template.liquid
eller featured-product.liquid
-
Fra Seksjoner-katalogen åpner du
product-template.liquid
ellerfeatured-product.liquid
:- Åpne
product-template.liquid
for å legge til denne funksjonen på produktsider. - Åpne
featured-product.liquid
for å legge til denne funksjonen i seksjonen for fremhevede produkter på startsiden.
- Åpne
Finn
{% form 'product'
. Legg til følgende kode over denne 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>
Koden over gir resultatet Stock: x
. Du kan endre ordleggingen ved å justere innholdet i <p>
-taggene. Pass på at du tar med {{current_variant.inventory_quantity }}
i <p>
-taggene.
- Nederst i filen legger du til følgende kode:
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- Klikk på Lagre.
Rediger theme.js.liquid
eller theme.js
- Åpne
theme.js.liquid
ellertheme.js
. -
Finn
theme.Product = (function()
. Legg til følgende kode underthis.selectors = {
:
inventoryHtml: '.inventoryWrapper',
- I samme fil, finn
if (variant.available) {
. Legg til følgende kode før} else {
-uttrykket:
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('');
}
Koden over gir resultatet Stock: x
. Du kan endre ordleggingen ved å justere innholdet i <p>
-taggene. Pass på at du tar med ${variantStock[variant.id]}
i <p>
-taggene.
- Klikk på Lagre.
Simple
Steg for Simple
Rediger theme.liquid
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Finn temaet du vil redigere, og klikk på knappen … > Rediger kode.
- Fra Layout-katalogen åpner du
theme.liquid
. -
Finn den avsluttende
</head>
-taggen i koden. Lim inn følgende kode på en ny linje like over den avsluttende</head>
-taggen:
<script>
var variantStock = {};
</script>
- Klikk på Lagre.
Rediger product-template.liquid
eller featured-product.liquid
-
Fra Seksjoner-katalogen åpner du
product-template.liquid
ellerfeatured-product.liquid
:- Åpne
product-template.liquid
for å legge til denne funksjonen på produktsider. - Åpne
featured-product.liquid
for å legge til denne funksjonen i seksjonen for fremhevede produkter på startsiden.
- Åpne
Finn
{% form 'product'
. Legg til følgende kode over denne 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>
Koden over gir resultatet Stock: x
. Du kan endre ordleggingen ved å justere innholdet i <p>
-taggene. Pass på at du tar med {{current_variant.inventory_quantity }}
i <p>
-taggene.
- Nederst i filen legger du til følgende kode:
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- Klikk på Lagre.
Rediger theme.js.liquid
eller theme.js
- Åpne
theme.js.liquid
ellertheme.js
. -
Finn
theme.Product = (function()
. Legg til følgende kode underthis.selectors = {
:
inventoryHtml: '.inventoryWrapper',
- I samme fil, finn
if (variant.available) {
. Legg til følgende kode før} else {
-uttrykket:
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('');
}
Koden over gir resultatet Stock: x
. Du kan endre ordleggingen ved å justere innholdet i <p>
-taggene. Pass på at du tar med ${variantStock[variant.id]}
i <p>
-taggene.
- Klikk på Lagre.
Minimal
Steg for Minimal
Rediger theme.liquid
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Finn temaet du vil redigere, og klikk på knappen … > Rediger kode.
- Fra Layout-katalogen åpner du
theme.liquid
. -
Finn den avsluttende
</head>
-taggen i koden. Lim inn følgende kode på en ny linje like over den avsluttende</head>
-taggen:
<script>
var variantStock = {};
</script>
- Klikk på Lagre.
Rediger product-template.liquid
eller featured-product.liquid
-
Fra Seksjoner-katalogen åpner du
product-template.liquid
ellerfeatured-product.liquid
:- Åpne
product-template.liquid
for å legge til denne funksjonen på produktsider. - Åpne
featured-product.liquid
for å legge til denne funksjonen i seksjonen for fremhevede produkter på startsiden.
- Åpne
Finn
{% form 'product'
. Legg til følgende kode over denne 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>
Koden over gir resultatet Stock: x
. Du kan endre ordleggingen ved å justere innholdet i <p>
-taggene. Pass på at du tar med {{current_variant.inventory_quantity }}
i <p>
-taggene.
- Nederst i filen legger du til følgende kode:
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- Klikk på Lagre.
Rediger theme.js.liquid
eller theme.js
- Åpne
theme.js.liquid
ellertheme.js
. -
Finn
theme.Product = (function()
. Legg til følgende kode underthis.selectors = {
:
inventoryHtml: '.inventoryWrapper',
- I samme fil, finn
if (variant.available) {
. Legg til følgende kode før} else {
-uttrykket:
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('');
}
Koden over gir resultatet Stock: x
. Du kan endre ordleggingen ved å justere innholdet i <p>
-taggene. Pass på at du tar med ${variantStock[variant.id]}
i <p>
-taggene.
- Klikk på Lagre.
Boundless
Steg for Boundless
Rediger theme.liquid
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Finn temaet du vil redigere, og klikk på knappen … > Rediger kode.
- Fra Layout-katalogen åpner du
theme.liquid
. -
Finn den avsluttende
</head>
-taggen i koden. Lim inn følgende kode på en ny linje like over den avsluttende</head>
-taggen:
<script>
var variantStock = {};
</script>
- Klikk på Lagre.
Rediger product-template.liquid
eller featured-product.liquid
-
Fra Seksjoner-katalogen åpner du
product-template.liquid
ellerfeatured-product.liquid
:- Åpne
product-template.liquid
for å legge til denne funksjonen på produktsider. - Åpne
featured-product.liquid
for å legge til denne funksjonen i seksjonen for fremhevede produkter på startsiden.
- Åpne
Finn
{% form 'product'
. Legg til følgende kode over denne 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>
Koden over gir resultatet Stock: x
. Du kan endre ordleggingen ved å justere innholdet i <p>
-taggene. Pass på at du tar med {{current_variant.inventory_quantity }}
i <p>
-taggene.
- Nederst i filen legger du til følgende kode:
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- Klikk på Lagre.
Rediger theme.js.liquid
eller theme.js
- Åpne «theme.js.liquid» *eller *«theme.js».
-
Finn
theme.Product = (function()
. Legg til følgende kode undervar selectors = {
:
inventoryHtml: '.inventoryWrapper',
- I samme fil, finn
$(selectors.SKU, this.$container).html(variant.sku);
. Legg til følgende kode rett nedenfor:
if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
$('.inventoryWrapper').html(inventoryHtml);
} else {
$('.inventoryWrapper').html("");
}
Koden over gir resultatet Stock: x
. Du kan endre ordleggingen ved å justere innholdet i <p>
-taggene. Pass på at du tar med ${variantStock[variant.id]}
i <p>
-taggene.
- Klikk på Lagre.
Narrative
Steg for Narrative
Rediger theme.liquid
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Finn temaet du vil redigere, og klikk på knappen … > Rediger kode.
- Fra Layout-katalogen åpner du
theme.liquid
. -
Finn den avsluttende
</head>
-taggen i koden. Lim inn følgende kode på en ny linje like over den avsluttende</head>
-taggen:
<script>
var variantStock = {};
</script>
- Klikk på Lagre.
Rediger product-template.liquid
eller featured-product.liquid
-
Fra Seksjoner-katalogen åpner du
product-template.liquid
ellerfeatured-product.liquid
:- Åpne
product-template.liquid
for å legge til denne funksjonen på produktsider. - Åpne
featured-product.liquid
for å legge til denne funksjonen i seksjonen for fremhevede produkter på startsiden.
- Åpne
Finn
{% include 'product-form' %}
. Legg til følgende kode over denne 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>
Koden over gir resultatet Stock: x
. Du kan endre ordleggingen ved å justere innholdet i <p>
-taggene. Pass på at du tar med {{current_variant.inventory_quantity }}
i <p>
-taggene.
- Nederst i filen legger du til følgende kode:
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- Klikk på Lagre.
Rediger custom.js
- Åpne
custom.js
. - Nederst i filen legger du til følgende kode:
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);
Koden over gir resultatet Stock: x
. Du kan endre ordleggingen ved å justere innholdet i <p>
-taggene. Pass på at du tar med ${variantStock[variant.id]}
i <p>
-taggene.
- Klikk på Lagre.