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
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.