I have created a custom module. It basically displays a popup modal that prompts user to enter their ship-to location.
Below is my code:
Learningetcmodule.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Learning_ShiptoModal">
<sequence>
<module name="Magento_Theme"/>
</sequence>
</module>
</config>
Learning/view/frontend/layout/default.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="footer-container">
<!-- <block name="shipto.modal.wrapper" template="Vistar_ShiptoModal::shipto-prompt.phtml" class="MagentoFrameworkViewElementTemplate">
<block class="MagentoCmsBlockBlock" name="shipto-modal">
<arguments>
<argument name="block_id" xsi:type="string">shipto-modal</argument>
<argument name="default_states_view_model" xsi:type="object">VistarShiptoModalViewModelDefaultStatesViewModel</argument>
</arguments>
</block>
</block> -->
<block class="MagentoFrameworkViewElementTemplate" name="shipto-modal" template="Vistar_ShiptoModal::shipto-prompt.phtml">
<arguments>
<argument name="default_states_view_model" xsi:type="object">VistarShiptoModalViewModelDefaultStatesViewModel</argument>
</arguments>
</block>
</referenceContainer>
</body>
</page>
Learning/view/frontend/templates/shipto-prompt.phtml
<?php
/**
* @copyright Copyright (c) Vistar
*/
$viewModel = $block->getDefaultStatesViewModel();
?>
<div id="vistar-shipto-modal">
Please enter your ship to location:
<span><?= $viewModel->getStates() ?></span>
</div>
<script>
require(('Vistar_ShiptoModal/js/shipto-modal', 'domReady!'),function(){})
</script>
Learning/view/frontend/web/requirejs-config.js
var config = {
map: {
'*' : {
learningShiptoModal : 'Learning_ShiptoModal/js/shipto-modal'
}
}
};
Learning/view/frontend/web/js/shipto-modal.js
require((
'jquery',
'Magento_Ui/js/modal/modal',
'jquery/jquery.cookie',
'domReady!'
),
function($, modal) {
//Use cookie to display modal just once
//Display modal if no cookie is present
const DEFAULT_DAYS_TO_EXPIRE = 180;
let checkBannerCookie = $.cookie('cookie-shipto');
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
modalClass: 'm-shipto-modal',
buttons: ({
text: $.mage.__('Continue'),
class: 'a-btn a-btn--primary',
click: function () {
let date = new Date();
// use days param if set in init, otherwise use default days (180)
let numberOfDays = DEFAULT_DAYS_TO_EXPIRE;
date.setTime(date.getTime() + (numberOfDays*60*60*24*1000));
let expires = "; expires=" + date.toUTCString();
document.cookie = 'cookie-shipto' + "=" + true + expires + "; path=/";
let selected_state = $("#state :selected").text();
// jQuery.ajax({
// url: "/vendor/module/result/result",
// type: "POST",
// data: {height:height,weight:weight},
// success: function(response){
// console.log(response);
// }
// });
//close the modal
this.closeModal();
}
})
};
var popup = modal(options, $('#vistar-shipto-modal'));
$(document).ready(function() {
if (!checkBannerCookie) {
$(this).find('(value="58")').remove();
setTimeout(function() {
$('#vistar-shipto-modal').modal('openModal');
}, 2000);
}
});
});
My question is how can I pass this $("#state :selected").text()
to controller so I can add some logic to it?