Custom Html Content

📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Custom Html Content

Recebe uma string de HTML e converte em tags HTML. A string pode iniciar na tag "html" e fechar ou então ter apenas um trecho de dentro do body.

Essa string pode conter os elementos script, link, styles na head ou qualquer outro elemento que venha dentro do body.

Se a string tiver as tags head e body, obrigatóriamente ela precisará ter a tag html para realizar o parse correto.

Configuração

📢 Caso o app não esteja global, é necessário clonar este repositório primeiro e realizar as seguintes configurações:

Altere o campo vendor para o nome da loja em que deseja instalar o app;

"vendor": "nomedaloja"

Rode os seguintes comandos;

vtex login {nomedaloja}

vtex use {workspace}

yarn install ou npm install

cd react

vtex setup --typings

cd ..

vtex publish

vtex link

Após isso já é possível seguir com a instalação

Instalação

1- Adicone o app no arquivo manifest.json de sua loja e o instale através do comando vtex install {VENDOR}[email protected];

"dependencies": {
  "{VENDOR}.custom-html-content": "0.x"
}

2- Declare o bloco custom-html-content e passe o conteudo html em formato texto.
Exemplos de como declarar os blocos do app:

Exemplo 1

"custom-html-content": {
  "props": {
    "htmlText": "<h1>Meu titulo antigo</h1><style>.destaque{font-size:40px}</style><span class='destaque'>texto com <strong>createelement</strong> novo.</span><script>alert('fim');if(document.getElementsByClassName('destaque').length > 0){ document.getElementsByClassName('destaque')[0].style.background = 'brown';} else {alert('não deu')}</script>"
  }
}

Exemplo 2

"custom-html-content": {
  "props": {
    "htmlText": "<html><head><script>function teste(){document.getElementsByClassName('destaque')[0].style.background = 'yellow';}alert('oi')</script></head><body class='bodyclass'><h1>Meu titulo</h1><style>.destaque{font-size:40px}</style><span class='destaque'>texto com <strong>createelement</strong> novo.</span><script>alert('fim');if(document.getElementsByClassName('destaque').length > 0){ document.getElementsByClassName('destaque')[0].style.background = 'brown';} else {alert('não deu')}</script></body></html>"
  }
}