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

Insertando un Iframe en nuestra página institucional

:sparkles: Branch: iframe

Introducción

Un Iframe es un elemento HTML que permite la incorporación de otra página HTML en la actual. De esta forma, a partir del bloque Iframe es posible incluir contenidos de otras URLs para que se muestren en nuestra página. Es importante recordar que las URLs renderizadas por Iframe poseen su propio contexto, teniendo un historial de sesión y DOM independientes de su página personalizada.

ATENCIÓN: Solo se permiten Iframes dentro de templates de custom pages.

El bloque iframe tiene propiedades muy simples:

src: indica cuál URL iframe debe renderizar.
width: anchura del elemento iframe en píxeles.
height: altura del elemento iframe.

A continuación, vemos un ejemplo de implementación del bloque iframe:

"store.custom#about-us": {
   "blocks": [
     "flex-layout.row#about-us",
     "iframe"
   ]
 },

"iframe": {
  "props": {
    "src": "http://someURL.com/resource",
    "width": 100,
    "height": 200
  }
}

Actividad

Vamos a mostrar una publicación de Instagram en nuestra tienda:

Cambie el label de la pestaña "Electronics" a "Instagram".
En el contenido de la pestaña Instagram, borre el rich-text e incluya un bloque iframe .
En las props del iframe, muestre el contenido del link https://www.instagram.com/p/B37Zfd6FobU/embed en un container de 800px de anchura por 1000px de altura.

:information_source: Recuerde acceder a la documentación del Iframe si tiene alguna duda durante la actividad.

Resultado esperado:

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

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

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark:

Tests

:white_check_mark: Update the label from the tab-list.item#home2 to Instagram :white_check_mark: Add an iframe to the tab labeled "Instagram" :white_check_mark: Configure your iframe to show an Instagram post

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

¡Ha completado este paso con éxito!

Vaya al siguiente paso:

Construyendo un landing personalizado de búsqueda

tenmanufuku / store-framework