New article
by Pedro Matanzo
·
Hay un nueva manera en liquid de acceder al orden de las secciones.
**section.index** - el índice basado en 1 de la sección dentro de su ubicación contextual.
**section.index0** - el índice basado en 0 de la sección dentro de su ubicación contextual.
**section.location** - la ubicación de la sección (también se puede considerar el contexto o ámbito de la sección).
**¿Qué es section.location?**
Antes de explorar las propiedades de índice, es importante comprender qué significa la ubicación. Las secciones pueden renderizarse en diversas ubicaciones. La mayoría de las secciones se renderizan en la plantilla, pero muchas también se renderizan dentro de grupos de secciones:
Una maqueta de la tienda que muestra un anuncio y navegación dentro de un grupo de secciones de encabezado, la plantilla con secciones típicas de imagen/texto y un grupo de secciones de pie de página.
Una disposición común incluye un grupo de secciones de encabezado, la plantilla (contenido para la disposición) y un grupo de secciones de pie de página. Cuando la sección se encuentra dentro de la plantilla, su section.location será "template". Cuando la sección se encuentra dentro de un grupo de secciones, su section.location será el tipo de grupo de secciones, que puede ser "header", "footer", "aside" o "custom.<nombre>".
Las plantillas y los grupos de secciones cubren la mayoría de las ubicaciones de secciones, pero existe un último tipo de ubicación, que es "static", para secciones renderizadas estáticamente:
La misma disposición, pero ahora hay una sección independiente entre el grupo de secciones de encabezado y la plantilla.
Las secciones estáticas están fuera de las plantillas y grupos de secciones. Si tienes un tema heredado que todavía utiliza "content_for_index", la ubicación será "content_for_index".
**¿Qué son section.index y section.index0?**
Tanto index como index0 son números enteros que representan el índice u orden de la sección dentro de su ubicación. Para ser coherentes con las características anteriores de Liquid, index es el índice basado en 1, mientras que index0 es el índice basado en 0.
Dicho de otra manera, el índice se reinicia dentro de cada ubicación o contexto. Por ejemplo, supongamos que tenemos una página con la siguiente disposición:
- Grupo de encabezado
- Sección de anuncio
- Sección de barra de navegación
- Sección estática
- Plantilla
- Sección de imagen con texto
- Otra sección de imagen con texto
- Sección de artículos destacados
- Grupo de pie de página
- Sección de pie de página
La ubicación y los índices serían los siguientes:
| Sección | Ubicación | Índice | Índice0 |
|-------------------------|-----------|--------|---------|
| Sección de anuncio | Encabezado| 1 | 0 |
| Sección de barra de navegación | Encabezado | 2 | 1 |
| Sección estática | Estática | N/A | N/A |
| Sección de imagen con texto | Plantilla | 1 | 0 |
| Otra sección de imagen con texto | Plantilla | 2 | 1 |
| Sección de artículos destacados | Plantilla | 3 | 2 |
| Sección de pie de página | Pie de página | 1 | 0 |
¡Advertencia! Tanto index como index0 son nulos en los siguientes casos:
- Para secciones renderizadas estáticamente.
- Para secciones renderizadas utilizando la API de Renderización de Secciones.
- Al renderizar el Editor de Tienda en Línea.
El Editor de Tienda en Línea está optimizado para una renderización rápida al volver a renderizar solo la sección que se actualizó. Esto significa que si proporcionáramos el índice, no sería coherente. Por lo tanto, tanto el índice como el índice0 se forzarán a ser nulos al renderizar en el Editor de Tienda en Línea. Estas nuevas características deben utilizarse solo por razones no visuales, como optimizar la velocidad de carga para los usuarios reales.
**Ejemplos de uso y código para las nuevas propiedades de sección**
Antes de empezar, recuerda que solo necesitamos aplicar la carga perezosa a las imágenes que están debajo del doblez o que no son visibles hasta que se interactúa (por ejemplo, al abrir un menú). Si una imagen siempre estará visible arriba o cerca del doblez, lo mejor es cargarla de manera ansiosa. Por ejemplo, la imagen principal de tu producto probablemente debería cargarse de manera ansiosa.
El caso de uso para aplicar selectivamente la carga ansiosa o perezosa es para secciones que se pueden reutilizar en diferentes plantillas y grupos de secciones. Los índices serán nulos para todas las demás secciones.
**Carga perezosa de una imagen basada en section.index**
Recuerda que el comportamiento predeterminado de image_tag es establecer la carga en perezosa para las imágenes después de las primeras tres secciones, en la actualidad. Este ejemplo la establece manualmente en perezosa después de las dos primeras secciones para mostrar cómo se podría anular ese comportamiento:
```
{%- liquid
if section.index > 2
assign loading = "lazy"
else
assign loading = "eager"
endif
-%}
{{
section.settings.image
| image_url: width: 1080
| image_tag: loading: loading
}}
```
**Carga asíncrona de CSS basada en section.index**
Otro problema que vemos en las tiendas de Shopify son cambios de diseño debido a la llegada tardía de CSS, utilizando el "truco" de CSS asíncrono. Si todavía deseas utilizar ese truco, pero limitarlo a secciones más abajo en la página para que no afecte el Cambio de Diseño Acumulativo (CLS), puedes usar section
**section.index** - el índice basado en 1 de la sección dentro de su ubicación contextual.
**section.index0** - el índice basado en 0 de la sección dentro de su ubicación contextual.
**section.location** - la ubicación de la sección (también se puede considerar el contexto o ámbito de la sección).
**¿Qué es section.location?**
Antes de explorar las propiedades de índice, es importante comprender qué significa la ubicación. Las secciones pueden renderizarse en diversas ubicaciones. La mayoría de las secciones se renderizan en la plantilla, pero muchas también se renderizan dentro de grupos de secciones:
Una maqueta de la tienda que muestra un anuncio y navegación dentro de un grupo de secciones de encabezado, la plantilla con secciones típicas de imagen/texto y un grupo de secciones de pie de página.
Una disposición común incluye un grupo de secciones de encabezado, la plantilla (contenido para la disposición) y un grupo de secciones de pie de página. Cuando la sección se encuentra dentro de la plantilla, su section.location será "template". Cuando la sección se encuentra dentro de un grupo de secciones, su section.location será el tipo de grupo de secciones, que puede ser "header", "footer", "aside" o "custom.<nombre>".
Las plantillas y los grupos de secciones cubren la mayoría de las ubicaciones de secciones, pero existe un último tipo de ubicación, que es "static", para secciones renderizadas estáticamente:
La misma disposición, pero ahora hay una sección independiente entre el grupo de secciones de encabezado y la plantilla.
Las secciones estáticas están fuera de las plantillas y grupos de secciones. Si tienes un tema heredado que todavía utiliza "content_for_index", la ubicación será "content_for_index".
**¿Qué son section.index y section.index0?**
Tanto index como index0 son números enteros que representan el índice u orden de la sección dentro de su ubicación. Para ser coherentes con las características anteriores de Liquid, index es el índice basado en 1, mientras que index0 es el índice basado en 0.
Dicho de otra manera, el índice se reinicia dentro de cada ubicación o contexto. Por ejemplo, supongamos que tenemos una página con la siguiente disposición:
- Grupo de encabezado
- Sección de anuncio
- Sección de barra de navegación
- Sección estática
- Plantilla
- Sección de imagen con texto
- Otra sección de imagen con texto
- Sección de artículos destacados
- Grupo de pie de página
- Sección de pie de página
La ubicación y los índices serían los siguientes:
| Sección | Ubicación | Índice | Índice0 |
|-------------------------|-----------|--------|---------|
| Sección de anuncio | Encabezado| 1 | 0 |
| Sección de barra de navegación | Encabezado | 2 | 1 |
| Sección estática | Estática | N/A | N/A |
| Sección de imagen con texto | Plantilla | 1 | 0 |
| Otra sección de imagen con texto | Plantilla | 2 | 1 |
| Sección de artículos destacados | Plantilla | 3 | 2 |
| Sección de pie de página | Pie de página | 1 | 0 |
¡Advertencia! Tanto index como index0 son nulos en los siguientes casos:
- Para secciones renderizadas estáticamente.
- Para secciones renderizadas utilizando la API de Renderización de Secciones.
- Al renderizar el Editor de Tienda en Línea.
El Editor de Tienda en Línea está optimizado para una renderización rápida al volver a renderizar solo la sección que se actualizó. Esto significa que si proporcionáramos el índice, no sería coherente. Por lo tanto, tanto el índice como el índice0 se forzarán a ser nulos al renderizar en el Editor de Tienda en Línea. Estas nuevas características deben utilizarse solo por razones no visuales, como optimizar la velocidad de carga para los usuarios reales.
**Ejemplos de uso y código para las nuevas propiedades de sección**
Antes de empezar, recuerda que solo necesitamos aplicar la carga perezosa a las imágenes que están debajo del doblez o que no son visibles hasta que se interactúa (por ejemplo, al abrir un menú). Si una imagen siempre estará visible arriba o cerca del doblez, lo mejor es cargarla de manera ansiosa. Por ejemplo, la imagen principal de tu producto probablemente debería cargarse de manera ansiosa.
El caso de uso para aplicar selectivamente la carga ansiosa o perezosa es para secciones que se pueden reutilizar en diferentes plantillas y grupos de secciones. Los índices serán nulos para todas las demás secciones.
**Carga perezosa de una imagen basada en section.index**
Recuerda que el comportamiento predeterminado de image_tag es establecer la carga en perezosa para las imágenes después de las primeras tres secciones, en la actualidad. Este ejemplo la establece manualmente en perezosa después de las dos primeras secciones para mostrar cómo se podría anular ese comportamiento:
```
{%- liquid
if section.index > 2
assign loading = "lazy"
else
assign loading = "eager"
endif
-%}
{{
section.settings.image
| image_url: width: 1080
| image_tag: loading: loading
}}
```
**Carga asíncrona de CSS basada en section.index**
Otro problema que vemos en las tiendas de Shopify son cambios de diseño debido a la llegada tardía de CSS, utilizando el "truco" de CSS asíncrono. Si todavía deseas utilizar ese truco, pero limitarlo a secciones más abajo en la página para que no afecte el Cambio de Diseño Acumulativo (CLS), puedes usar section