Need to trigger javascript modal on homepage only once
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0;
}
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.
magento2 javascript home-page modal-popup
asked Jun 29 '18 at 17:54
ScottScott
1939
bumped to the homepage by Community♦ 2 days ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
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.
magento2 javascript home-page modal-popup
asked Jun 29 '18 at 17:54
ScottScott
1939
bumped to the homepage by Community♦ 2 days ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
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.
magento2 javascript home-page modal-popup
asked Jun 29 '18 at 17:54
ScottScott
1939
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.
magento2 javascript home-page modal-popup
magento2 javascript home-page modal-popup
asked Jun 29 '18 at 17:54
ScottScott
1939
asked Jun 29 '18 at 17:54
ScottScott
1939
edited Jun 29 '18 at 18:11
Scott
asked Jun 29 '18 at 17:54
ScottScott
1939
asked Jun 29 '18 at 17:54
ScottScott
1939
asked Jun 29 '18 at 17:54
ScottScott
1939
1939
bumped to the homepage by Community♦ 2 days ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
bumped to the homepage by Community♦ 2 days ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
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);
});
};
}
answered Jun 30 '18 at 15:40
Andrew RydenAndrew Ryden
616
add a comment |
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_preprocessedcontentclean
pub/staticcontentdeploy 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 = MagentoFrameworkAppObjectManager::getInstance(); ?>
<?php $customerSession = $objectManager->get('MagentoCustomerModelSession'); ?>
<?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;?>
answered Jun 30 '18 at 21:26
PЯINCƏPЯINCƏ
8,41431146
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
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f231892%2fneed-to-trigger-javascript-modal-on-homepage-only-once%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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);
});
};
}
answered Jun 30 '18 at 15:40
Andrew RydenAndrew Ryden
616
add a comment |
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);
});
};
}
answered Jun 30 '18 at 15:40
Andrew RydenAndrew Ryden
616
add a comment |
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);
});
};
}
answered Jun 30 '18 at 15:40
Andrew RydenAndrew Ryden
616
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);
});
};
}
answered Jun 30 '18 at 15:40
Andrew RydenAndrew Ryden
616
answered Jun 30 '18 at 15:40
Andrew RydenAndrew Ryden
616
answered Jun 30 '18 at 15:40
Andrew RydenAndrew Ryden
616
answered Jun 30 '18 at 15:40
Andrew RydenAndrew Ryden
616
616
add a comment |
add a comment |
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_preprocessedcontentclean
pub/staticcontentdeploy 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 = MagentoFrameworkAppObjectManager::getInstance(); ?>
<?php $customerSession = $objectManager->get('MagentoCustomerModelSession'); ?>
<?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;?>
answered Jun 30 '18 at 21:26
PЯINCƏPЯINCƏ
8,41431146
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
add a comment |
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_preprocessedcontentclean
pub/staticcontentdeploy 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 = MagentoFrameworkAppObjectManager::getInstance(); ?>
<?php $customerSession = $objectManager->get('MagentoCustomerModelSession'); ?>
<?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;?>
answered Jun 30 '18 at 21:26
PЯINCƏPЯINCƏ
8,41431146
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
add a comment |
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_preprocessedcontentclean
pub/staticcontentdeploy 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 = MagentoFrameworkAppObjectManager::getInstance(); ?>
<?php $customerSession = $objectManager->get('MagentoCustomerModelSession'); ?>
<?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;?>
answered Jun 30 '18 at 21:26
PЯINCƏPЯINCƏ
8,41431146
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_preprocessedcontentclean
pub/staticcontentdeploy 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 = MagentoFrameworkAppObjectManager::getInstance(); ?>
<?php $customerSession = $objectManager->get('MagentoCustomerModelSession'); ?>
<?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;?>
answered Jun 30 '18 at 21:26
PЯINCƏPЯINCƏ
8,41431146
edited Jul 11 '18 at 23:09
answered Jun 30 '18 at 21:26
PЯINCƏPЯINCƏ
8,41431146
answered Jun 30 '18 at 21:26
PЯINCƏPЯINCƏ
8,41431146
answered Jun 30 '18 at 21:26
PЯINCƏPЯINCƏ
8,41431146
8,41431146
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
add a comment |
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
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
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
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
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
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
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
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f231892%2fneed-to-trigger-javascript-modal-on-homepage-only-once%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
