Open github-learning-lab[bot] opened 3 years ago
:white_check_mark::white_check_mark::white_check_mark::x::x::x::x::x::white_check_mark:
:white_check_mark: Getting the file
:white_check_mark: Code compilation
:white_check_mark: Crete a product template page
:x: You didn't use nor defined a flex-layout.row
in your product page
:x: There aren't two flex-layout.col
inside your flex-layout.row
:x: You didn't define product-images
on the left column
:x: You didn't define product-name
, product-price
and buy-button
on the right column
:x: You didn't use the props preventVerticalStretch
and verticalAlign
:white_check_mark: Define product-price
with props
:white_check_mark::white_check_mark::white_check_mark::x::x::x::x::x::white_check_mark:
:white_check_mark: Getting the file
:white_check_mark: Code compilation
:white_check_mark: Crete a product template page
:x: You didn't use nor defined a flex-layout.row
in your product page
:x: There aren't two flex-layout.col
inside your flex-layout.row
:x: You didn't define product-images
on the left column
:x: You didn't define product-name
, product-price
and buy-button
on the right column
:x: You didn't use the props preventVerticalStretch
and verticalAlign
:white_check_mark: Define product-price
with props
: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: Code compilation
:white_check_mark: Crete a product template page
:white_check_mark: Create a main row inside the product page
:white_check_mark: Define two columns inside the main row
:white_check_mark: Define product-images
on the left column
:white_check_mark: Define product-name
, product-price
and buy-button
on the right column
:white_check_mark: Control stretch and alignment of right column
:white_check_mark: Define product-price
with props
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í.