Product Reviews
Lo que ha dicho la gente, y el formulario para decir algo. Es el formulario propio de WooCommerce: el nonce, la moderación y la insignia de «compra verificada» siguen siendo suyos.
Las reseñas de toda la tienda, en cualquier página
Para una sección de testimonios —la portada, una landing— las reseñas de la tienda se publican como una lista para un loop de Etch: Las reseñas de la tienda, en cualquier página.
En el lienzo salen tres reseñas de ejemplo, una de ellas mala — que es el caso con el que se suele romper una tarjeta.
Props
| Prop | Tipo | Por defecto | Qué hace |
|---|---|---|---|
| Show the review form | sí / no | on | Apagado deja sólo lo que la gente ha escrito. La regla de la tienda sobre quién puede opinar se respeta siempre: con «sólo compradores verificados», quien no lo ha comprado ve el motivo en vez del formulario. |
| Form behind a button | sí / no | off | Media página de campos es lo primero que un comprador se salta. Detrás de un botón se abre cuando alguien quiere escribir — también con el teclado, y en una página a la que nunca llegó el JavaScript. |
| Heading | elección: auto, split, none | auto | «3 valoraciones en Hoodie», contadas y traducidas por WooCommerce. Apágalo cuando la sección ya lleve encima un encabezado tuyo. |
| Colours → Card background | texto | var(--fe-woo-surface, #ffffff) | |
| Colours → Borders | texto | var(--fe-woo-border, #e5e7eb) | |
| Colours → Buttons and badge | texto | var(--fe-woo-accent, #111827) | |
| Colours → Button text | texto | var(--fe-woo-accent-color, #ffffff) | |
| Colours → Buttons on hover | texto | var(--fe-woo-accent-hover, color-mix(in srgb, var(--fe-woo-reviews-accent, #111827) 85%, var(--fe-woo-reviews-accent-color, #ffffff))) | |
| Colours → Button text on hover | texto | var(--fe-woo-accent-color-hover, var(--fe-woo-reviews-accent-color, #ffffff)) | |
| Ratings summary | sí / no | on | La media, las estrellas y una barra por nota. No aparece hasta que alguien ha puntuado el producto. |
| Review cards → Avatar | elección: initials, photo, none | initials | Iniciales por defecto: un Gravatar es una petición a un tercero que lleva un hash del correo del cliente, y la mayoría no tiene uno. |
| Review cards → Dates | elección: relative, exact | relative | |
| Review cards → Columns | elección: 1, 2, 3, auto | 1 | Una columna de tarjetas a todo el ancho convierte en una página larguísima a una tienda con muchas reseñas. Dos necesitan 40rem de sitio y tres necesitan 60rem; un teléfono enseña siempre una. Cada reseña cae bajo la columna más corta, así que ninguna tarjeta se estira ni queda un hueco al final de una columna — esa parte necesita JavaScript, y sin él las reseñas se quedan en filas normales. |
| Show more → Reviews before it | texto | 0 | Cuántas reseñas se ven antes de que el resto queden recortadas tras un degradado. 0 las enseña todas. Las de detrás se dibujan, no se esconden: se asoma su parte de arriba, y eso dice que hay más antes de que nadie lea el botón. Todas están en la página igualmente, y donde no llega el JavaScript salen todas. |
| Show more → Its wording | texto | — | Vacío es «Ver 12 más», traducido. Escribe el tuyo con {count} donde va la cifra. |
| Show more → And once open | texto | — | Vacío es «Ver menos», traducido. |
| Form wording → Line under the heading | texto | — | |
| Form wording → Placeholder in the review box | texto | — | |
| Product | texto | {this.fecommerce.id} | Sin tocarlo sigue al producto que se está mostrando. |
Sus variables propias
| Variable | Por defecto | Qué controla |
|---|---|---|
--fe-woo-reviews-title-size | 1.5rem | El encabezado de la sección. |
--fe-woo-reviews-peek | 7rem | Cuánto se asoma de las reseñas recortadas por el degradado. |
--fe-woo-reviews-avatar-size | 3rem | El círculo con las iniciales del cliente. |
--fe-woo-reviews-track | var(--fe-woo-border, #eef1f4) | La parte sin llenar de cada barra del resumen. |
--fe-woo-reviews-star | #b45309 | Una estrella llena. |
--fe-woo-reviews-star-empty | #d1d5db | El resto de las cinco. |
--fe-woo-reviews-verified | var(--fe-woo-success, #15803d) | La insignia de «compra verificada». |
--fe-woo-reviews-verified-bg | var(--fe-woo-success-soft, #dcfce7) | Su fondo. |
--fe-woo-reviews-average-size | 3rem | La media grande de arriba. |
--fe-woo-reviews-rate-size | 1.75rem | Las estrellas que se pulsan para puntuar. |