Landing Page na VTEX

Para utilizar a Landing Page da BonifiQ basta criar uma nova página dentro da loja virtual, como é feito com qualquer Landing Page na VTEX. É necessário, no entanto, que essa página contenha:

- Script da BonifiQ instalado na página. Normalmente o script é instalado em todo o site via Tag Manager, então não há necessidade de incluí-lo novamente.

- Criar uma nova página na loja virtual com cabeçalho e rodapé padrão mas cujo "miolo" possui uma div fornecida pela BonifiQ

Quando nosso script detecta a div ele carrega a Landing Page automaticamente.

Na VTEX, a execução desses passos pode ser feita pela sua agência ou time técnico.

Criar página no VTEX IO:

- Dentro da pasta store/blocks crie um novo arquivo jsonc. Essa será nossa Landing Page. No exemplo abaixo, criamos um novo arquivo chamado bq-program-points.jsonc

- Dentro do novo arquivo criado, inclua um layout padrão para a página. O importante é que dentro desse layout exista uma div (rich-text) que contenha a class (blockClass) "bq-landingpage-loading"

{
  "rich-text#title-bq-program-points": {
    "props": {
      "text": "Por favor aguarde...",
      "blockClass": "bq-landingpage-loading"
    }
  },
  "store.custom#bq-program-points": {
    "blocks": [
      "flex-layout.row#bq-program-points"
    ]
  },
  "flex-layout.row#bq-program-points": {
    "children": [
      "flex-layout.col#text-bq-program-points"
    ]
  },
  "flex-layout.col#text-bq-program-points": {
    "children": [
      "rich-text#title-bq-program-points"
    ],
    "props": {
      "blockclass": "textColumn",
      "preventVerticalStretch": true
    }
  }
}

- Agora, altere o arquivo routes.json para que contenha o link para a nova página criada

 "store.custom#bq-program-points": {
    "path": "/bq-program-points"
  }

Outras formas de incluir a Landing Page

O modelo acima é a forma mais simples de gerar a Landing Page na VTEX, via IO, mas se você precisar fazer isso de outra forma, basta garantir que:

- O script (bqloader.js) está presente no site. Ele pode ser obtido em https://app.bonifiq.com.br/integration/tagmanager

- Uma div com o id=bq-landingpage

<div id="bq-landingpage"></div>