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

Na stronie produktu lub w sekcji polecanych produktów możesz dodać wiadomość informującą o liczbie pozycji w magazynie, gdy poziom zapasów wariantu produktu będzie niski. Aby ta wiadomość została wyświetlona, musisz aktywować ś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`

W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk ... > Edytuj kod.
W katalogu Układ otwórz theme.liquid.
Znajdź tag zamykający </head> w kodzie. W nowej linii nad tagiem zamykającym </head> wklej następujący kod:

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

Kliknij opcję Zapisz.

Edytuj `product-template.liquid` lub `featured-product.liquid`

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.
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 . Pamiętaj, aby uwzględnić {{ current_variant.inventory_quantity }} w tagach .

Na dole pliku dodaj następujący kod:

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

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

Otwórz theme.js.liquid lub theme.js.
Znajdź theme.Product = (function(). Pod this.selectors = { dodaj następujący kod:

inventoryHtml: '.inventoryWrapper',

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

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 . Pamiętaj, aby uwzględnić ${variantStock[variant.id]} w tagach .

Kliknij opcję Zapisz.

Wersje 17.9.0 i nowsze

Otwórz theme.js.liquid lub theme.js.
Znajdź theme.Product = (function(). Pod this.selectors = { dodaj następujący kod:

inventoryHtml: '.inventoryWrapper',

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

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 . Pamiętaj, aby uwzględnić ${variantStock[variant.id]} w tagach .

Kliknij opcję Zapisz.

Kroki dla szablonu Brooklyn

Edytuj `theme.liquid`

W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk ... > Edytuj kod.
W katalogu Układ otwórz theme.liquid.
Znajdź tag zamykający </head> w kodzie. W nowej linii nad tagiem zamykającym </head> wklej następujący kod:

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

Kliknij opcję Zapisz.

Edytuj `product-template.liquid` lub `featured-product.liquid`

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.
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 . Pamiętaj, aby uwzględnić {{current_variant.inventory_quantity }} w tagach .

Na dole pliku dodaj następujący kod:

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

Kliknij opcję Zapisz.

Edytuj `theme.js.liquid` lub `theme.js`

Otwórz theme.js.liquid lub theme.js.
Znajdź theme.Product = (function(). Pod this.selectors = { dodaj następujący kod:

inventoryHtml: '.inventoryWrapper',

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 . Pamiętaj, aby uwzględnić ${variantStock[variant.id]} w tagach .

Kliknij opcję Zapisz.

Kroki dla szablonu Simple

Edytuj `theme.liquid`

W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk ... > Edytuj kod.
W katalogu Układ otwórz theme.liquid.
Znajdź tag zamykający </head> w kodzie. W nowej linii nad tagiem zamykającym </head> wklej następujący kod:

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

Kliknij opcję Zapisz.

Edytuj `product-template.liquid` lub `featured-product.liquid`

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.
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 . Pamiętaj, aby uwzględnić {{current_variant.inventory_quantity }} w tagach .

Na dole pliku dodaj następujący kod:

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

Kliknij opcję Zapisz.

Edytuj `theme.js.liquid` lub `theme.js`

Otwórz theme.js.liquid lub theme.js.
Znajdź theme.Product = (function(). Pod this.selectors = { dodaj następujący kod:

inventoryHtml: '.inventoryWrapper',

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 . Pamiętaj, aby uwzględnić ${variantStock[variant.id]} w tagach .

Kliknij opcję Zapisz.

Kroki dla szablonu Minimal

Edytuj `theme.liquid`

W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk ... > Edytuj kod.
W katalogu Układ otwórz theme.liquid.
Znajdź tag zamykający </head> w kodzie. W nowej linii nad tagiem zamykającym </head> wklej następujący kod:

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

Kliknij opcję Zapisz.

Edytuj `product-template.liquid` lub `featured-product.liquid`

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.
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 . Pamiętaj, aby uwzględnić {{current_variant.inventory_quantity }} w tagach .

Na dole pliku dodaj następujący kod:

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

Kliknij opcję Zapisz.

Edytuj `theme.js.liquid` lub `theme.js`

Otwórz theme.js.liquid lub theme.js.
Znajdź theme.Product = (function(). Pod this.selectors = { dodaj następujący kod:

inventoryHtml: '.inventoryWrapper',

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 . Pamiętaj, aby uwzględnić ${variantStock[variant.id]} w tagach .

Kliknij opcję Zapisz.

Kroki dla szablonu Boundless

Edytuj `theme.liquid`

W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk ... > Edytuj kod.
W katalogu Układ otwórz theme.liquid.
Znajdź tag zamykający </head> w kodzie. W nowej linii nad tagiem zamykającym </head> wklej następujący kod:

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

Kliknij opcję Zapisz.

Edytuj `product-template.liquid` lub `featured-product.liquid`

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.
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 . Pamiętaj, aby uwzględnić {{current_variant.inventory_quantity }} w tagach .

Na dole pliku dodaj następujący kod:

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

Kliknij opcję Zapisz.

Edytuj `theme.js.liquid` lub `theme.js`

Otwórz 'theme.js.liquid' *lub *'theme.js'.
Znajdź theme.Product = (function(). Pod var selectors = { dodaj następujący kod:

inventoryHtml: '.inventoryWrapper',

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 . Pamiętaj, aby uwzględnić ${variantStock[variant.id]} w tagach .

Kliknij opcję Zapisz.

Kroki dla szablonu Narrative

Edytuj `theme.liquid`

W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk ... > Edytuj kod.
W katalogu Układ otwórz theme.liquid.
Znajdź tag zamykający </head> w kodzie. W nowej linii nad tagiem zamykającym </head> wklej następujący kod:

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

Kliknij opcję Zapisz.

Edytuj `product-template.liquid` lub `featured-product.liquid`

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.
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 . Pamiętaj, aby uwzględnić {{current_variant.inventory_quantity }} w tagach .

Na dole pliku dodaj następujący kod:

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

Kliknij opcję Zapisz.

Edytuj `custom.js`

Otwórz custom.js.
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 . Pamiętaj, aby uwzględnić ${variantStock[variant.id]} w tagach .

Kliknij opcję Zapisz.

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

Kroki dla szablonu Debut

Edytuj theme.liquid

Edytuj product-template.liquid lub featured-product.liquid

Edytuj theme.js.liquid lub theme.js

Wersje 17.8.0 i wcześniejsze

Wersje 17.9.0 i nowsze

Kroki dla szablonu Brooklyn

Edytuj theme.liquid

Edytuj product-template.liquid lub featured-product.liquid

Edytuj theme.js.liquid lub theme.js

Kroki dla szablonu Simple

Edytuj theme.liquid

Edytuj product-template.liquid lub featured-product.liquid

Edytuj theme.js.liquid lub theme.js

Kroki dla szablonu Minimal

Edytuj theme.liquid

Edytuj product-template.liquid lub featured-product.liquid

Edytuj theme.js.liquid lub theme.js

Kroki dla szablonu Boundless

Edytuj theme.liquid

Edytuj product-template.liquid lub featured-product.liquid

Edytuj theme.js.liquid lub theme.js

Kroki dla szablonu Narrative

Edytuj theme.liquid

Edytuj product-template.liquid lub featured-product.liquid

Edytuj custom.js

Edytuj `theme.liquid`

Edytuj `product-template.liquid` lub `featured-product.liquid`

Edytuj `theme.js.liquid` lub `theme.js`

Edytuj `theme.liquid`

Edytuj `product-template.liquid` lub `featured-product.liquid`

Edytuj `theme.js.liquid` lub `theme.js`

Edytuj `theme.liquid`

Edytuj `product-template.liquid` lub `featured-product.liquid`

Edytuj `theme.js.liquid` lub `theme.js`

Edytuj `theme.liquid`

Edytuj `product-template.liquid` lub `featured-product.liquid`

Edytuj `theme.js.liquid` lub `theme.js`

Edytuj `theme.liquid`

Edytuj `product-template.liquid` lub `featured-product.liquid`

Edytuj `theme.js.liquid` lub `theme.js`

Edytuj `theme.liquid`

Edytuj `product-template.liquid` lub `featured-product.liquid`

Edytuj `custom.js`