Adicionar Popup na Home do Magento2

Postado em.

1- Crie um bloco de conteúdo específico para os códigos do popup.

 

2- Com o editor do Magento desativado, você deve adicionar primeiramente a tag Div do conteúdo do popup.

<div id=”custom-popup-modal”>
ADICIONAR CONTEÚDO AQUI
</div>

O ID é essencial para o funcionamento do Popup. Adicione o conteúdo desejado dentro da tag Div.

 

3- O próximo passo é adicionar o script para o funcionamento do Popup. Segue abaixo:

<script>
require(
[
‘jquery’,
‘Magento_Ui/js/modal/modal’
],
function(
$,
modal
) {
var options = {
type: ‘popup’,
responsive: true,
innerScroll: true,
modalClass: ‘custom-popup-modal’,
buttons: [{
text: $.mage.__(‘Close’),
class: ”,
click: function () {
this.closeModal();
}
}]
};

var popup = modal(options, $(‘#custom-popup-modal’));

$( document ).ready(function() {
setTimeout(function(){ $(‘#custom-popup-modal’).modal(‘openModal’); }, 1000);
});
}
);
</script>

 

4- Temos também um código CSS de estilo recomendado abaixo:

<style>
.modal-popup._inner-scroll .modal-inner-wrap {
width: fit-content;
background: transparent !important;
box-shadow: unset;
margin: 20rem auto;
}
.modal-slide._inner-scroll .modal-header,.modal-popup._inner-scroll .modal-content {
padding: 0;
background: transparent !important;
}
.modal-popup.modal-slide .modal-footer {
display: none;
}
.modal-popup .action-close:before, .modal-slide .action-close:before {
color: white;
}
@media (max-width:480px){
.modal-popup._inner-scroll { left: 0; top: 10%; }
}
</style>

 

5- Salve o bloco. Você deve chamar este bloco na página da Home, através de Widget de bloco CMS.

 

 

0