search

eugeniorubenjauregui / store-framework

https://lab.github.com/vtex-trainings/store-framework
0 stars 0 forks source link

Making your content responsive #11

Open github-learning-lab[bot] opened 4 years ago

github-learning-lab[bot] commented 4 years ago

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:

"rich-text": {
  "props": {
    "text": "# Your Coffee, Your Way \n ### New Coffee Makers Collection",
    "textPosition": "CENTER",
    "textAlignment": "CENTER"
  }
},

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:


...

"responsive-layout.desktop#desktop": {
  "children": ["rich-text#desktop"]
},

"responsive-layout.mobile#mobile": {
  "children": ["rich-text#mobile"]
},

"rich-text#desktop": {
  "props": {
    "text": "# Your Coffee, Your Way \n ### New Coffee Makers Collection",
    "textPosition": "CENTER",
    "textAlignment": "CENTER"
  }
},

"rich-text#mobile": {
  "props": {
    "text": "# Your Coffee, Your Way \n ### New Coffee Makers Collection",
    "textPosition": "CENTER",
    "textAlignment": "CENTER"
  }
}

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 y responsive-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:

image

Mobile:

image

  1. Agregue el código propuesto anteriormente en el archivo home.jsonc y declare los bloques de responsive-layout en el template store.home .

  2. En rich-text#mobile, altere el markdown de la primera frase a h3 y de la segunda a h4 .

    Si aún no se acuerda de la sintaxis de Markdown, es posible consultarla en Markdown Documentation.

  3. Agregue image#desktop como children de responsive-layout.desktop#desktop . Haga lo mismo con image#mobile en responsive-layout.mobile#mobile .

  4. Declare los siguientes bloques de Image:

    "image#desktop": {
  "props": {
    "src": "https://appliancetheme.vteximg.com.br/arquivos/Responsive-Image-Desktop.jpg?q=1",
    "link": {
      "url": "/small-appliances/coffee-makers"
    } ,
    "alt": "Coffee Makers Collection"
  }
},

"image#mobile": {
  "props": {
    "src": "https://appliancetheme.vteximg.com.br/arquivos/Responsive-Image-Mobile.jpg?q=1",
    "link": {
      "url": "/small-appliances/coffee-makers"
    } ,
    "alt": "Coffee Makers Collection"
  }
},

  5. 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í.

github-learning-lab[bot] commented 4 years ago

¡Ha completado este paso con éxito!

Vaya al siguiente paso!

vtex-course-hub[bot] commented 4 years ago

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::x::x::x::x::x::white_check_mark:

Tests

: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

Try again :grin:

vtex-course-hub[bot] commented 4 years ago

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::x::x::x::x::x::white_check_mark:

Tests

: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

Try again :grin:

vtex-course-hub[bot] commented 4 years ago

You did great! :grin:

Results

: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:

Tests

: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