Iframe
An app that makes it possible to render external iframes on a store.
Configuration - standard Iframe
- Add the
vtex.iframe
to the theme's dependencies on themanifest.json
"dependencies": {
"vtex.iframe": "0.x"
}
- 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 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 themanifest.json
"dependencies": {
"vtex.iframe": "0.x"
}
- 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}",
"allow": "geolocation"
}
}
}
- register your new page in routes.json with appropriate parameters passed into the page url
{
"store.custom#locationPage":{
"path": "/:param1/:param2/pagename"
}
}
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 |
Customization
There is a .container
handle that wraps the iframe, it's also possible to use blockClass
.