0

I want to display Custom Notice message in Popup on page load in Checkout page.

3
  • Hello @Fena do you want to add this message oin every page load?
    – Waqar Ali
    May 24, 2021 at 7:20
  • @WaqarAli No, i just want display on checkout page only. May 24, 2021 at 7:21
  • are you using magento default checkout or any 3rd party extension? May 24, 2021 at 8:53

2 Answers 2

1

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(){}
           }
        });            
});
    
1

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(){}
           }
        });            
        });
    }
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.