Making your content responsive

[github-learning-lab[bot]]

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:

Mobile:

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

¡Ha completado este paso con éxito!

Vaya al siguiente paso!

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

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

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :white_check_mark: Use search-result-layout on the store.search :white_check_mark: Define search-result-layout :white_check_mark: Use search-result-layout.desktop on the search-result-layout :white_check_mark: Define search-result-layout.desktop :x: You did't use all of the expected components (breadcrumb.search, search-title.v2, total-products.v2, order-by.v2, search-fetch-previous, search-content, filter-navigator.v3, search-fetch-more)

Try again :grin:

[vtex-course-hub[bot]]

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:

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :white_check_mark: Use search-result-layout on the store.search :white_check_mark: Define search-result-layout :white_check_mark: Use search-result-layout.desktop on the search-result-layout :white_check_mark: Define search-result-layout.desktop :white_check_mark: Define search components