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

Inserting an Iframe on our about us page

:sparkles: Branch: iframe

Introduction

An Iframe is a HTML element that allows the incorporation of another HTML page to the current one. Therefore, using the Iframe block, you can embed content from other URLs and display them on your page. It's important to remember that URLs rendered by Iframe have their own context, with independent session history and DOMs.

WARNING: Iframes are only allowed on custom page templates.

The iframe block has very simple properties:

src: shows which URL should be rendered by the iframe
width: pixel width of the iframe element
height: height of the iframe element

Below, we can see an implementation example of the iframe block:

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

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

Activity

Let's display an Instagram post on your store page:

Change the label of the "Electronics" tab to "Instagram";
In the Instagram tab's content, delete the rich-text and include an iframe block;
In the iframe props, display the following link content in a 800px-wide by 1000px-high container: https://www.instagram.com/p/B973Qp8BacC/embed

:information_source: Remember to access the Iframe documentation if you have any questions during this activity.

Expected result:

:no_entry_sign: Are you lost?

Is there any problem with this step? What about sending us a feedback? :pray:

Submit feedback

If you're still unsure as to how to send your answers, click here.

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

You have successfully completed this step!

Go to the next step!

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

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

:white_check_mark: Getting the file :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

Totonno / store-framework