I want to display Custom Notice message in Popup on page load in Checkout page.
-
Hello @Fena do you want to add this message oin every page load?– Waqar AliMay 24, 2021 at 7:20
-
@WaqarAli No, i just want display on checkout page only.– quickshiftinMay 24, 2021 at 7:21
-
are you using magento default checkout or any 3rd party extension?– Gohil RajeshMay 24, 2021 at 8:53
Add a comment
|
2 Answers
simply add popup code in onepage.phtml
override this file in your theme
/vendor/magento/module-checkout/view/frontend/templates/onepage.phtml
to
/app/design/frontend/Your/Theme/Magento_Checkout/templates/onepage.phtml
and add below code
require([
'jquery',
'Magento_Ui/js/modal/alert'
], function($){
return function (){
$(document).on("ready",function (){
alert({
title: $.mage.__('Some title'),
content: $.mage.__('Some content'),
actions: {
always: function(){}
}
});
});
answered May 24, 2021 at 8:57
Create a Custom Module as Follows
Vendor\ModuleName\registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Vendor_ModuleName',
__DIR__
);
then
Vendor\ModuleName\etc\module.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="Vendor_ModuleName" setup_version="1.0.0">
<sequence>
<module name="Magento_Checkout"/>
</sequence>
</module>
</config>
Override checkout_index_index.xml in your module and define your own shipping component
pp/code/Vendor/ModuleName/view/frontend/layout/checkout_index_index.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<block class="Magento\Framework\View\Element\Template" after="-" name="custom_popup" template="Vendor_ModuleName::popup.phtml" />
</referenceBlock>
</body
nexlty in your
Vendor\ModuleName\view\frontend\templates\popup.phtml
<script type="text/x-magento-init">
{
"*": {
"customPopup" : {)
}
}
</script>
Now in your
Vendor\ModuleName\view\frontend\requirejs-config.js
var config = {
map: {
'*': {
customPopup: 'Vendor_ModuleName/js/popup' }
}
}
Now Create a Logic of Ajax Request in Your Js file
Vendor\ModuleName\view\frontend\web\js\sendSms.js
define([
'jquery',
'Magento_Ui/js/modal/alert'
], function($){
return function (){
$(document).on("ready",function (){
alert({
title: $.mage.__('Some title'),
content: $.mage.__('Some content'),
actions: {
always: function(){}
}
});
});
}