Iframe

📢 Don't fork this project. Use, contribute, or open issues using your feature request.

image

An app that makes it possible to render external iframes on a store

Configuration - standard Iframe

  1. Add the vtex.iframe to the theme's dependencies on the manifest.json
...
"dependencies": {
 ...
 "vtex.iframe": "0.x"
 ...
}
...
  1. Add the interface iframe to any custom page (Iframes are not allowed outside custom pages).

    ...
    "store.custom#about-us": {
       "blocks": [
         "flex-layout.row#about-us",
         "iframe"
       ]
     },
    
    "iframe": {
      "props": {
        "src": ""
      }
    },
    ...
Prop nameTypeDescriptionDefault value
srcStringSource address the iframe should rendernull
widthNumberWidth attribute of the iframenull
heightNumberHeight attribute of the iframenull

Configuration - dynamic Iframe

  1. Add the vtex.iframe to the theme's dependencies on the manifest.json
"dependencies": {
 ...
  "vtex.iframe": "0.x"
}
...
  1. Add the dynamicIframe block and its properties to the blocks.json file
"store.custom#locationPage":{
    "children":[
      "iframe.dynamic-src"
    ]
  },
"iframe.dynamic-src":{
  "props":{
      "dynamicSrc":"https://www.test.com/exampleStaticPathName/{dynamicParam1}/{dynamicParam2}/exampleStaticPageName",
      "width":"1920",
      "height":"1000",
      "title":"exampleStaticPageName iframe wrapper for {account}"
    }
  }
  1. register your new page in routes.json with appropriate parameters passed into the page url
"store.custom#locationPage":{
    "path": "/:param1/:param2/pagename"
  },
Prop nameTypeDescriptionDefault value
dynamicSrcStringiframe src with dynamic parameters from page URL enclosed in '{}'null
widthNumberWidth attribute of the iframenull
heightNumberHeight attribute of the iframenull
titleStringtitle attribute of the iframe tagnull

Customization

There is a .container handle that wraps the iframe, it's also possible to use blockClass