1

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.

1

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;?>
  • Thanks, that last part with how to include it in the template was the piece that was missing in all of the dozens of examples I found. It didn't do me a hell of a lot of good to get the syntax right for the requirejs or config files if I couldn't actually call a function in the right place ;) – Scott Jul 11 '18 at 15:43
  • woops, spoke to soon. Using example as shown I get: "Uncaught TypeError: myscript is not a function" in the phtml where myscript(); is called. – Scott Jul 11 '18 at 18:28
  • I think I got this part working, but now I'm trying to add a check to see if the customer is logged in and can't find a single working example that I can figure out how to piece into this. – Scott Jul 11 '18 at 19:15
  • Please, Look my update – PЯINCƏ Jul 11 '18 at 23:09
  • The method examples I saw that included references directly to the objectManager inevitably attracted multiple comments warning "don't directly access the objectManager" – Scott Jul 12 '18 at 20:46
0

You can add your script to the <head></head> block in your theme under Magento_Cms/frontend/layout/cms_index_index.xml. Then just make sure your script is checking for the cookie value you have set. If you haven't figured the cookie part out I can update this answer to include that part.

app/design/YourTheme/ThemePackage/Magento_Cms/cms_index_index.xml OR vendor/yourtheme/layout/Magento_Cms/cms_index_index.xml

Add

<head>
    <script src="Vendor_Modulename::js/your-js.js"/>
</head>

The script will be loaded when the homepage set in the CMS is loaded and your script will run. Modify your script to return a function to make sure it runs.

define(
    'jquery'
, function ($) {
    'use strict';

    return function() {
        $(document).ready(function() {
            //Check for cookie first!
            setTimeout(function() {
                $('div#zoo-register-form').modal('openModal');
            }, 1000);
        });
    };
}

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.