Card ecommerce #1015
Replies: 1 comment 2 replies
-
|
Hola Grace! Veo varias cosas por aquí, voy a intentar comentarlo de manera ordenada Circulos de colorEn Mística actualmente puedes crear circulos con color. Este color puede ser una constante de Mística, o por otro lado puede ser un color custom. Entiendo que aquí necesitas un color custom porque el color de móvil u otro elemento tendrá colores propios del producto y no estarán dentro de la paleta de movistar/u otra marca Ejemplo → Si no necesitaras interacción en esos circulos es algo que ya se podría hacer actualmente. PERO, aquí podría ser interesante tener un componente en mística que actúe como selector de color del elemento, como un radio button, pero con circulos de color. Este selector es algo que ya se podría hacer con Mística en desarrollo, pero lo interesante es que pueda existir un componente global para todos los productos. Así si otro producto necesita ese mismo selector, no hace falta que se lo construya nuevamente. Es cierto un detalle, y es que el componente "Circle" de Mística a día de hoy no admite un border, si quisieras hacer esos círculos en desarrollo el desarrollador/a tendría que tirar de un div y darle estilos propios. Precios tachadosMística si admite precios tachados Botón de compararPodría tener un peso inferior, todo lo que hemos visto hasta ahora estaría dentro de un slot (+info) de la card de Mística. Con peso inferior podrías bajar el tamaño de texto o cambiarle el color a textSecondary, se podría hacer con la prop "render" de este ejemplo Aquí el problema que puedo ver es quizás el exceso de interacciones que puede tener esa card. En desktop puede funcionar con el mouse, pero en mobile y desktop nos arriesgamos a problemas de accesibilidad. Lo miramos más en detalle a ver si te podemos ayudar más o cómo se podría llegar a una solución con lo que hay actualmente en Mística. Dejo aquí un ejercicio rápido de lo que planteas La parte del comparar es lo que a día de hoy sería más complicado de solucionar, aunque siempre podrías meter el checkbox dentro del slot |
Beta Was this translation helpful? Give feedback.
-
|
Buenos días Ignacio, Gracias por tu respuesta. En cuanto a los círculos de color, estoy intentando encontrar el componente "circle" dentro de la librería y no lo veo. Lo que queremos mostrar en la card es los colores en los que se encuentra disponible el dispositivo ya que cuando el usuario va al detalle de producto puede seleccionar el color que quiere. Por otro lado, en relación a los precios tachados a mi me sale así al seleccionar un estilo tipográfico: De antemano muchas gracias por la respuesta. |
Beta Was this translation helpful? Give feedback.
-
|
En la librería no tenemos el componente Circle como tal porque un circulo lo puedes crear con la herramienta básica de Figma (
Si solo necesitas un circulo, lo haría con la herramienta de hacer circulo de Figma, pero valoraremos el feedback por si tiene sentido meter un componente que sea un circulo y ya! Por otro lado, el tema del texto tachado es una limitación de Figma y es que a un estilo no le puedas pasar el tachado, debería existir un estilo con el tachado incluido y la verdad es que esa forma de gestionar estilo no nos parece la correcta por parte de Figma porque nos obligaría a duplicar muchísimos estilos de texto. Le damos una pensada a esto de los estilos strikethrough por si encontraramos una solución sencilla. |
Beta Was this translation helpful? Give feedback.
-
Buenas tardes,
Mi nombre es Grace y estoy trabajando en el proyecto de ecommerce global y os voy a indicar una serie de dudas relacionadas con Mística que han surgido en el desarrollo del proyecto.
Contexto
El proyecto que está en marcha quiere incorporar unas mejoras en la tienda para que diferentes usuarios puedan comprar diferentes dispositivos. Estas mejoras que se quieren introducir son entre otras la mejora de los flujos de usuario y diferentes funcionalidades.
Problema
Para este proyecto se requiere utilizar Mística y observamos que tenemos unas necesidades concretas en cuanto a componentes.
Es importante obtener feedback de vuestra parte con el fin de entender cómo podríamos implementar el proyecto usando Mística y qué cubra las necesidades planteadas.
En este caso queremos diseñar una card moderna, limpia y con la información necesaria para el usuario.
Propuesta
Para el diseño de esta card observamos que:
Los círculos con el color no se encuentran en Mística.
Mística no permite hacer precios tachados.
El botón de comparar tendría que tener un peso inferior al de más información por eso esta en negro.
Estamos abiertos a cualquier feedback que nos podáis dar para abordar el proyecto.
De antemano muchas gracias.
Beta Was this translation helpful? Give feedback.
All reactions