Agregar datos de vencimiento a tu sitio

Es posible acceder a los datos de vencimiento de tu sitio o mostrarlos en él. Esto incluye las fechas de vencimiento, sus cantidades y los datos del plazo de uso. La forma más sencilla de mostrar esta información es usar nuestra integración con el editor de temas de Shopify, que permite agregar los datos de vencimiento como una sección o un bloque.

1. Ve a tus temas en el administrador de Shopify

2. Busca el tema que quieres actualizar y haz clic en "Editar tema"

3. En el editor de temas, selecciona la plantilla a la que quieres agregar los datos de vencimiento:

   

4. Selecciona la ubicación deseada dentro de la plantilla. Puedes hacerlo pasando el cursor sobre el área de inserción que quieras:

   

5. Haz clic en el botón de agregar bloque y selecciona Datos de vencimiento en la sección Aplicaciones:

   

6. Esto agregará un bloque Datos de vencimiento a la plantilla seleccionada:

   

7. Haz clic en el bloque Datos de vencimiento para acceder a opciones de configuración adicionales. En el caso de los productos con varias variantes, se mostrarán los datos de vencimiento de la variante seleccionada. Se pueden agregar varios bloques para cubrir diferentes casos de uso. Por ejemplo, puedes agregar 1 bloque para mostrar fechas de vencimiento y otro para mostrar los datos del plazo de uso.

8. Haz clic en Guardar

Agregar nuestro fragmento a tu tema

Agregar los datos de vencimiento debe hacerse mediante nuestra integración con temas de Shopify. Agregar el fragmento de forma explícita solo es necesario en casos especializados.

1. Ve al administrador de Shopify
2. Abre el editor de código de tu tema
3. Agrega un nuevo archivo de tema
   • Haz clic en el directorio "snippets"
   • Haz clic en "Agregar nuevo fragmento"
   • Para el nombre del archivo, usa ss-product-expiration-dates
   • Haz clic en "Listo"
4. Esto abrirá una nueva pestaña en blanco en el editor llamada snippets/ss-product-expiration-dates.liquid
5. Copia el código de nuestro fragmento de Liquid y pégalo en la pestaña
6. Haz clic en Guardar

Mostrar los datos de vencimiento

Una vez que hayas agregado nuestro fragmento a tu tema, el siguiente paso es renderizarlo en la ubicación donde quieres que se muestren los datos de vencimiento. Puedes hacerlo desde el administrador de Shopify, en la página de personalización del tema.

1. Ve a tus temas en el administrador de Shopify
2. Busca el tema que quieres actualizar y haz clic en "Editar tema"
3. En el editor de temas, selecciona "Productos" y luego "Producto predeterminado" (o la plantilla que quieras)
4. En la sección Plantilla, haz clic en "Agregar bloque"
5. Selecciona "Liquid personalizado" o, si no está disponible, "HTML" (ten en cuenta que el bloque "HTML" debe admitir Liquid)

• Si tu tema no tiene la opción "Liquid personalizado" ni "HTML", debes renderizar el fragmento manualmente en tu tema
• Puedes hacerlo desde el editor de código del tema
• Si necesitas ayuda, contacta al soporte

7. Una vez seleccionado, puedes mover el bloque Liquid personalizado a la ubicación donde quieres que se muestren los datos de vencimiento
8. Haz clic en el bloque Liquid personalizado que acabas de agregar
9. En el campo "Liquid personalizado" (o similar), pega el código de renderización que quieras; consulta Opciones de visualización de datos de vencimiento para ver ejemplos
10. Haz clic en Guardar

Mostrar las fechas de vencimiento según el idioma o la región del usuario

Si muestras tu sitio en varios idiomas, puedes cambiar el formato y el texto de la fecha de vencimiento según el idioma o la región que estén seleccionados en ese momento. En lugar de renderizar la fecha de vencimiento con el código predeterminado:

{% render "ss-product-expiration-dates", product: product, prefix: "Best by:", format: "%B %d, %Y" %}

Puedes usar el código siguiente para comprobar el idioma o la región seleccionados y mostrar la fecha de vencimiento y el texto en un formato específico:

{% assign locale = request.locale.iso_code %}
{% assign lang = locale | split: "-" | first %}
{% if lang == "es" %}
  {% render "ss-product-expiration-dates", product: product, prefix: "Consúmase antes de:", format: "%d/%m/%Y" %}
{% elsif lang == "de" %}
  {% render "ss-product-expiration-dates", product: product, prefix: "Mindestens haltbar bis:", format: "%d.%m.%Y" %}
{% else %}
  {% render "ss-product-expiration-dates", product: product, prefix: "Best by:", format: "%B %d, %Y" %}
{% endif %}

Aquí, si el idioma es español ("es"), se muestra el texto "Consúmase antes de:" y la fecha se muestra en formato DD/MM/YYYY. Si el idioma es alemán ("de"), el texto y la fecha se muestran en un formato adecuado para quienes hablan alemán. Y, si el idioma no es ninguno de los dos, mostramos la fecha en un formato adecuado para quienes hablan inglés.

Si quieres mostrar texto según el idioma y el país del usuario, puedes agregar un caso que compruebe la variable locale. En este ejemplo, mostramos la fecha en formato YYYY/MM/DD si el usuario está en España, y mostramos la fecha en formato DD/MM/YYYY si está en otro país de habla hispana:

{% assign locale = request.locale.iso_code %}
{% assign lang = locale | split: "-" | first %}
{% if locale == "es-ES" %}
 {% render "ss-product-expiration-dates", product: product, prefix: "Consúmase antes de:", format: "%Y/%m/%d" %}
{% elsif lang == "es" %}
  {% render "ss-product-expiration-dates", product: product, prefix: "Consúmase antes de:", format: "%d/%m/%Y" %}
{% elsif lang == "de" %}
  {% render "ss-product-expiration-dates", product: product, prefix: "Mindestens haltbar bis:", format: "%d.%m.%Y" %}
{% else %}
  {% render "ss-product-expiration-dates", product: product, prefix: "Best by:", format: "%B %d, %Y" %}
{% endif %}