Exibir o estoque restante de uma variante nas páginas de produto

Aviso

Os temas vintage não estão disponíveis na Loja de temas. Esses temas não têm os recursos incluídos nos temas da Online Store 2.0 da Shopify, e os temas vintage gratuitos só recebem atualizações para correções de segurança.

Observação

Se você usa um tema gratuito da Shopify, entre em contato com o Atendimento ao cliente da Shopify para solicitar ajuda com o tutorial, que requer 15 minutos para o design. Para saber mais, consulte o Atendimento para temas.

Observação

Esta personalização se aplica a temas vintage da Shopify, e não aos temas da Online Store 2.0.

• Descubra a versão da arquitetura do tema da loja
• Conheça as personalizações para temas da Online Store 2.0.

É possível adicionar uma mensagem na página do produto ou na seção de produtos em destaque que mostra o número de itens disponíveis quando o estoque de uma variante estiver baixo. Para essa mensagem ser exibida, habilite o acompanhamento de estoque do produto.

As etapas da personalização variam, dependendo do tema. Clique no botão de seu tema e siga as instruções.

Dica

Os temas Supply e Venture da Shopify já incluem uma configuração Exibir mensagem de quantidade restante, que pode ser habilitada no editor de temas.

Debut

Etapas para o Debut

Editar theme.liquid

1. No seu admin da Shopify, vá para loja virtual > temas.
2. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.
3. No diretório Layout, abra theme.liquid.
4. Encontre a tag de fechamento </head> no código. Em uma nova linha acima da tag de fechamento </head>, cole o seguinte código:

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

1. Clique em Salvar.

Edite product-template.liquid ou featured-product.liquid

1. No diretório Seções, abra product-template.liquid ou featured-product.liquid:

   • Abra product-template.liquid para adicionar o recurso às páginas de produto.
   • Abra featured-product.liquid para adicionar o recurso à seção de produtos em destaque na página inicial.

2. Encontre {% form 'product'. Acima dessa tag, adicione o seguinte código:

<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. Na parte inferior do arquivo, cole o seguinte código:

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

1. Clique em Salvar.

Edite theme.js.liquid ou theme.js

As alterações necessárias nesses arquivos dependem da versão do Debut que você está usando.

Versões 17.8.0 e anteriores

1. Abra theme.js.liquid ou theme.js.
2. Encontre theme.Product = (function(). Abaixo de this.selectors = {, adicione o seguinte código:

inventoryHtml: '.inventoryWrapper',

1. No mesmo arquivo, encontre _updateAddToCart: function(evt) {. Imediatamente abaixo, adicione o seguinte código:

var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);

1. Encontre if (variant.available) {. Antes da instrução } else {, adicione o seguinte código:

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. Clique em Salvar.

Versões 17.9.0 e posteriores

1. Abra theme.js.liquid ou theme.js.
2. Encontre theme.Product = (function(). Abaixo de this.selectors = {, adicione o seguinte código:

inventoryHtml: '.inventoryWrapper',

1. No mesmo arquivo, encontre _setProductState: function(evt) {. Imediatamente abaixo, adicione o seguinte código:

var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);

1. Na mesma função, encontre if (!variant) {. Após o colchete de fechamento }, adicione o seguinte código:

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

O código acima gera Stock: x. É possível alterar o texto ajustando o conteúdo nas tags <p>. Inclua ${variantStock[variant.id]} nas tags <p>.

1. Clique em Salvar.

Brooklyn / Simple / Minimal

Etapas para Brooklyn, Simple e Minimal

Editar theme.liquid

1. No seu admin da Shopify, vá para loja virtual > temas.
2. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.
3. No diretório Layout, abra theme.liquid.
4. Encontre a tag de fechamento </head> no código. Em uma nova linha acima da tag de fechamento </head>, cole o seguinte código:

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

1. Clique em Salvar.

Edite product-template.liquid ou featured-product.liquid

1. No diretório Seções, abra product-template.liquid ou featured-product.liquid:

2. Encontre {% form 'product'. Acima dessa tag, adicione o seguinte código:

    <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. Na parte inferior do arquivo, cole o seguinte código:

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

1. Clique em Salvar.

Edite theme.js.liquid ou theme.js

1. Abra theme.js.liquid ou theme.js.
2. Encontre theme.Product = (function(). Abaixo de this.selectors = {, adicione o seguinte código:

inventoryHtml: '.inventoryWrapper',

1. No mesmo arquivo, encontre if (variant.available) {. Antes da instrução } else {, adicione o seguinte código:

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. Clique em Salvar.

Boundless

Etapas para Boundless

Editar theme.liquid

1. No seu admin da Shopify, vá para loja virtual > temas.
2. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.
3. No diretório Layout, abra theme.liquid.
4. Encontre a tag de fechamento </head> no código. Em uma nova linha acima da tag de fechamento </head>, cole o seguinte código:

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

1. Clique em Salvar.

Edite product-template.liquid ou featured-product.liquid

1. No diretório Seções, abra product-template.liquid ou featured-product.liquid:

2. Encontre {% form 'product'. Acima dessa tag, adicione o seguinte código:

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

O código acima gera Stock: x. É possível alterar o texto ajustando o conteúdo nas tags <p>. Inclua {{current_variant.inventory_quantity }} nas tags <p>.

1. Na parte inferior do arquivo, cole o seguinte código:

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

1. Clique em Salvar.

Edite theme.js.liquid ou theme.js

1. Abra ‘theme.js.liquid’ *ou *‘theme.js’.
2. Encontre theme.Product = (function(). Abaixo de var selectors = {, adicione o seguinte código:

inventoryHtml: '.inventoryWrapper',

1. No mesmo arquivo, encontre $(selectors.SKU, this.$container).html(variant.sku);. Imediatamente abaixo, adicione o seguinte código:

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
      const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $('.inventoryWrapper').html(inventoryHtml);
} else {
    $('.inventoryWrapper').html("");
}

O código acima gera Stock: x. É possível alterar o texto ajustando o conteúdo nas tags <p>. Inclua ${variantStock[variant.id]} nas tags <p>.

1. Clique em Salvar.

Narrative

Etapas para o Narrative

Editar theme.liquid

1. No seu admin da Shopify, vá para loja virtual > temas.
2. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.
3. No diretório Layout, abra theme.liquid.
4. Encontre a tag de fechamento </head> no código. Em uma nova linha acima da tag de fechamento </head>, cole o seguinte código:

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

1. Clique em Salvar.

Edite product-template.liquid ou featured-product.liquid

1. No diretório Seções, abra product-template.liquid ou featured-product.liquid:

2. Encontre {% include 'product-form' %}. Acima dessa tag, adicione o seguinte código:

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

O código acima gera Stock: x. É possível alterar o texto ajustando o conteúdo nas tags <p>. Inclua {{current_variant.inventory_quantity }} nas tags <p>.

1. Na parte inferior do arquivo, cole o seguinte código:

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

1. Clique em Salvar.

Editar custom.js

1. Abra custom.js.
2. Na parte inferior do arquivo, cole o seguinte código:

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. Clique em Salvar.