Я использую версию magento 2.3.Я делаю нестандартный модуль.В пользовательском модуле мне нужно 2 всплывающих окна (используя загрузочный модал).
Вот мой код js -
Код JS:
define(
[
'jquery',
'Magento_Ui/js/modal/modal',
'jquery/jquery.cookie',
],
function ($, Component) {
'use strict';
var mageJsComponent = function (data) {
var getData = JSON.stringify(data);
var jsongetData = JSON.parse(getData);
var height_value = jsongetData["height"];
var width_value = jsongetData["width"];
var coockie_value = jsongetData["coockieexpire"];
var coockie_value = coockie_value*3600;
$(document).ready(
function ($) {
console.log("ageverification.phtml : document loaded");
});
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
// buttons: [{}],
modalClass: 'custom_age_verfication',
responsiveClass: 'ageverification-poup'
};
$(document).keyup(function (e) {
if (e.keyCode == 27) {
return false;
}
});
$(document).ready(function () {
$(document).mousedown(function (e) {
return true;
});
if ($.cookie('status') != 1) {
var ageconf = document.getElementsByClassName('ageconf');
if (ageconf.length > 0) {
if (document.getElementById("popup").classList.contains('ageconf')) {
$(document).mousedown(function (e) {
return false;
});
}
}
var mdl = jQuery('.age-pop-up').modal(options);
jQuery('.age-pop-up').modal('openModal');
// Click on enter button
$('#enter').click(function () {
if (coockie_value == "") {
coockie_value = 1;
}
$.cookie('status', '1', {
expires: +coockie_value
});
jQuery('.age-pop-up').modal('closeModal');
window.location.reload();
// detect safari browser
if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
window.location.reload();
}
});
$('#no').click(function () {
if (coockie_value == "") {
coockie_value = 1;
}
$.cookie('status', '0', {
expires: +coockie_value
});
var mdl = jQuery('.not-verify').modal();
jQuery('.not-verify').modal('openModal');
jQuery('.age-pop-up').modal('closeModal');
jQuery('.age-pop-up.not-verify').show();
});
}
});
// end : pop-up age verification content
};
return mageJsComponent;
});
Файл phtml:
<div class="outer-bg">
<div id="popup" class="pop-cont age-pop-up ageconf">
<div class="verify">
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId($popupblockid)->toHtml(); ?>
<div class="buttons-set">
<a id="enter" class="button valid-age" title="<?php echo $agreebtn; ?>" href="#"><?php echo $agreebtn; ?></a>
<h4>Or</h4>
<a id="no" class="button not-valid-age" title="<?php echo $disagreebtn; ?>" href="#"><?php echo $disagreebtn; ?></a>
</div>
</div>
</div>
<div id="popup1" class="not-verify age-pop-up">
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId($disagreepopupblockid)->toHtml(); ?>
</div>
</div>
В консоли появляется сообщение об ошибке, когда я обновляю страницу в третий раз:
Uncaught TypeError: No method named "openModal"
at HTMLDivElement.<anonymous> (bootstrap.bundle.js:4795)
at Function.each (jquery.js:370)
at jQuery.fn.init.each (jquery.js:137)
at jQuery.fn.init._jQueryInterface [as modal] (bootstrap.bundle.js:4783)
at HTMLDocument.<anonymous> (ageverification.js:69)
at fire (jquery.js:3232)
at Object.add [as done] (jquery.js:3291)
at jQuery.fn.init.jQuery.fn.ready (jquery.js:3542)
at mageJsComponent (ageverification.js:38)
at main.js:31
Во время обновления отображается 1 модал, вво всплывающем окне есть 2 кнопки, одна - для подтверждения, а вторая - для выхода. Если нажать кнопку подтверждения, ее следует перенаправить на домашнюю страницу или, если нажать кнопку «Выход», появится второе всплывающее окно.