Corazones en un bucle
La rejilla de la tienda, el índice del blog, una fila con las últimas entradas, la propia página de la wishlist: todos son un bucle de Etch que dibuja una tarjeta diseñada por ti. Pon un Wishlist Button en la tarjeta y cada corazón guarda el elemento de su tarjeta — un producto, una entrada, una página, cualquier cosa publicada.
La única regla: llama al elemento this
Al añadir el bucle, llama a su elemento this. No hay que configurar nada más.
El Wishlist Button lee {this.id}, {this.type} y {this.title} de fábrica —qué guardar, de qué tipo es y el nombre que dice un lector de pantalla después de «Save»—, así que dentro de un bucle cuyo elemento se llama this, cada corazón sigue a su tarjeta sin tocar una sola prop. En la plantilla de un producto o de una entrada, fuera de cualquier bucle, this es la página que se está viendo, y el corazón guarda esa página.
Llama al elemento de otra forma —post, item— y {this.…} deja de apuntar a cada tarjeta: los corazones guardan la página en la que están, o nada. Cambia el nombre del elemento a this, o pon en Item, Item type e Item name del botón tu nombre: {post.id}, {post.type} y {post.title}.
Qué bucle
| Dónde | El bucle |
|---|---|
| La tienda, sus categorías, sus búsquedas | El bucle Main Query de Etch, con la tarjeta de producto. |
| El blog, una categoría de entradas | El bucle Main Query de Etch en el archivo del blog. |
| Una sección en cualquier parte: productos destacados, las últimas entradas | Un bucle WP Query de ese tipo de contenido. |
| La página de la wishlist | El bucle Wishlist — ver La página de la wishlist. |
Vale cualquier tipo de contenido: el corazón guarda aquello de lo que trata su tarjeta, y la wishlist puede después listar cada tipo por su cuenta.
Colócalo en la tarjeta
- Fuera del enlace de la tarjeta. Una tarjeta suele ser un gran enlace al producto o a la entrada, y un botón dentro de un enlace son dos controles en uno: un clic en el corazón seguiría también el enlace, y un lector de pantalla no puede distinguirlos. Pon el corazón junto al enlace — la tarjeta de la demo lo coloca sobre la esquina de la foto, al lado de la imagen enlazada y no dentro de ella.
- Sólo el icono es lo que pide una tarjeta (Display). La etiqueta puede flotar al pasar el puntero (Label shows) cuando hay sitio para un tooltip pero no para palabras.
- Button size, en Size, es el objetivo que tiene que acertar un dedo. Lee
--fe-woo-control-size, 2.75rem, cómodo en un móvil.
Conviene saber
- Todos los corazones del mismo elemento cambian a la vez: el mismo producto en la rejilla y en una fila de relacionados se guarda y se quita como uno solo.
- Los corazones se rellenan en el navegador, para invitados y clientes por igual, así que un catálogo en caché sigue enseñando a cada visitante sus propios corazones.
- En la página de la wishlist, quitar el corazón de una tarjeta se lleva esa tarjeta y ofrece Deshacer — ver La página de la wishlist.