Magento – Need to trigger javascript modal on homepage only once

home-pagejavascriptmagento2modal-popup

We want to have the registration popup come up on (only) our homepage whenever a customer has not visited before. I think I can chase down the information on setting a cookie for the one-time behavior, but I'm trying to figure out how to inject the javascript necessary to call the existing cleversoft social-login modal.

The current modal is triggered by clicking a 'Create Account' link on the header bar which appears to call the following function:

        $('.registerpopup').on('click',function(event){
            qsModal_l.modal('closeModal');
            qsModal_r.modal('openModal');
        });

Presumably the first line just makes sure it isn't already open and since I want to do this on page load if the cookie is not already set, the modal would not be open so I'm assuming I only need to call the second line:

            qsModal_r.modal('openModal');

So basically I want to make sure that the cleversoft javascript is loaded into the page then call this function on only the homepage, but I'm not sure to go about it.

I see discussions about adding a javascript source to the portion of cms_index_index.xml and/or the design portion of the content->page if I put the code in a .js file, but I'm not sure how to reference such a js file if I added it to the theme's web/js directory.

I also see comments about loading such a file with require.js but I'm not sure if calling a single function requires that much coding. (keeping in mind I also need to do the cookie check though, maybe it is?)

So what is the 'best practices' way of doing this sort of thing from the home page?

EDIT:
It appears the modal vars are local scope, but they can be accessed via the container. So I have a javascript file similar to this for just testing the ability to open the modal as app/design/frontend/Cleversoft/custom/web/js/regpopup.js:

require(["jquery"],function($) {
    $(document).ready(function() {
        setTimeout(function() {
            $('div#zoo-register-form').modal('openModal');
        }, 1000);
    });
});

Now I need to know how to add a reference to load that to the of the layout.

Best Answer

The best way to add JS is with requirejs.

To add your js via Requirejs in homepage, then you run your script just ONCE :

Your js file is: regpopup.js

app/design/frontend/Cleversoft/custom/requirejs-config.js

var config = {
    map: {
        '*': {
            myscript: 'js/regpopup'
        }
    }
};

app/design/frontend/Cleversoft/custom/web/js/regpopup.js

define(['jquery'], function($){
   "use strict";
       return function myscript()
       {
           alert('hello Modal');
           $(document).ready(function() {
               setTimeout(function() {
                   $('div#zoo-register-form').modal('openModal');
               }, 1000);
           });
       }
});

app/design/frontend/Cleversoft/custom/Magento_Cms/templates/{yourfile}.phtml

<script type="text/javascript">
    require(['jquery', 'mage/cookies', 'myscript'], function($, myscript) {
        if (! $.cookie('cookiemodal')) { //check if cookiemodal doesn't exist
            $.cookie('cookiemodal', 'ok'); //we set a cookie name="cookiemodal" value="ok"
            myscript();
        }
    });
</script>

Info: don't forget to :

  • clean the cache

  • clean var/view_preprocessed content

  • clean pub/static content

  • deploy the static content = php bin/magento setup:static-content:deploy -f

Update:

To execute the js part just if customer is logged in: in {yourfile}.phtml

<?php $objectManager = \Magento\Framework\App\ObjectManager::getInstance(); ?>
<?php $customerSession = $objectManager->get('Magento\Customer\Model\Session'); ?>
<?php if($customerSession->isLoggedIn()) : ?>
    <script type="text/javascript">
        require(['jquery', 'mage/cookies', 'myscript'], function($, myscript) {
            if (! $.cookie('cookiemodal')) { //check if cookiemodal doesn't exist
                $.cookie('cookiemodal', 'ok'); //we set a cookie name="cookiemodal" value="ok"
            myscript();
            }
        });
    </script>   
<?php endif;?>
Related Topic