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?
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.
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
tentou o load-session?
"drawer-trigger": {
"props": {
"trigger": "load-session"
}
}
Vou testar, muito obrigado meu querido, se nada der certo volto aqui
Testei e continua acontecendo o mesmo comportamento
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>
)
}
interessante, agora preciso saber como criar um componente customizado… Obrigado pela ajuda meu caro
Beleza, irei assistir muito obrigado novamente