Closed github-learning-lab[bot] closed 3 years ago
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Getting the file :white_check_mark: First test - Code compilation :white_check_mark: store.home must contain responsive layouts mobile and desktop :white_check_mark: Desktop's image and rich text must be correctly stated :white_check_mark: Mobile's image and rich text must be correctly stated :x: You haven't declared the props text,textPosition,textAlignment from rich-text#mobile correctly. Review their names and values. :white_check_mark: Rich-text Desktop props must be correclty declared :white_check_mark: Image Mobile props must be correclty declared :white_check_mark: Image Desktop props must be correclty declared
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::x::white_check_mark::white_check_mark:
:white_check_mark: Getting the file :white_check_mark: First test - Code compilation :white_check_mark: store.home must contain responsive layouts mobile and desktop :white_check_mark: Desktop's image and rich text must be correctly stated :white_check_mark: Mobile's image and rich text must be correctly stated :x: You haven't declared the props text,textPosition,textAlignment from rich-text#mobile correctly. Review their names and values. :x: You haven't declared the props text,textPosition,textAlignment from rich-text#desktop correctly. Review their names and values. :white_check_mark: Image Mobile props must be correclty declared :white_check_mark: Image Desktop props must be correclty declared
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Getting the file :white_check_mark: First test - Code compilation :white_check_mark: store.home must contain responsive layouts mobile and desktop :white_check_mark: Desktop's image and rich text must be correctly stated :white_check_mark: Mobile's image and rich text must be correctly stated :white_check_mark: Rich-text Mobile props must be correclty declared :white_check_mark: Rich-text Desktop props must be correclty declared :white_check_mark: Image Mobile props must be correclty declared :white_check_mark: Image Desktop props must be correclty declared
Haciendo que su contenido sea responsivo
:sparkles: Branch: responsive
Introducción
La página inicial de un e-commerce es siempre el primer contacto del cliente con la marca. Por lo tanto, es común que el administrador de la tienda quiera establecer una comunicación directa con sus usuarios en este momento estratégico de la navegación.
En el Store Framework, existen algunos componentes que atienden a este escenario, como el Info Card visto en los pasos anteriores y el Rich Text.
Como vimos en el tercer paso, Rich Text es responsable de transformar textos en elementos HTML, con la gran ventaja de leer en Markdown. Esto da al componente la flexibilidad de aceptar diferentes estructuras de texto, permitiendo al administrador de la tienda construir su comunicación de forma más clara y directa.
Configurando Rich Text
Así como su funcionalidad, la configuración de Rich Text también es simple.
De la misma forma en que se hizo el "Hello, world!", podemos crear un ejemplo de implementación del bloque usando texto escrito en markdown. Por ejemplo:
Como se mencionó anteriormente, el uso de Markdown permite flexibilidad al componente. Pero, por otro lado, también puede hacer que su renderización sufra alteraciones de acuerdo con el dispositivo utilizado por el usuario.
Por ejemplo, la frase anterior (
# Your Coffee, Your Way \n ### New Coffee Makers Collection
) puede utilizar un markdown adecuado para desktop, pero no necesariamente para mobile (cuyo tamaño de pantalla es menor).Para resolver este escenario y hacer que el componente sea más adaptable a otros dispositivos, debemos usar Responsive Layout.
Primeramente, debemos declarar los bloques dentro del template
store.home
:"responsive-layout.desktop#desktop" "responsive-layout.mobile#mobile"
En seguida, debemos declarar estos bloques de la siguiente forma:
Al interpretar el código anterior, perciba cómo se construyen dos configuraciones de Rich Text a partir del uso de
responsive-layout.desktop#desktop
yresponsive-layout.mobile#mobile
.Actividad
En esta actividad, juguemos un poco con el markdown del Rich Text y aprendamos a usarlo con el componente Image. Todo esto usando Responsive Layout, ¡está claro!
Desktop:
Mobile:
Agregue el código propuesto anteriormente en el archivo
home.jsonc
y declare los bloques deresponsive-layout
en el templatestore.home
.En
rich-text#mobile
, altere el markdown de la primera frase ah3
y de la segunda ah4
.Agregue
image#desktop
como children deresponsive-layout.desktop#desktop
. Haga lo mismo conimage#mobile
enresponsive-layout.mobile#mobile
.Declare los siguientes bloques de Image:
Analizando las props del componente Image, defina la anchura máxima de las dos imágenes como
100%
.:information_source: Recuerde acceder a la documentación del Responsive Layout si tiene alguna duda durante la actividad.
:no_entry_sign: ¿Perdido?
¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? :pray:
Crear feedback
Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar aquí.