Mostrar el inventario restante de una variante en las páginas de producto

Precaución

Los temas vintage no están disponibles en la Theme Store. Estos temas no tienen las funciones incluidas en los temas de la Online Store 2.0 de Shopify, y los temas vintage gratuitos de Shopify no reciben actualizaciones aparte de las correcciones de seguridad.

Nota

Si usas un tema gratis de Shopify, puedes comunicarte con atención al cliente de Shopify para recibir ayuda con este tutorial. Requiere 15 minutos de tiempo de diseño. Obtén más información sobre la política de diseño de Shopify.

Nota

Esta personalización es para temas vintage de Shopify, y no se aplica a temas de Online Store 2.0.

• Conocer la versión de la arquitectura del tema
• Explorar las personalizaciones de temas de Online Store 2.0

Puedes agregar un mensaje en la página de producto o en la sección de productos destacados que muestre la cantidad de artículos que tienes en existencia cuando el inventario se agota en una variante de producto. Para que se muestre este mensaje, debes activar el seguimiento de inventario del producto.

Los pasos de esta personalización varían según tu tema. Haz clic en el botón de tu tema y sigue las instrucciones.

Consejo

Los temas Supply y Venture de Shopify ya incluyen la opción Mostrar mensaje de cantidad restante. Puedes activar esta configuración desde el editor de temas.

Debut

Pasos para Debut

Editar theme.liquid

1. Desde tu panel de control de Shopify, ve a Tienda online > Temas.
2. Busca el tema que deseas editar y, a continuación, haz clic en el botón ... > Editar código.
3. Desde el directorio Diseño, abre theme.liquid.
4. Busca la etiqueta de cierre </head> en el código. En una nueva línea encima de la etiqueta de cierre </head>, pega el siguiente código:

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

1. Haz clic en Guardar.

Editar product-template.liquid o featured-product.liquid

1. Desde el directorio Secciones abre product-template.liquid o featured-product.liquid:

   • Abre product-template.liquid para agregar esta función a las páginas de productos.
   • Abre featured-product.liquid para agregar esta función a la sección de productos destacados en la página de inicio.

