Pop-up para vtex IO

VTEX in your native language 🌎 Português
1

Olá boa tarde, boa noite, precisava saber se ja tem algum componente nativo para pop-up na vtex IO.
Cheguei a fazer um modal pra simular 1 popup, e como modal ele sempre aparece mesmo quando clicado no X ou fechado de outra forma, sempre que recarrega a pagina ele reaparece, teria outra forma de fazer?

2

Olá, já tentou usar o componente de modal da vtex: GitHub - vtex-apps/modal-layout: The Modal Layout app provides blocks that can help you create modals in your store.

verifique se a prop trigger pode te ajudar nesse caso.

3

Boa noite, tudo bem? Então essa parte do trigger eu ja fiz, o que ocorre é que sempre que da reload na pagina o pop-up aparece de novo, e eu gostaria de colocar no cache ou algo parecido

4

tentou o load-session?

"drawer-trigger": {
"props": {
"trigger": "load-session"
}
}
5

Vou testar, muito obrigado meu querido, se nada der certo volto aqui

6

Testei e continua acontecendo o mesmo comportamento

7

Oque voce poderia fazer nesse caso entao, seria um componente customizado que irá fazer essa verificação, voce pode usar o local storage como exemplo:

import React, { useEffect, useState } from 'react'
import { ExtensionPoint } from 'vtex.render-runtime'
import { Modal } from 'vtex.styleguide'

export const NEWSLETTER_MODAL_LOCALSTORAGE_KEY = 'modal-newsletter'

export default function CustomModalNewsletter() {
  const [isOpen, setOpen] = useState(false)

  useEffect(() => {
    const localstorageKey = localStorage.getItem(
      NEWSLETTER_MODAL_LOCALSTORAGE_KEY
    )

    if (!localstorageKey) {
      setTimeout(() => {
        setOpen(true)
      }, 5000)
    }
  }, [])

  function onClose() {
    localStorage.setItem(NEWSLETTER_MODAL_LOCALSTORAGE_KEY, 'true')
    setOpen(false)
  }

  return (
    <Modal
      isOpen={isOpen}
      showCloseIcon
      closeOnEsc
      centered
      onClose={() => onClose()}
    >
      <div>
        <ExtensionPoint id="flex-layout.row" />
      </div>
    </Modal>
  )
}
8

interessante, agora preciso saber como criar um componente customizado… Obrigado pela ajuda meu caro

9
10

Beleza, irei assistir muito obrigado novamente