0

I want to show a popup when click on My Account header link. As I could not find any phtml file for My Account. Please anybody help me on this.

Any help would be appreciated.

0

You will have to override /magentorootfolder/vendor/magento/module-customer/view frontend/layout/default.xml either in your theme or extension & update below code

  <block class="Magento\Customer\Block\Account\Link" name="my-account-link">
      <arguments>
        <argument name="label" xsi:type="string" translate="true">My Account</argument>
        <argument name="class" xsi:type="string">my-account-link</argument>
        <argument name="sortOrder" xsi:type="number">110</argument>
      </arguments>
    </block>

Here I have added css class my-account-link on My Account Link (on which you have to trigger JS code for modal popup). For that add below JS Code

require(['jquery', 'Magento_Ui/js/modal/modal'], function($,modal){
 var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: 'mymodal1',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var popup = modal(options, $('.modal-popup'));
            $(".my-account-link").on('click',function(event){
                event.preventDefault();
             $('.modal-popup'). modal(options, $('.modal-popup')).modal('openModal');

            });


     });

Content that will be displayed in popup

<div class="modal-popup" >
    Demo of Modal POpup
</div>
  • May I know in which template file shall I add the modal popup. – Amy Aug 5 at 11:59
  • You can override /magentorootfolder/vendor/magento/module-theme/view/frontend/templates/html/header.phtml in your theme or extension and add this code. we are using header.phtml as it will call on every page. or you can create& add code in your own template file which will load on all pages – Mona Mehta Aug 5 at 12:06
  • Okay..will try and get back to you. – Amy Aug 5 at 12:20
  • If this solution worked for you, then please mark the answer as right, as it will help others also. – Mona Mehta Aug 5 at 12:33
  • Thanks.. It is working. – Amy Aug 5 at 14:38
0

Please Try this Tutorials

OR

Add this line for Whereyou want Account Click

  <a href="#" id="click-me">Click Me</a>

Popup Contents

<div id="popup-mpdal" >
    Place Your Contents Here
</div>

Add Script

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var popup = modal(options, $('#popup-mpdal'));
            $("#click-me").on('click',function(){
                $("#popup-mpdal").modal("openModal");
            });

        }
    );
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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