2. Busca {% form 'product'. Arriba de esta etiqueta, agrega el siguiente 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>

El código anterior muestra Stock: x. Puedes cambiar la redacción ajustando el contenido en las etiquetas <p>. Asegúrate de incluir {{ current_variant.inventory_quantity }} en tus etiquetas <p>.

1. En la parte inferior del archivo, pega el siguiente código:

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

1. Haz clic en Guardar.

Editar theme.js.liquid o theme.js

Los cambios que debes realizar en estos archivos varían según la versión de Debut que estés usando.

Versiones 17.8.0 o anteriores

1. Abre theme.js.liquid o theme.js.
2. Busca theme.Product = (function(). Debajo de this.selectors = {, agrega el siguiente código:

inventoryHtml: '.inventoryWrapper',

1. En el mismo archivo, busca _updateAddToCart: function(evt) {. Directamente debajo, agrega el siguiente código:

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

1. Busca if (variant.available) {. Antes de la instrucción } else {, agrega el siguiente 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 = '';
}

El código anterior muestra Stock: x. Puedes cambiar la redacción ajustando el contenido en las etiquetas <p>. Asegúrate de incluir ${variantStock[variant.id]} en tus etiquetas <p>.

1. Haz clic en Guardar.

Versiones 17.9.0 o posteriores

1. Abre theme.js.liquid o theme.js.
2. Busca theme.Product = (function(). Debajo de this.selectors = {, agrega el siguiente código:

inventoryHtml: '.inventoryWrapper',

1. En el mismo archivo, busca _setProductState: function(evt) {. Directamente debajo, agrega el siguiente código:

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

1. En la misma función, busca if (!variant) {. Después del corchete de cierre }, agrega el siguiente 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 = '';
  }
}

El código anterior muestra Stock: x. Puedes cambiar la redacción ajustando el contenido en las etiquetas <p>. Asegúrate de incluir ${variantStock[variant.id]} en tus etiquetas <p>.

1. Haz clic en Guardar.

Brooklyn

Pasos para Brooklyn

Editar theme.liquid

1. Desde tu panel de control de Shopify, ve a Tienda online > Temas.
2. Busca el tema que deseas editar y, a continuación, haz clic en el botón ... > Editar código.
3. Desde el directorio Diseño, abre theme.liquid.
4. Busca la etiqueta de cierre </head> en el código. En una nueva línea encima de la etiqueta de cierre </head>, pega el siguiente código:

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

1. Haz clic en Guardar.

Editar product-template.liquid o featured-product.liquid

1. Desde el directorio Secciones abre product-template.liquid o featured-product.liquid:

   • Abre product-template.liquid para agregar esta función a las páginas de productos.
   • Abre featured-product.liquid para agregar esta función a la sección de productos destacados en la página de inicio.

2. Busca {% form 'product'. Arriba de esta etiqueta, agrega el siguiente 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>

El código anterior muestra Stock: x. Puedes cambiar la redacción ajustando el contenido en las etiquetas <p>. Asegúrate de incluir {{current_variant.inventory_quantity }} en tus etiquetas <p>.

1. En la parte inferior del archivo, pega el siguiente código:

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

1. Haz clic en Guardar.

Editar theme.js.liquid o theme.js

1. Abre theme.js.liquid o theme.js.
2. Busca theme.Product = (function(). Debajo de this.selectors = {, agrega el siguiente código:

inventoryHtml: '.inventoryWrapper',

1. En el mismo archivo, busca if (variant.available) {. Antes de la instrucción } else {, agrega el siguiente 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('');
}

El código anterior muestra Stock: x. Puedes cambiar la redacción ajustando el contenido en las etiquetas <p>. Asegúrate de incluir ${variantStock[variant.id]} en tus etiquetas <p>.

1. Haz clic en Guardar.

Simple

Pasos para Simple

Editar theme.liquid

1. Desde tu panel de control de Shopify, ve a Tienda online > Temas.
2. Busca el tema que deseas editar y, a continuación, haz clic en el botón ... > Editar código.
3. Desde el directorio Diseño, abre theme.liquid.
4. Busca la etiqueta de cierre </head> en el código. En una nueva línea encima de la etiqueta de cierre </head>, pega el siguiente código:

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

1. Haz clic en Guardar.

Editar product-template.liquid o featured-product.liquid

1. Desde el directorio Secciones abre product-template.liquid o featured-product.liquid:

   • Abre product-template.liquid para agregar esta función a las páginas de productos.
   • Abre featured-product.liquid para agregar esta función a la sección de productos destacados en la página de inicio.

2. Busca {% form 'product'. Arriba de esta etiqueta, agrega el siguiente 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>

El código anterior muestra Stock: x. Puedes cambiar la redacción ajustando el contenido en las etiquetas <p>. Asegúrate de incluir {{current_variant.inventory_quantity }} en tus etiquetas <p>.

1. En la parte inferior del archivo, pega el siguiente código:

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

1. Haz clic en Guardar.

Editar theme.js.liquid o theme.js

1. Abre theme.js.liquid o theme.js.
2. Busca theme.Product = (function(). Debajo de this.selectors = {, agrega el siguiente código:

inventoryHtml: '.inventoryWrapper',

1. En el mismo archivo, busca if (variant.available) {. Antes de la instrucción } else {, agrega el siguiente 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('');
}

El código anterior muestra Stock: x. Puedes cambiar la redacción ajustando el contenido en las etiquetas <p>. Asegúrate de incluir ${variantStock[variant.id]} en tus etiquetas <p>.

1. Haz clic en Guardar.

Minimal

Pasos para Minimal

Editar theme.liquid

1. Desde tu panel de control de Shopify, ve a Tienda online > Temas.
2. Busca el tema que deseas editar y, a continuación, haz clic en el botón ... > Editar código.
3. Desde el directorio Diseño, abre theme.liquid.
4. Busca la etiqueta de cierre </head> en el código. En una nueva línea encima de la etiqueta de cierre </head>, pega el siguiente código:

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

1. Haz clic en Guardar.

Editar product-template.liquid o featured-product.liquid

1. Desde el directorio Secciones abre product-template.liquid o featured-product.liquid:

   • Abre product-template.liquid para agregar esta función a las páginas de productos.
   • Abre featured-product.liquid para agregar esta función a la sección de productos destacados en la página de inicio.

2. Busca {% form 'product'. Arriba de esta etiqueta, agrega el siguiente 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>

El código anterior muestra Stock: x. Puedes cambiar la redacción ajustando el contenido en las etiquetas <p>. Asegúrate de incluir {{current_variant.inventory_quantity }} en tus etiquetas <p>.

1. En la parte inferior del archivo, pega el siguiente código:

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

1. Haz clic en Guardar.

Editar theme.js.liquid o theme.js

1. Abre theme.js.liquid o theme.js.
2. Busca theme.Product = (function(). Debajo de this.selectors = {, agrega el siguiente código:

inventoryHtml: '.inventoryWrapper',

1. En el mismo archivo, busca if (variant.available) {. Antes de la instrucción } else {, agrega el siguiente 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('');
}

El código anterior muestra Stock: x. Puedes cambiar la redacción ajustando el contenido en las etiquetas <p>. Asegúrate de incluir ${variantStock[variant.id]} en tus etiquetas <p>.

1. Haz clic en Guardar.

Boundless

Pasos para Boundless

Editar theme.liquid

1. Desde tu panel de control de Shopify, ve a Tienda online > Temas.
2. Busca el tema que deseas editar y, a continuación, haz clic en el botón ... > Editar código.
3. Desde el directorio Diseño, abre theme.liquid.
4. Busca la etiqueta de cierre </head> en el código. En una nueva línea encima de la etiqueta de cierre </head>, pega el siguiente código:

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

1. Haz clic en Guardar.

Editar product-template.liquid o featured-product.liquid

1. Desde el directorio Secciones abre product-template.liquid o featured-product.liquid:

   • Abre product-template.liquid para agregar esta función a las páginas de productos.
   • Abre featured-product.liquid para agregar esta función a la sección de productos destacados en la página de inicio.

2. Busca {% form 'product'. Arriba de esta etiqueta, agrega el siguiente 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>

El código anterior muestra Stock: x. Puedes cambiar la redacción ajustando el contenido en las etiquetas <p>. Asegúrate de incluir {{current_variant.inventory_quantity }} en tus etiquetas <p>.

1. En la parte inferior del archivo, pega el siguiente código:

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

1. Haz clic en Guardar.

Editar theme.js.liquid o theme.js

1. Abre 'theme.js.liquid' *o *'theme.js'.
2. Busca theme.Product = (function(). Debajo de var selectors = {, agrega el siguiente código:

inventoryHtml: '.inventoryWrapper',

1. En el mismo archivo, busca $(selectors.SKU, this.$container).html(variant.sku);. Directamente debajo, agrega el siguiente 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("");
}

El código anterior muestra Stock: x. Puedes cambiar la redacción ajustando el contenido en las etiquetas <p>. Asegúrate de incluir ${variantStock[variant.id]} en tus etiquetas <p>.

1. Haz clic en Guardar.

Narrative

Pasos para Narrative

Editar theme.liquid

1. Desde tu panel de control de Shopify, ve a Tienda online > Temas.
2. Busca el tema que deseas editar y, a continuación, haz clic en el botón ... > Editar código.
3. Desde el directorio Diseño, abre theme.liquid.
4. Busca la etiqueta de cierre </head> en el código. En una nueva línea encima de la etiqueta de cierre </head>, pega el siguiente código:

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

1. Haz clic en Guardar.

Editar product-template.liquid o featured-product.liquid

1. Desde el directorio Secciones abre product-template.liquid o featured-product.liquid:

   • Abre product-template.liquid para agregar esta función a las páginas de productos.
   • Abre featured-product.liquid para agregar esta función a la sección de productos destacados en la página de inicio.

2. Busca {% include 'product-form' %}. Arriba de esta etiqueta, agrega el siguiente 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>

El código anterior muestra Stock: x. Puedes cambiar la redacción ajustando el contenido en las etiquetas <p>. Asegúrate de incluir {{current_variant.inventory_quantity }} en tus etiquetas <p>.

1. En la parte inferior del archivo, pega el siguiente código:

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

1. Haz clic en Guardar.

Editar custom.js

1. Abre custom.js.
2. En la parte inferior del archivo, pega el siguiente 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);

El código anterior muestra Stock: x. Puedes cambiar la redacción ajustando el contenido en las etiquetas <p>. Asegúrate de incluir ${variantStock[variant.id]} en tus etiquetas <p>.

1. Haz clic en Guardar.