VTEX Developer Portal

VTEX IO Sandbox Component

All ContributorsAll Contributors

Allows mounting arbitrary HTML content in extension points from the comfort and safety of an iframe.

Example block

  "sandbox.product": {
    "props": {
      "width": "200px",
      "height": "60px",
      "initialContent": "<script src='https://unpkg.com/[email protected]/dist/jquery.min.js'></script><h1 id='test'>initial</h1><script>function render(){ current = window.props.productQuery.product.items.findIndex(function(p){ return p.itemId === window.props.query.skuId }); if (current === -1) {current = 0}; $('#test').html(window.props.productQuery.product.items[current].sellers[0].commertialOffer.ListPrice)}; window.addEventListener('message', function(e){ console.log('got message in product', e.data, window.props); render();});</script>",
      "allowCookies": true
    }
  },
  "sandbox.order": {
    "props": {
      "width": "200px",
      "height": "60px",
      "initialContent": "<script>console.log('Current orderForm: ', window.props.orderForm)</script>",
      "allowCookies": true
    }
  },
  "sandbox#home": {
    "props": {
      "width": "200px",
      "height": "60px",
      "initialContent": "<h1 id='test'>home</h1><script>console.log(props, document.cookie); window.addEventListener('message', function(e){ console.log('got message in home', window.props) });</script>",
      "allowCookies": true
    }
  },
  "store.home": {
    "blocks": ["carousel#home", "shelf#home", "sandbox#home"]
  },
  "store.product": {
    "blocks": [
      "product-details#default",
      "sandbox#product"
    ]
  },

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

Updated 6 months ago


VTEX IO Sandbox Component


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.