Want to open a popup by clicking the button in homepage. inside the popup form will be submitted using Ajax call
1 Answer
In layout file (change the layout as per your wish) cms_index_index.xml in Sathya/Popup/view/frontend/layout/cms_index_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block name="custom.popup.widget" template="Sathya_Popup::popup.phtml"/>
</referenceContainer>
</body>
</page>
And template file in Sathya/Popup/view/frontend/templates/popup.phtml
<h1>
<div class="subscribe-button-wrapper">
<a class="action-print" href="#" id="click-me">Custom popup</a>
</div>
</h1>
<div class="popup-modal">
<!-- if not using Ajax then please give the action controller URL here.-->
<form action="#" class="popup-form-data-submit">
<label>
Name:
<input type="text" name="name" id="name1">
</label>
<label>
Content Invoice:
<textarea name="content"></textarea>
</label>
<button type="submit">Submit</button>
</form>
</div>
<script type="text/x-magento-init">
{
"*": {
"Sathya_Popup/js/popup": { }
}
}
</script>
Javascript file in Sathya/Popup/view/frontend/web/js/popup.js
define(['jquery', 'Magento_Ui/js/modal/modal'], function ($, modal) {
'use strict';
$.widget('sathya.customWidgetPopupForm',{
options:{
PopupForms: '.popup-form-data-submit',
popupLink : '.action-print'
},
_create: function () {
console.log('popup-form-connected');
this._super();
let self = this;
let popupOptions = {
type: 'popup',
responsive: true,
innerScroll: true,
modalClass: 'custom_popup_box'
};
modal(popupOptions, this.options.PopupForms);
$(self.options.popupLink).on('click',function () {
$(self.options.PopupForms).modal('openModal');
});
$(self.options.PopupForms).on('submit',function (event) {
event.preventDefault();
alert('submited');
// use ajax function to save the data
// console.log($('.subscribe-form-data').serializeArray());
})
}
});
return $.sathya.customWidgetPopupForm;
});
