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

Tämä sivu on tulostettu Jul 27, 2024. Nykyinen versio on osoitteessa https://help.shopify.com/fi/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-remaining-quantity.

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.

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.

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

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

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

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

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

  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.

Valmiina aloittamaan Shopifyssa?

Kokeile ilmaiseksi