Version jäljellä olevan varaston näyttäminen tuotesivuilla

Huomio

Vanhoja teemoja ei ole saatavilla Theme Storessa. Vanhoissa teemoissa ei ole Shopifyn Online Store 2.0 ‑teemoihin sisältyviä ominaisuuksia, eikä Shopifyn ilmaisiin vanhoihin teemoihin tehdä muita päivityksiä kuin tietoturvakorjauksia.

Huomaa

Jos käytät Shopifyn ilmaista teemaa, voit ottaa yhteyttä Shopify-tukeen saadaksesi tähän tutoriaaliin liittyvää tukea. Tarvitset 15 minuuttia suunnitteluaikaa. Lue lisää Shopifyn suunnittelukäytännöstä.

Huomaa

tämä mukautus koskee vain vanhoja Shopify-teemoja, eikä sitä sovelleta Online Store 2.0 -teemoihin.

• Selvitä teemasi arkkitehtuuriversio
• Tutustu Online Store 2.0:n teemojen mukauttamiseen

Voit lisätä tuotesivulle tai Esittelyssä oleva tuote ‑osioon viestin, joka näyttää varastossa olevien tuotteiden määrän, kun tuoteversion varasto on vähäinen. Jotta tämä viesti voidaan näyttää, sinun on otettava tuotteelle käyttöön varaston seuranta.

Tämän mukautuksen toimintavaiheet vaihtelevat teeman mukaan. Klikkaa teeman painiketta ja noudata ohjeita.

Vinkki

Shopifyn Supply-teema ja Venture-teema sisältävät jo Näytä jäljellä oleva määrä -viestin -asetuksen. Voit aktivoida tämän asetuksen teemaeditorista.

Debut

Debut-teeman toimintavaiheet

Muokkaa theme.liquid

1. Siirry Shopify Adminissa kohtaan Verkkokauppa > Teemat.
2. Etsi teema, jota haluat muokata, ja napsauta sitten ...-painiketta > Muokkaa koodia.
3. Avaa Layout-hakemistossa theme.liquid.
4. Etsi tämän elementin lopputunniste </head>. Liitä seuraava koodi uudelle riville lopputunnisteen </head> yläpuolelle:

<script>
  var variantStock = {};
</script>

1. Klikkaa Tallenna.

Muokkaa tiedostoa product-template.liquid tai tiedostoa featured-product.liquid

1. Avaa Sections-hakemistossa product-template.liquid tai featured-product.liquid:

   • Avaa product-template.liquid, jos haluat lisätä tämän ominaisuuden tuotesivuille.
   • Avaa featured-product.liquid, jos haluat lisätä tämän ominaisuuden etusivun Esittelyssä olevat tuotteet ‑osioon.

