Kirjaudu sisään
Aloita ilmainen kokeilu

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

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.

Toimintavaiheet tähän mukautukseen riippuvat teemastasi. Klikkaa teeman painiketta ja noudata ohjeita.

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.
Etkö löydä hakemaasi vastausta? Autamme mielellämme.