Mejoras en la interactividad
El código de inicio proporciona una experiencia bastante básica para el usuario. Hay un par de maneras en que podemos mejorarlo:
- Agregue un indicador que muestre la diapositiva actual y el número total de diapositivas.
- Cuando un usuario selecciona un color de camisa diferente, cambia el carrusel de imagen para mostrar imágenes de camisas en el color seleccionado.
Antes de la introducción del componente amp-bind, no era posible añadir funciones como estas. Veremos una experiencia práctica con amp-bind y agregaremos estas nuevas características a nuestro código de ejemplo.
Instalación del componente amp-bind
amp-bind es un componente de AMP que permite la interactividad personalizada mediante la vinculación de datos y expresiones similares a JS. Para usar amp-bind, debe instalarlo en la página.
Abra el archivo static/index.html, y agregue el siguiente script a la lista de componentes de AMP en la sección <head> de la página:
<script
async
custom-element="amp-bind"
src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"
></script>
Adición de un indicador de diapositiva
amp-bind funciona vinculando atributos de elementos a expresiones personalizadas. Estas expresiones pueden hacer referencia al "estado" (mutable JSON data). Podemos inicializar este estado mediante el componente <amp-state> incluido con amp-bind.
Inicialización del estado de la diapositiva
Vamos a inicializar una variable de estado para hacer un seguimiento del índice de la diapositiva que actualmente se visualiza en el carrusel de imágenes. Abra static/index.html y agregue lo siguiente a la parte superior del <body> de la página (antes del <header>):
<amp-state id="selected">
<script type="application/json">
{
"slide": 0
}
</script>
</amp-state>
Los datos que están dentro de los elementos <amp-state> son accesibles por su ID asociado. Por ejemplo, podemos referirnos a esta variable con la siguiente expresión:
selected.slide; // Evaluates to 0.
Actualización del estado de la diapositiva
A continuación, actualizamos esta variable cuando el usuario cambie las diapositivas en el carrusel añadiendo la siguiente acción "on" al elemento existente de amp-carousel:
<amp-carousel
type="slides"
layout="fixed-height"
height="250"
id="carousel"
on="slideChange:AMP.setState({selected: {slide: event.index}})"
></amp-carousel>
Ahora, siempre que la diapositiva mostrada para el amp-carousel cambie, la acción AMP.setState será llamada con el siguiente argumento:
{
selected: {
slide: event.index;
}
}
La expresión event.index se evalúa al nuevo índice de diapositivas y la acción AMP.setState() fusiona este literal de objeto en el estado actual. Esto reemplaza el valor actual de selected.slide con el valor de event.index.
AMP.setState() realiza una fusión profunda de literales de objetos anidados. Para obtener más detalles, consulte la documentación amp-bind. Vinculación de los elementos indicadores
A continuación, utilizamos esta variable de estado que rastrea la diapositiva mostrada actualmente y creamos un indicador de diapositiva. Busque el elemento indicador de diapositivas (busque <!-- TODO: "Add a slide indicator" -->) y agregue los siguientes enlaces a sus elementos secundarios:
<!-- TODO: "Add a slide indicator" -->
<p class="dots">
<!-- The <span> element corresponding to the current displayed slide
will have the 'current' CSS class. -->
<span : class="current"></span>
<span :></span>
<span :></span>
</p>
[class] es un enlace que cambia el atributo de clase y se puede usar para añadir o eliminar clases CSS de cualquier elemento.
Pruébelo: ¡Actualice la página y cambie la diapositiva!
Al cambiar la diapositiva del carrusel:
- Se activa el evento
slideChange event... - Que llama a la acción
AMP.setState... - Que actualiza la variable de estado
selected.slide... - ¡Que actualiza el enlace de
[class]en los elementos del indicador<span>!
¡Excelente! Ahora tenemos un indicador de deslizamiento trabajando.
Compruebe si puede agregar funcionalidades para que cuando un usuario toque en el punto indicador de una diapositiva, se actualice el carrusel de la imagen con el elemento seleccionado. Como sugerencia, utilice el evento tap y el enlace [slide] en amp-carousel.
Cambios en las imágenes en el carrusel
Sería agradable si pudiéramos ver imágenes de camisas de diferentes colores cuando cambiamos el color seleccionado. Con amp-bind podemos hacer esto uniendo [src] en los elementos amp-img dentro del amp-carousel.
Inicialización del estado SKU
Primero, necesitamos inicializar los datos del estado con las URL de la fuente de la imagen de cada color de camisa. Hagamos esto con un nuevo elemento <amp-state>:
<!-- Available shirts. Maps unique string identifier to color and image URL string. -->
<amp-state id="shirts">
<script type="application/json">
{
"1001": {
"color": "black",
"image": "./shirts/black.jpg"
},
"1002": {
"color": "blue",
"image": "./shirts/blue.jpg"
},
"1010": {
"color": "brown",
"image": "./shirts/brown.jpg"
},
"1014": {
"color": "dark green",
"image": "./shirts/dark-green.jpg"
},
"1015": {
"color": "gray",
"image": "./shirts/gray.jpg"
},
"1016": {
"color": "light gray",
"image": "./shirts/light-gray.jpg"
},
"1021": {
"color": "navy",
"image": "./shirts/navy.jpg"
},
"1030": {
"color": "wine",
"image": "./shirts/wine.jpg"
}
}
</script>
</amp-state>
Este elemento <amp-state> contiene un objeto JSON que asigna una cadena de identificador de camisa (es decir, una SKU) al URL del color e imagen de la camisa correspondiente. Una matriz JSON también funcionaría aquí, pero el uso de un objeto nos permite hacer algunas cosas más interesantes que veremos pronto.
Ahora podemos acceder a la URL de la imagen con el identificador de la camisa. Por ejemplo, shirts['10014'].color se evalúa como "dark green" y shirts['10030'].image devuelve la URL de la imagen para el color de la camisa "wine".
Seguimiento del SKU seleccionado
Si agregamos otra variable de estado que rastree la SKU seleccionada, podemos vincular una expresión a los elementos amp-img para actualizar sus atributos src cuando cambia el SKU seleccionado. Agregue una nueva clave sku al existente amp-state#selected del elemento JSON:
<amp-state id="selected">
<script type="application/json">
{
"slide": 0,
"sku": "1001"
}
</script>
</amp-state>
Actualización del estado SKU
Agregue una acción "on" al amp-selector que actualiza la variable selected.sku siempre que se seleccione un nuevo color:
<amp-selector
name="color"
on="select:AMP.setState({selected: {sku: event.targetOption}})"
></amp-selector>
on="tap:AMP.setState(...) a cada amp-img secundario dentro del amp-selector. Una de las grandes cosas sobre amp-selector es que simplifica el marcado Vinculación de los elementos de la imagen
A continuación, agregue vínculos a los elementos amp-img:
<!-- Update the `src` of each <amp-img> when the `selected.sku` variable changes. -->
<amp-img
width="200"
height="250"
src="./shirts/black.jpg"
[src]="shirts[selected.sku].image"
></amp-img>
<amp-img
width="300"
height="375"
src="./shirts/black.jpg"
[src]="shirts[selected.sku].image"
></amp-img>
<amp-img
width="400"
height="500"
src="./shirts/black.jpg"
[src]="shirts[selected.sku].image"
></amp-img>
src diferente. Esto podría hacerse reemplazando la imagen única por una matriz de imágenes. Para simplificar, este tutorial utilice una sola imagen con diferentes ampliaciones. Pruébelo: Actualice la página y seleccione un color diferente para una camisa. Cuando lo haga, las imágenes del carrusel se actualizarán para mostrar las camisetas del color seleccionado.