Iframe by vtex

${"base64":" ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square"}}$

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

{"base64":" ","img":{"width":354,"height":636,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":184249,"url":"https://user-images.githubusercontent.com/18701182/67055752-abcb0500-f11f-11e9-8c24-50234214d474.png"}}

Configuration - standard Iframe

Add the vtex.iframe to the theme's dependencies on the manifest.json


_10"dependencies": {
_10 "vtex.iframe": "0.x"
_10}

Add the interface iframe to any custom page (Iframes are not allowed outside custom pages).


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

Prop name	Type	Description	Default value
`src`	String	Source address the iframe should render	`null`
`width`	Number	Width attribute of the iframe	`null`
`height`	Number	Height attribute of the iframe	`null`
`allow`	String	allow attribute of the iframe	`null`

Configuration - dynamic Iframe

Add the vtex.iframe to the theme's dependencies on the manifest.json


_10"dependencies": {
_10  "vtex.iframe": "0.x"
_10}

Add the dynamicIframe block and its properties to the blocks.json file


_14{
_14  "store.custom#locationPage": {
_14    "children": ["iframe.dynamic-src"]
_14  },
_14  "iframe.dynamic-src": {
_14    "props": {
_14      "dynamicSrc": "https://www.test.com/exampleStaticPathName/{dynamicParam1}/{dynamicParam2}/exampleStaticPageName",
_14      "width": "1920",
_14      "height": "1000",
_14      "title": "exampleStaticPageName iframe wrapper for {account}",
_14      "allow": "geolocation"
_14    }
_14  }
_14}


_10{
_10  "store.custom#locationPage": {
_10    "path": "/:param1/:param2/pagename"
_10  }
_10}

Prop name	Type	Description	Default value
`dynamicSrc`	String	iframe src with dynamic parameters from page URL enclosed in '{}'	`null`
`width`	Number	Width attribute of the iframe	`null`
`height`	Number	Height attribute of the iframe	`null`
`title`	String	title attribute of the iframe	`null`
`allow`	String	allow attribute of the iframe	`null`
`id`	String	ID attribute of the iframe	`null`
`className`	String	class attribute of the iframe	`null`
`onLoad`	String	onLoad attribute of the iframe	`null`
`srcAccount`	Object	Object with account name and src	`null`

srcAccount

Using srcAccount


_12  "iframe#logout": {
_12    "props": {
_12      "src": "//www.mywebsiteprod.com/logout",
_12      "srcAccount": {
_12        "mywebsiteprod": "//www.mywebsite.com/logout",
_12        "mywebsiteqa": "//qa.mywebsite.com/logout"
_12      },
_12      "onLoad": "setTimeout(() => {window.location.href='/'}, 5000)",
_12      "className": "iframeLogout",
_12      "id": "iframeLogout"
_12    }
_12  },

Customization

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