Cuando el bloque de bajo stock incorporado de Dawn no es suficiente

Si has pasado algún tiempo en los foros de Shopify, habrás visto esta pregunta. Alguien pregunta cómo mostrar un mensaje de "solo quedan 3" en la página del producto. Cinco respuestas, cinco aplicaciones diferentes sugeridas. Nadie menciona que Dawn ya hace esto.

Así que esto se trata de la parte de la conversación que se omite constantemente. Tres niveles, en orden: lo que Dawn te da gratis, dónde el bloque incorporado deja de ser suficiente, y el fragmento de código que cubre la mayor parte de lo que queda.

Lo que Dawn ya hace

Abre el personalizador, busca la plantilla de producto, añade un bloque de Inventario a la sección de información del producto. Hay un ajuste de umbral y algunas opciones de estilo de texto. Por debajo del umbral, aparece un mensaje de bajo stock. Por encima, no se muestra nada.

Debajo de la superficie, Dawn lee product.selected_or_first_available_variant.inventory_quantity y vuelve a renderizar toda la sección cuando el cliente cambia de variantes. No hay que escribir JavaScript. No hay que tocar archivos de tema.

Una prueba rápida antes de continuar: abre una página de producto, elige una variante con dos unidades en stock y mira si aparece el mensaje. Si lo hace, no necesitas el fragmento de código a continuación. Tampoco necesitas una aplicación. El tema ya resolvió tu problema y puedes cerrar esta pestaña.

Donde el bloque incorporado deja de ser suficiente

Cuatro casos. Son lo suficientemente comunes como para que valga la pena nombrarlos.

Mensajería por niveles. El bloque incorporado tiene un umbral y un mensaje. Solo quedan 5 se lee igual si el stock es de cinco o de uno. Algunas tiendas quieren una nota más suave a diez, una más contundente a tres, algo diferente a cero.

Lógica condicional. Tal vez solo quieras bajo stock en ciertas colecciones, o solo por encima de cierto precio, o solo para clientes registrados. El personalizador no tiene superficie para nada de eso.

Presentación. El bloque predeterminado hereda la tipografía del tema. Las tiendas con una página de producto más diseñada a menudo quieren el mensaje en otro lugar, con un estilo diferente, quizás con un icono al lado. No es configurable desde el personalizador.

Otras superficies. Tarjetas de colección, carrito, modales de compra rápida. El bloque incorporado vive en la plantilla de producto y se queda ahí.

Si ninguna de esas opciones describe tu tienda, detente aquí. El bloque predeterminado está haciendo su trabajo.

{%- liquid
  assign variant = product.selected_or_first_available_variant
  assign stock = variant.inventory_quantity
  assign tracked = variant.inventory_management
-%}{%- if tracked == 'shopify' and variant.inventory_policy != 'continue' -%}
  {%- if stock <= 0 -%}
    <p class="stock-msg out">Sold out. Back in soon.</p>
  {%- elsif stock <= 3 -%}
    <p class="stock-msg critical">Only {{ stock }} left. Selling fast.</p>
  {%- elsif stock <= 10 -%}
    <p class="stock-msg low">Low stock. {{ stock }} remaining.</p>
  {%- endif -%}
{%- endif -%}

Once líneas de contenido. Algunas cosas que vale la pena señalar.

selected_or_first_available_variant es la referencia correcta. No variants.first, que es la variante que se creó primero en el administrador y no tiene nada que ver con lo que el cliente está viendo realmente. En un producto de una sola variante son lo mismo. En cualquier producto multivariante, no lo son.

La comprobación inventory_policy != 'continue' es la que la mayoría de los fragmentos que encontrarás en línea olvidan. Algunas tiendas siguen vendiendo después de que el stock llega a cero, con pedidos pendientes que se cumplen más tarde. Mostrar "agotado" en esos productos es incorrecto, porque el producto no está agotado. Si la política se establece en "continuar", el fragmento se mantiene en silencio y permite al cliente realizar el pedido.

No necesitas JavaScript para el cambio de variante. Siempre que el fragmento se encuentre dentro de la sección principal del producto, Dawn vuelve a renderizar toda la sección cuando el cliente elige una nueva variante, y tu mensaje se actualiza con ella.

Dónde colocarlo

En el personalizador, añade un bloque de Custom Liquid a la sección de información del producto. Pega el fragmento. Arrástralo a donde quieras, normalmente debajo del precio o encima del botón de añadir al carrito. Luego, da estilo a las tres clases CSS (out, critical, low) en tu hoja de estilos para que cada nivel tenga su propio peso visual.

Una nota sobre hacerlo de esta manera en lugar de editar main-product.liquid directamente: los bloques del personalizador sobreviven a las actualizaciones del tema. Las ediciones de los archivos del tema no. Vale la pena dedicar diez segundos extra.

Cuando realmente necesitas una aplicación

Hay casos reales. Múltiples ubicaciones con mensajes específicos de cada ubicación. Stock que necesita tener en cuenta pedidos entrantes o reabastecimientos programados. Pruebas A/B en textos de urgencia en diferentes segmentos de clientes. Mensajes geocondicionales por país.

Si tu tienda es una de esas, una aplicación es la respuesta correcta y vale la pena elegir una con cuidado. La mayoría de las tiendas no son una de esas. La mayoría de las tiendas eligen entre el bloque incorporado y un fragmento de código, y la respuesta se reduce a si los mensajes por niveles son lo suficientemente importantes como para justificar once líneas de código.

Esa es una pregunta más útil que "¿qué aplicación debo instalar?".

Pasilobus ha estado creando aplicaciones de Shopify y desarrollando escaparates desde 2014. Si tu problema de bajo stock es más complicado que el de esta publicación, cuéntanoslo.