Pokaż pozostałe zapasy wariantu na stronach produktów

Ta strona została wydrukowana dnia Apr 24, 2024. Aby zapoznać się z aktualną wersją, odwiedź https://help.shopify.com/pl/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-remaining-quantity.

Na stronie produktu lub w sekcji polecanych produktów możesz dodać wiadomość informującą o liczbie pozycji w magazynie, gdy poziom zapasów w wariancie produktu będzie niski. Aby ta wiadomość została wyświetlona, musisz włączyć śledzenie zapasów dla produktu.

Kroki dla tego dostosowania różnią się w zależności od szablonu. Kliknij przycisk dla szablonu i postępuj według instrukcji.

Kroki dla szablonu Debut

Edytuj theme.liquid

  1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
  2. Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk ... > Edytuj kod.
  3. W katalogu Układ otwórz theme.liquid.
  4. Znajdź tag zamykający </head> w kodzie. W nowej linii nad tagiem zamykającym </head> wklej następujący kod: 
<script>
  var variantStock = {};
</script>
  1. Kliknij opcję Zapisz.

  1. W katalogu Sekcje otwórz product-template.liquid lub featured-product.liquid:

    • Otwórz product-template.liquid, aby dodać tę funkcję do stron produktów.
    • Otwórz featured-product.liquid, aby dodać tę funkcję do sekcji polecanych produktów na stronie głównej.

  2. Znajdź {% form 'product'. Nad tym tagiem dodaj następujący kod:

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

Dane wyjściowe powyższego kodu to: Stock: x. Możesz zmienić tekst, dostosowując zawartość w tagach <p>. Pamiętaj, aby uwzględnić {{ current_variant.inventory_quantity }} w tagach <p>.

  1. Na dole pliku dodaj następujący kod: 
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. Kliknij opcję Zapisz.

Edytuj theme.js.liquid lub theme.js

Zmiany, które musisz wprowadzić w tych plikach, zależą od używanej wersji szablonu Debut.

Wersje 17.8.0 i wcześniejsze

  1. Otwórz theme.js.liquid lub theme.js.
  2. Znajdź theme.Product = (function(). Pod this.selectors = { dodaj następujący kod: 
inventoryHtml: '.inventoryWrapper',
  1. W tym samym pliku znajdź _updateAddToCart: function(evt) {. Bezpośrednio poniżej dodaj następujący kod: 
var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);
  1. Znajdź if (variant.available) {. Przed instrukcją } else { dodaj następujący kod: 
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 = '';
}

Dane wyjściowe powyższego kodu to: Stock: x. Możesz zmienić tekst, dostosowując zawartość w tagach <p>. Pamiętaj, aby uwzględnić ${variantStock[variant.id]} w tagach <p>.

  1. Kliknij opcję Zapisz.

Wersje 17.9.0 i nowsze

  1. Otwórz theme.js.liquid lub theme.js.
  2. Znajdź theme.Product = (function(). Pod this.selectors = { dodaj następujący kod: 
inventoryHtml: '.inventoryWrapper',
  1. W tym samym pliku znajdź _setProductState: function(evt) {. Bezpośrednio poniżej dodaj następujący kod: 
var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);
  1. W tej samej funkcji znajdź if (!variant) {. Po zamykającym nawiasie } dodaj następujący kod: 
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 = '';
  }
}

Dane wyjściowe powyższego kodu to: Stock: x. Możesz zmienić tekst, dostosowując zawartość w tagach <p>. Pamiętaj, aby uwzględnić ${variantStock[variant.id]} w tagach <p>.

  1. Kliknij opcję Zapisz.

Kroki dla szablonu Brooklyn

Edytuj theme.liquid

  1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
  2. Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk ... > Edytuj kod.
  3. W katalogu Układ otwórz theme.liquid.
  4. Znajdź tag zamykający </head> w kodzie. W nowej linii nad tagiem zamykającym </head> wklej następujący kod: 
<script>
  var variantStock = {};
</script>
  1. Kliknij opcję Zapisz.

  1. W katalogu Sekcje otwórz product-template.liquid lub featured-product.liquid:

    • Otwórz product-template.liquid, aby dodać tę funkcję do stron produktów.
    • Otwórz featured-product.liquid, aby dodać tę funkcję do sekcji polecanych produktów na stronie głównej.

  2. Znajdź {% form 'product'. Nad tym tagiem dodaj następujący kod:

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

Dane wyjściowe powyższego kodu to: Stock: x. Możesz zmienić tekst, dostosowując zawartość w tagach <p>. Pamiętaj, aby uwzględnić {{current_variant.inventory_quantity }} w tagach <p>.

  1. Na dole pliku dodaj następujący kod: 
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. Kliknij opcję Zapisz.

Edytuj theme.js.liquid lub theme.js

  1. Otwórz theme.js.liquid lub theme.js.
  2. Znajdź theme.Product = (function(). Pod this.selectors = { dodaj następujący kod: 
inventoryHtml: '.inventoryWrapper',
  1. W tym samym pliku znajdź if (variant.available) {. Przed instrukcją } else { dodaj następujący kod: 
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('');
}

Dane wyjściowe powyższego kodu to: Stock: x. Możesz zmienić tekst, dostosowując zawartość w tagach <p>. Pamiętaj, aby uwzględnić ${variantStock[variant.id]} w tagach <p>.

  1. Kliknij opcję Zapisz.

Kroki dla szablonu Simple

Edytuj theme.liquid

  1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
  2. Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk ... > Edytuj kod.
  3. W katalogu Układ otwórz theme.liquid.
  4. Znajdź tag zamykający </head> w kodzie. W nowej linii nad tagiem zamykającym </head> wklej następujący kod: 
<script>
  var variantStock = {};
</script>
  1. Kliknij opcję Zapisz.

  1. W katalogu Sekcje otwórz product-template.liquid lub featured-product.liquid:

    • Otwórz product-template.liquid, aby dodać tę funkcję do stron produktów.
    • Otwórz featured-product.liquid, aby dodać tę funkcję do sekcji polecanych produktów na stronie głównej.

  2. Znajdź {% form 'product'. Nad tym tagiem dodaj następujący kod:

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

Dane wyjściowe powyższego kodu to: Stock: x. Możesz zmienić tekst, dostosowując zawartość w tagach <p>. Pamiętaj, aby uwzględnić {{current_variant.inventory_quantity }} w tagach <p>.

  1. Na dole pliku dodaj następujący kod: 
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. Kliknij opcję Zapisz.

Edytuj theme.js.liquid lub theme.js

  1. Otwórz theme.js.liquid lub theme.js.
  2. Znajdź theme.Product = (function(). Pod this.selectors = { dodaj następujący kod: 
inventoryHtml: '.inventoryWrapper',
  1. W tym samym pliku znajdź if (variant.available) {. Przed instrukcją } else { dodaj następujący kod: 
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('');
}

Dane wyjściowe powyższego kodu to: Stock: x. Możesz zmienić tekst, dostosowując zawartość w tagach <p>. Pamiętaj, aby uwzględnić ${variantStock[variant.id]} w tagach <p>.

  1. Kliknij opcję Zapisz.

Kroki dla szablonu Minimal

Edytuj theme.liquid

  1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
  2. Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk ... > Edytuj kod.
  3. W katalogu Układ otwórz theme.liquid.
  4. Znajdź tag zamykający </head> w kodzie. W nowej linii nad tagiem zamykającym </head> wklej następujący kod: 
<script>
  var variantStock = {};
</script>
  1. Kliknij opcję Zapisz.

  1. W katalogu Sekcje otwórz product-template.liquid lub featured-product.liquid:

    • Otwórz product-template.liquid, aby dodać tę funkcję do stron produktów.
    • Otwórz featured-product.liquid, aby dodać tę funkcję do sekcji polecanych produktów na stronie głównej.

  2. Znajdź {% form 'product'. Nad tym tagiem dodaj następujący kod:

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

Dane wyjściowe powyższego kodu to: Stock: x. Możesz zmienić tekst, dostosowując zawartość w tagach <p>. Pamiętaj, aby uwzględnić {{current_variant.inventory_quantity }} w tagach <p>.

  1. Na dole pliku dodaj następujący kod: 
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. Kliknij opcję Zapisz.

Edytuj theme.js.liquid lub theme.js

  1. Otwórz theme.js.liquid lub theme.js.
  2. Znajdź theme.Product = (function(). Pod this.selectors = { dodaj następujący kod: 
inventoryHtml: '.inventoryWrapper',
  1. W tym samym pliku znajdź if (variant.available) {. Przed instrukcją } else { dodaj następujący kod: 
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('');
}

Dane wyjściowe powyższego kodu to: Stock: x. Możesz zmienić tekst, dostosowując zawartość w tagach <p>. Pamiętaj, aby uwzględnić ${variantStock[variant.id]} w tagach <p>.

  1. Kliknij opcję Zapisz.

Kroki dla szablonu Boundless

Edytuj theme.liquid

  1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
  2. Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk ... > Edytuj kod.
  3. W katalogu Układ otwórz theme.liquid.
  4. Znajdź tag zamykający </head> w kodzie. W nowej linii nad tagiem zamykającym </head> wklej następujący kod: 
<script>
  var variantStock = {};
    </script>
  1. Kliknij opcję Zapisz.

  1. W katalogu Sekcje otwórz product-template.liquid lub featured-product.liquid:

    • Otwórz product-template.liquid, aby dodać tę funkcję do stron produktów.
    • Otwórz featured-product.liquid, aby dodać tę funkcję do sekcji polecanych produktów na stronie głównej.

  2. Znajdź {% form 'product'. Nad tym tagiem dodaj następujący kod:

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

Dane wyjściowe powyższego kodu to: Stock: x. Możesz zmienić tekst, dostosowując zawartość w tagach <p>. Pamiętaj, aby uwzględnić {{current_variant.inventory_quantity }} w tagach <p>.

  1. Na dole pliku dodaj następujący kod: 
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. Kliknij opcję Zapisz.

Edytuj theme.js.liquid lub theme.js

  1. Otwórz 'theme.js.liquid' *lub *'theme.js'.
  2. Znajdź theme.Product = (function(). Pod var selectors = { dodaj następujący kod: 
inventoryHtml: '.inventoryWrapper',
  1. W tym samym pliku znajdź $(selectors.SKU, this.$container).html(variant.sku);. Bezpośrednio poniżej dodaj następujący kod: 
if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
      const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $('.inventoryWrapper').html(inventoryHtml);
} else {
    $('.inventoryWrapper').html("");
}

Dane wyjściowe powyższego kodu to: Stock: x. Możesz zmienić tekst, dostosowując zawartość w tagach <p>. Pamiętaj, aby uwzględnić ${variantStock[variant.id]} w tagach <p>.

  1. Kliknij opcję Zapisz.

Kroki dla szablonu Narrative

Edytuj theme.liquid

  1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
  2. Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk ... > Edytuj kod.
  3. W katalogu Układ otwórz theme.liquid.
  4. Znajdź tag zamykający </head> w kodzie. W nowej linii nad tagiem zamykającym </head> wklej następujący kod: 
<script>
      var variantStock = {};
    </script>
  1. Kliknij opcję Zapisz.

  1. W katalogu Sekcje otwórz product-template.liquid lub featured-product.liquid:

    • Otwórz product-template.liquid, aby dodać tę funkcję do stron produktów.
    • Otwórz featured-product.liquid, aby dodać tę funkcję do sekcji polecanych produktów na stronie głównej.

  2. Znajdź {% include 'product-form' %}. Nad tym tagiem dodaj następujący kod:

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

Dane wyjściowe powyższego kodu to: Stock: x. Możesz zmienić tekst, dostosowując zawartość w tagach <p>. Pamiętaj, aby uwzględnić {{current_variant.inventory_quantity }} w tagach <p>.

  1. Na dole pliku dodaj następujący kod: 
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. Kliknij opcję Zapisz.

Edytuj custom.js

  1. Otwórz custom.js.
  2. Na dole pliku dodaj następujący kod: 
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);

Dane wyjściowe powyższego kodu to: Stock: x. Możesz zmienić tekst, dostosowując zawartość w tagach <p>. Pamiętaj, aby uwzględnić ${variantStock[variant.id]} w tagach <p>.

  1. Kliknij opcję Zapisz.

Gotowy(-a) do rozpoczęcia sprzedaży za pomocą Shopify?

Wypróbuj za darmo