2. Etsi {% form 'product'. Lisää tämän tunnisteen yläpuolelle seuraava koodi:

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

Yläpuolella oleva koodi tuottaa tuloksen Stock: x. Voit muuttaa sanamuotoa säätämällä kohdan <p> sisältöä. Muista sisällyttää {{ current_variant.inventory_quantity }} <p>-tunnisteisiisi.

1. Lisää tiedoston loppuun seuraava koodi:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. Klikkaa Tallenna.

Muokkaa tiedostoa theme.js.liquid tai tiedostoa theme.js

Näihin tiedostoihin tarvittavat muutokset riippuvat käyttämästäsi Debut-versiosta.

Versiot 17.8.0 ja sitä vanhemmat

1. Avaa theme.js.liquid tai theme.js.
2. Etsi theme.Product = (function(). Lisää seuraava koodi kohdan this.selectors = { alapuolelle:

inventoryHtml: '.inventoryWrapper',

1. Etsi samasta tiedostosta _updateAddToCart: function(evt) {. Lisää seuraava koodi suoraan sen alle:

var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);

1. Etsi if (variant.available) {. Lisää seuraava koodi ennen lauseketta } 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 = '';
}

Yläpuolella oleva koodi tuottaa tuloksen Stock: x. Voit muuttaa sanamuotoa säätämällä kohdan <p> sisältöä. Muista sisällyttää ${variantStock[variant.id]} <p>-tunnisteisiisi.

1. Klikkaa Tallenna.

Versiot 17.9.0 ja sitä vanhemmat

1. Avaa theme.js.liquid tai theme.js.
2. Etsi theme.Product = (function(). Lisää seuraava koodi kohdan this.selectors = { alapuolelle:

inventoryHtml: '.inventoryWrapper',

1. Etsi samasta tiedostosta _setProductState: function(evt) {. Lisää seuraava koodi suoraan sen alle:

var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);

1. Etsi samasta funktiosta if (!variant) {. Lisää loppusulkeen } jälkeen seuraava koodi:

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 = '';
  }
}

Yläpuolella oleva koodi tuottaa tuloksen Stock: x. Voit muuttaa sanamuotoa säätämällä kohdan <p> sisältöä. Muista sisällyttää ${variantStock[variant.id]} <p>-tunnisteisiisi.

1. Klikkaa Tallenna.

Brooklyn

Brooklyn-teeman toimintavaiheet

Muokkaa theme.liquid

1. Siirry Shopify Adminissa kohtaan Verkkokauppa > Teemat.
2. Etsi teema, jota haluat muokata, ja napsauta sitten ...-painiketta > Muokkaa koodia.
3. Avaa Layout-hakemistossa theme.liquid.
4. Etsi tämän elementin lopputunniste </head>. Liitä seuraava koodi uudelle riville lopputunnisteen </head> yläpuolelle:

<script>
  var variantStock = {};
</script>

1. Klikkaa Tallenna.

Muokkaa tiedostoa product-template.liquid tai tiedostoa featured-product.liquid

1. Avaa Sections-hakemistossa product-template.liquid tai featured-product.liquid:

   • Avaa product-template.liquid, jos haluat lisätä tämän ominaisuuden tuotesivuille.
   • Avaa featured-product.liquid, jos haluat lisätä tämän ominaisuuden etusivun Esittelyssä olevat tuotteet ‑osioon.

2. Etsi {% form 'product'. Lisää tämän tunnisteen yläpuolelle seuraava koodi:

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

Yläpuolella oleva koodi tuottaa tuloksen Stock: x. Voit muuttaa sanamuotoa säätämällä kohdan <p> sisältöä. Muista sisällyttää {{current_variant.inventory_quantity }} <p>-tunnisteisiisi.

1. Lisää tiedoston loppuun seuraava koodi:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. Klikkaa Tallenna.

Muokkaa tiedostoa theme.js.liquid tai tiedostoa theme.js

1. Avaa theme.js.liquid tai theme.js.
2. Etsi theme.Product = (function(). Lisää seuraava koodi kohdan this.selectors = { alapuolelle:

inventoryHtml: '.inventoryWrapper',

1. Etsi samasta tiedostosta if (variant.available) {. Lisää seuraava koodi ennen lauseketta } else {:

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('');
}

Yläpuolella oleva koodi tuottaa tuloksen Stock: x. Voit muuttaa sanamuotoa säätämällä kohdan <p> sisältöä. Muista sisällyttää ${variantStock[variant.id]} <p>-tunnisteisiisi.

1. Klikkaa Tallenna.

Simple

Simple-teeman toimintavaiheet

Muokkaa theme.liquid

1. Siirry Shopify Adminissa kohtaan Verkkokauppa > Teemat.
2. Etsi teema, jota haluat muokata, ja napsauta sitten ...-painiketta > Muokkaa koodia.
3. Avaa Layout-hakemistossa theme.liquid.
4. Etsi tämän elementin lopputunniste </head>. Liitä seuraava koodi uudelle riville lopputunnisteen </head> yläpuolelle:

<script>
  var variantStock = {};
</script>

1. Klikkaa Tallenna.

Muokkaa tiedostoa product-template.liquid tai tiedostoa featured-product.liquid

1. Avaa Sections-hakemistossa product-template.liquid tai featured-product.liquid:

   • Avaa product-template.liquid, jos haluat lisätä tämän ominaisuuden tuotesivuille.
   • Avaa featured-product.liquid, jos haluat lisätä tämän ominaisuuden etusivun Esittelyssä olevat tuotteet ‑osioon.

2. Etsi {% form 'product'. Lisää tämän tunnisteen yläpuolelle seuraava koodi:

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

Yläpuolella oleva koodi tuottaa tuloksen Stock: x. Voit muuttaa sanamuotoa säätämällä kohdan <p> sisältöä. Muista sisällyttää {{current_variant.inventory_quantity }} <p>-tunnisteisiisi.

1. Lisää tiedoston loppuun seuraava koodi:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. Klikkaa Tallenna.

Muokkaa tiedostoa theme.js.liquid tai tiedostoa theme.js

1. Avaa theme.js.liquid tai theme.js.
2. Etsi theme.Product = (function(). Lisää seuraava koodi kohdan this.selectors = { alapuolelle:

inventoryHtml: '.inventoryWrapper',

1. Etsi samasta tiedostosta if (variant.available) {. Lisää seuraava koodi ennen lauseketta } else {:

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('');
}

Yläpuolella oleva koodi tuottaa tuloksen Stock: x. Voit muuttaa sanamuotoa säätämällä kohdan <p> sisältöä. Muista sisällyttää ${variantStock[variant.id]} <p>-tunnisteisiisi.

1. Klikkaa Tallenna.

Minimal

Minimal-teeman toimintavaiheet

Muokkaa theme.liquid

1. Siirry Shopify Adminissa kohtaan Verkkokauppa > Teemat.
2. Etsi teema, jota haluat muokata, ja napsauta sitten ...-painiketta > Muokkaa koodia.
3. Avaa Layout-hakemistossa theme.liquid.
4. Etsi tämän elementin lopputunniste </head>. Liitä seuraava koodi uudelle riville lopputunnisteen </head> yläpuolelle:

<script>
  var variantStock = {};
</script>

1. Klikkaa Tallenna.

Muokkaa tiedostoa product-template.liquid tai tiedostoa featured-product.liquid

1. Avaa Sections-hakemistossa product-template.liquid tai featured-product.liquid:

   • Avaa product-template.liquid, jos haluat lisätä tämän ominaisuuden tuotesivuille.
   • Avaa featured-product.liquid, jos haluat lisätä tämän ominaisuuden etusivun Esittelyssä olevat tuotteet ‑osioon.

2. Etsi {% form 'product'. Lisää tämän tunnisteen yläpuolelle seuraava koodi:

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

Yläpuolella oleva koodi tuottaa tuloksen Stock: x. Voit muuttaa sanamuotoa säätämällä kohdan <p> sisältöä. Muista sisällyttää {{current_variant.inventory_quantity }} <p>-tunnisteisiisi.

1. Lisää tiedoston loppuun seuraava koodi:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. Klikkaa Tallenna.

Muokkaa tiedostoa theme.js.liquid tai tiedostoa theme.js

1. Avaa theme.js.liquid tai theme.js.
2. Etsi theme.Product = (function(). Lisää seuraava koodi kohdan this.selectors = { alapuolelle:

inventoryHtml: '.inventoryWrapper',

1. Etsi samasta tiedostosta if (variant.available) {. Lisää seuraava koodi ennen lauseketta } else {:

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('');
}

Yläpuolella oleva koodi tuottaa tuloksen Stock: x. Voit muuttaa sanamuotoa säätämällä kohdan <p> sisältöä. Muista sisällyttää ${variantStock[variant.id]} <p>-tunnisteisiisi.

1. Klikkaa Tallenna.

Boundless

Boundless-teeman toimintavaiheet

Muokkaa theme.liquid

1. Siirry Shopify Adminissa kohtaan Verkkokauppa > Teemat.
2. Etsi teema, jota haluat muokata, ja napsauta sitten ...-painiketta > Muokkaa koodia.
3. Avaa Layout-hakemistossa theme.liquid.
4. Etsi tämän elementin lopputunniste </head>. Liitä seuraava koodi uudelle riville lopputunnisteen </head> yläpuolelle:

<script>
  var variantStock = {};
    </script>

1. Klikkaa Tallenna.

Muokkaa tiedostoa product-template.liquid tai tiedostoa featured-product.liquid

1. Avaa Sections-hakemistossa product-template.liquid tai featured-product.liquid:

   • Avaa product-template.liquid, jos haluat lisätä tämän ominaisuuden tuotesivuille.
   • Avaa featured-product.liquid, jos haluat lisätä tämän ominaisuuden etusivun Esittelyssä olevat tuotteet ‑osioon.

2. Etsi {% form 'product'. Lisää tämän tunnisteen yläpuolelle seuraava koodi:

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

Yläpuolella oleva koodi tuottaa tuloksen Stock: x. Voit muuttaa sanamuotoa säätämällä kohdan <p> sisältöä. Muista sisällyttää {{current_variant.inventory_quantity }} <p>-tunnisteisiisi.

1. Lisää tiedoston loppuun seuraava koodi:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. Klikkaa Tallenna.

Muokkaa tiedostoa theme.js.liquid tai tiedostoa theme.js

1. Open ‘theme.js.liquid’ *tai *‘theme.js’.
2. Etsi theme.Product = (function(). Lisää seuraava koodi kohdan var selectors = { alapuolelle:

inventoryHtml: '.inventoryWrapper',

1. Etsi samasta tiedostosta $(selectors.SKU, this.$container).html(variant.sku);. Lisää seuraava koodi suoraan sen alle:

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
      const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $('.inventoryWrapper').html(inventoryHtml);
} else {
    $('.inventoryWrapper').html("");
}

Yläpuolella oleva koodi tuottaa tuloksen Stock: x. Voit muuttaa sanamuotoa säätämällä kohdan <p> sisältöä. Muista sisällyttää ${variantStock[variant.id]} <p>-tunnisteisiisi.

1. Klikkaa Tallenna.

Narrative

Narrative-teeman toimintavaiheet

Muokkaa theme.liquid

1. Siirry Shopify Adminissa kohtaan Verkkokauppa > Teemat.
2. Etsi teema, jota haluat muokata, ja napsauta sitten ...-painiketta > Muokkaa koodia.
3. Avaa Layout-hakemistossa theme.liquid.
4. Etsi tämän elementin lopputunniste </head>. Liitä seuraava koodi uudelle riville lopputunnisteen </head> yläpuolelle:

<script>
      var variantStock = {};
    </script>

1. Klikkaa Tallenna.

Muokkaa tiedostoa product-template.liquid tai tiedostoa featured-product.liquid

1. Avaa Sections-hakemistossa product-template.liquid tai featured-product.liquid:

   • Avaa product-template.liquid, jos haluat lisätä tämän ominaisuuden tuotesivuille.
   • Avaa featured-product.liquid, jos haluat lisätä tämän ominaisuuden etusivun Esittelyssä olevat tuotteet ‑osioon.

2. Etsi {% include 'product-form' %}. Lisää tämän tunnisteen yläpuolelle seuraava koodi:

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

Yläpuolella oleva koodi tuottaa tuloksen Stock: x. Voit muuttaa sanamuotoa säätämällä kohdan <p> sisältöä. Muista sisällyttää {{current_variant.inventory_quantity }} <p>-tunnisteisiisi.

1. Lisää tiedoston loppuun seuraava koodi:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. Klikkaa Tallenna.

Muokkaa custom.js

1. Avaa custom.js.
2. Lisää tiedoston loppuun seuraava koodi:

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);

Yläpuolella oleva koodi tuottaa tuloksen Stock: x. Voit muuttaa sanamuotoa säätämällä kohdan <p> sisältöä. Muista sisällyttää ${variantStock[variant.id]} <p>-tunnisteisiisi.

1. Klikkaa Tallenna.