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

Huomio

Vanhoja teemoja ei ole saatavilla Theme Storessa.Näissä teemoissa ei ole Shopifyn Online Store 2.0 -teemoihin sisältyviä ominaisuuksia, eikä niihin tehdä muita päivityksiä kuin turvallisuuskorjauksia.

Huomaa

Jos käytät Shopifyn ilmaista teemaa, voit ottaa yhteyttä Shopify-tukeen tutoriaaliin liittyvissä asioissa. Tähän tarvitaan 15 minuuttia suunnitteluaikaa. Lisätietoja on kohdassa Teemojen tuki.

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ä olevaan tuoteosioon 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 ottaa tämän asetuksen käyttöön teemaeditorista.

Debut

Debut-teeman toimintavaiheet

Muokkaa theme.liquid

1. Siirry Shopify Adminissa kohtaan Verkkokauppa > Teemat.
2. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > 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>

The code above outputs `Stock: x`. You can change the wording by adjusting the content in the `<p>` tags. Make sure to include `{{ current_variant.inventory_quantity }}` in your `<p>` tags.

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

The code above outputs `Stock: x`. You can change the wording by adjusting the content in the `<p>` tags. Make sure to include `${variantStock[variant.id]}` in your `<p>` tags.

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 / Simple / Minimal

Brooklyn-, Simple- ja Minimal-teemojen ohjeet

Muokkaa theme.liquid

1. Siirry Shopify Adminissa kohtaan Verkkokauppa > Teemat.
2. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > 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:

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>

The code above outputs `Stock: x`. You can change the wording by adjusting the content in the `<p>` tags. Make sure to include `{{current_variant.inventory_quantity }}` in your `<p>` tags.

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

The code above outputs `Stock: x`. You can change the wording by adjusting the content in the `<p>` tags. Make sure to include `${variantStock[variant.id]}` in your `<p>` tags.

1. Klikkaa Tallenna.

Boundless

Boundless-teeman toimintavaiheet

Muokkaa theme.liquid

1. Siirry Shopify Adminissa kohtaan Verkkokauppa > Teemat.
2. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > 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:

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 valitse sitten Toiminnot > 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:

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

The code above outputs `Stock: x`. You can change the wording by adjusting the content in the `<p>` tags. Make sure to include `${variantStock[variant.id]}` in your `<p>` tags.

1. Klikkaa Tallenna.