Trigger modal after placing a product in minicart on Magento 2 The 2019 Stack Overflow...
Is 'stolen' appropriate word?
How to support a colleague who finds meetings extremely tiring?
For what reasons would an animal species NOT cross a *horizontal* land bridge?
Was credit for the black hole image misappropriated?
Circular reasoning in L'Hopital's rule
How do spell lists change if the party levels up without taking a long rest?
Intergalactic human space ship encounters another ship, character gets shunted off beyond known universe, reality starts collapsing
Is an up-to-date browser secure on an out-of-date OS?
How to determine omitted units in a publication
Sub-subscripts in strings cause different spacings than subscripts
Using dividends to reduce short term capital gains?
Word to describe a time interval
How to handle characters who are more educated than the author?
Homework question about an engine pulling a train
Working through the single responsibility principle (SRP) in Python when calls are expensive
Does Parliament hold absolute power in the UK?
60's-70's movie: home appliances revolting against the owners
What information about me do stores get via my credit card?
Drawing vertical/oblique lines in Metrical tree (tikz-qtree, tipa)
How did passengers keep warm on sail ships?
Loose spokes after only a few rides
The following signatures were invalid: EXPKEYSIG 1397BC53640DB551
Why doesn't a hydraulic lever violate conservation of energy?
How do you keep chess fun when your opponent constantly beats you?
Trigger modal after placing a product in minicart on Magento 2
The 2019 Stack Overflow Developer Survey Results Are In
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)In block getModel error?Magento 2: can't use materialize.js on my custom moduleHow is product data passed from a Block to knockout template?Conditionally Add Body Class Within Module Block?Magento 2 add custom attribute to container in layout.xmlOverride minicar sidebar price rendererMagento 1.9.1 I have added popup after clicking on addtocart button but the page is reloading before closing the popupAdding a modal after adding to cartHow to initialize a block loader on an element which is being loaded by knockout.js in Magento 2?Login form validation is working but other forms validation is not working
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0;
}
I need to show a modal after a product is placed inside cart. This is what i have so far.
This is my default.xml
<body>
<referenceContainer name="content">
<block class="MagentoFrameworkViewElementTemplate" name="minicart.lightwindow" template="Company_MiniCartLightWindow::minicart_lightWindow.phtml"/>
</referenceContainer>
</body>
This is my template
<div class="modal" id="add-to-cart-modal">
Hello word.
</div>
<script type="text/x-magento-init">
{
"[data-block='minicart']" : {
"Company_MiniCartLightWindow/js/view/minicart_lightwindow" : {}
}
}
</script>
finally this is my js file
define(["jquery/ui","jquery"], function(Component, $){
return function(config, element){
var minicart = $(element);
minicart.on('contentLoading', function () {
minicart.on('contentUpdated', function () {
alert('hello');
});
});
}
});
Not even the alert is triggered after adding product to cart. No errors on js require on console either.
Thank You.
magento2 cart javascript modal
asked Nov 11 '16 at 14:31
Christian Emanuel FrigoChristian Emanuel Frigo
4317
bumped to the homepage by Community♦ 3 mins 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 |
I need to show a modal after a product is placed inside cart. This is what i have so far.
This is my default.xml
<body>
<referenceContainer name="content">
<block class="MagentoFrameworkViewElementTemplate" name="minicart.lightwindow" template="Company_MiniCartLightWindow::minicart_lightWindow.phtml"/>
</referenceContainer>
</body>
This is my template
<div class="modal" id="add-to-cart-modal">
Hello word.
</div>
<script type="text/x-magento-init">
{
"[data-block='minicart']" : {
"Company_MiniCartLightWindow/js/view/minicart_lightwindow" : {}
}
}
</script>
finally this is my js file
define(["jquery/ui","jquery"], function(Component, $){
return function(config, element){
var minicart = $(element);
minicart.on('contentLoading', function () {
minicart.on('contentUpdated', function () {
alert('hello');
});
});
}
});
Not even the alert is triggered after adding product to cart. No errors on js require on console either.
Thank You.
magento2 cart javascript modal
asked Nov 11 '16 at 14:31
Christian Emanuel FrigoChristian Emanuel Frigo
4317
bumped to the homepage by Community♦ 3 mins 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 |
I need to show a modal after a product is placed inside cart. This is what i have so far.
This is my default.xml
<body>
<referenceContainer name="content">
<block class="MagentoFrameworkViewElementTemplate" name="minicart.lightwindow" template="Company_MiniCartLightWindow::minicart_lightWindow.phtml"/>
</referenceContainer>
</body>
This is my template
<div class="modal" id="add-to-cart-modal">
Hello word.
</div>
<script type="text/x-magento-init">
{
"[data-block='minicart']" : {
"Company_MiniCartLightWindow/js/view/minicart_lightwindow" : {}
}
}
</script>
finally this is my js file
define(["jquery/ui","jquery"], function(Component, $){
return function(config, element){
var minicart = $(element);
minicart.on('contentLoading', function () {
minicart.on('contentUpdated', function () {
alert('hello');
});
});
}
});
Not even the alert is triggered after adding product to cart. No errors on js require on console either.
Thank You.
magento2 cart javascript modal
asked Nov 11 '16 at 14:31
Christian Emanuel FrigoChristian Emanuel Frigo
4317
I need to show a modal after a product is placed inside cart. This is what i have so far.
This is my default.xml
<body>
<referenceContainer name="content">
<block class="MagentoFrameworkViewElementTemplate" name="minicart.lightwindow" template="Company_MiniCartLightWindow::minicart_lightWindow.phtml"/>
</referenceContainer>
</body>
This is my template
<div class="modal" id="add-to-cart-modal">
Hello word.
</div>
<script type="text/x-magento-init">
{
"[data-block='minicart']" : {
"Company_MiniCartLightWindow/js/view/minicart_lightwindow" : {}
}
}
</script>
finally this is my js file
define(["jquery/ui","jquery"], function(Component, $){
return function(config, element){
var minicart = $(element);
minicart.on('contentLoading', function () {
minicart.on('contentUpdated', function () {
alert('hello');
});
});
}
});
Not even the alert is triggered after adding product to cart. No errors on js require on console either.
Thank You.
magento2 cart javascript modal
magento2 cart javascript modal
asked Nov 11 '16 at 14:31
Christian Emanuel FrigoChristian Emanuel Frigo
4317
asked Nov 11 '16 at 14:31
Christian Emanuel FrigoChristian Emanuel Frigo
4317
asked Nov 11 '16 at 14:31
Christian Emanuel FrigoChristian Emanuel Frigo
4317
asked Nov 11 '16 at 14:31
Christian Emanuel FrigoChristian Emanuel Frigo
4317
asked Nov 11 '16 at 14:31
Christian Emanuel FrigoChristian Emanuel Frigo
4317
4317
bumped to the homepage by Community♦ 3 mins 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♦ 3 mins 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 |
1 Answer
1
active
oldest
votes
Try
define(["jquery/ui","jquery"], function(Component, $){
return function(config, element){
var minicart = $(element);
minicart.on('contentLoading', function () {
alert('hello');
});
}
});
A quick test on EE 2.1.2 product detail page shows that res.minicart return undefined therefore contentUpdated will not get triggered.
See
/vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js
ajaxSubmit: function(form) {
var self = this;
$(self.options.minicartSelector).trigger('contentLoading');
self.disableAddToCartButton(form);
$.ajax({
.....
success: function(res) {
......
if (res.minicart) {
$(self.options.minicartSelector).replaceWith(res.minicart);
$(self.options.minicartSelector).trigger('contentUpdated');
}
Update - I'm testing from a highly customized version of 2.1.2 so try the code below. (nesting 'contentUpdated' inside of 'contentLoading' will only get bind after the first call to 'contentUpdated' so you will need to add (maybe) 2 items before it will get triggered.
define(["jquery/ui","jquery"], function(Component, $){
return function(config, element){
var minicart = $(element);
minicart.on('contentLoading', function () {
alert('hello loading');
});
minicart.on('contentUpdated', function () {
alert('hello Updated');
});
}
});
answered Nov 11 '16 at 16:09
Renon StewartRenon Stewart
12.2k12044
Thank you very much It works but ( at least it enters to ContentUpdated it skips contentLoading) but my problem with this is now is that i am noticing that contentUpdated is call every time the page realoads, so if you didnt add a new product it will enter too.So maybe i am looking into the wrong trigger?
– Christian Emanuel Frigo
Nov 11 '16 at 17:46
If there is no item in cart it will not access ContentUpdated event. But if there is one item in cart i will access every time the page loads =(
– Christian Emanuel Frigo
Nov 11 '16 at 17:57
I would recommend looking into add to cart logic or build some additional logic like checking the number of item in and only display the alert if it change
– Renon Stewart
Nov 11 '16 at 18:12
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%2f145357%2ftrigger-modal-after-placing-a-product-in-minicart-on-magento-2%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try
define(["jquery/ui","jquery"], function(Component, $){
return function(config, element){
var minicart = $(element);
minicart.on('contentLoading', function () {
alert('hello');
});
}
});
A quick test on EE 2.1.2 product detail page shows that res.minicart return undefined therefore contentUpdated will not get triggered.
See
/vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js
ajaxSubmit: function(form) {
var self = this;
$(self.options.minicartSelector).trigger('contentLoading');
self.disableAddToCartButton(form);
$.ajax({
.....
success: function(res) {
......
if (res.minicart) {
$(self.options.minicartSelector).replaceWith(res.minicart);
$(self.options.minicartSelector).trigger('contentUpdated');
}
Update - I'm testing from a highly customized version of 2.1.2 so try the code below. (nesting 'contentUpdated' inside of 'contentLoading' will only get bind after the first call to 'contentUpdated' so you will need to add (maybe) 2 items before it will get triggered.
define(["jquery/ui","jquery"], function(Component, $){
return function(config, element){
var minicart = $(element);
minicart.on('contentLoading', function () {
alert('hello loading');
});
minicart.on('contentUpdated', function () {
alert('hello Updated');
});
}
});
answered Nov 11 '16 at 16:09
Renon StewartRenon Stewart
12.2k12044
Thank you very much It works but ( at least it enters to ContentUpdated it skips contentLoading) but my problem with this is now is that i am noticing that contentUpdated is call every time the page realoads, so if you didnt add a new product it will enter too.So maybe i am looking into the wrong trigger?
– Christian Emanuel Frigo
Nov 11 '16 at 17:46
If there is no item in cart it will not access ContentUpdated event. But if there is one item in cart i will access every time the page loads =(
– Christian Emanuel Frigo
Nov 11 '16 at 17:57
I would recommend looking into add to cart logic or build some additional logic like checking the number of item in and only display the alert if it change
– Renon Stewart
Nov 11 '16 at 18:12
add a comment |
Try
define(["jquery/ui","jquery"], function(Component, $){
return function(config, element){
var minicart = $(element);
minicart.on('contentLoading', function () {
alert('hello');
});
}
});
A quick test on EE 2.1.2 product detail page shows that res.minicart return undefined therefore contentUpdated will not get triggered.
See
/vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js
ajaxSubmit: function(form) {
var self = this;
$(self.options.minicartSelector).trigger('contentLoading');
self.disableAddToCartButton(form);
$.ajax({
.....
success: function(res) {
......
if (res.minicart) {
$(self.options.minicartSelector).replaceWith(res.minicart);
$(self.options.minicartSelector).trigger('contentUpdated');
}
Update - I'm testing from a highly customized version of 2.1.2 so try the code below. (nesting 'contentUpdated' inside of 'contentLoading' will only get bind after the first call to 'contentUpdated' so you will need to add (maybe) 2 items before it will get triggered.
define(["jquery/ui","jquery"], function(Component, $){
return function(config, element){
var minicart = $(element);
minicart.on('contentLoading', function () {
alert('hello loading');
});
minicart.on('contentUpdated', function () {
alert('hello Updated');
});
}
});
answered Nov 11 '16 at 16:09
Renon StewartRenon Stewart
12.2k12044
Thank you very much It works but ( at least it enters to ContentUpdated it skips contentLoading) but my problem with this is now is that i am noticing that contentUpdated is call every time the page realoads, so if you didnt add a new product it will enter too.So maybe i am looking into the wrong trigger?
– Christian Emanuel Frigo
Nov 11 '16 at 17:46
If there is no item in cart it will not access ContentUpdated event. But if there is one item in cart i will access every time the page loads =(
– Christian Emanuel Frigo
Nov 11 '16 at 17:57
I would recommend looking into add to cart logic or build some additional logic like checking the number of item in and only display the alert if it change
– Renon Stewart
Nov 11 '16 at 18:12
add a comment |
Try
define(["jquery/ui","jquery"], function(Component, $){
return function(config, element){
var minicart = $(element);
minicart.on('contentLoading', function () {
alert('hello');
});
}
});
A quick test on EE 2.1.2 product detail page shows that res.minicart return undefined therefore contentUpdated will not get triggered.
See
/vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js
ajaxSubmit: function(form) {
var self = this;
$(self.options.minicartSelector).trigger('contentLoading');
self.disableAddToCartButton(form);
$.ajax({
.....
success: function(res) {
......
if (res.minicart) {
$(self.options.minicartSelector).replaceWith(res.minicart);
$(self.options.minicartSelector).trigger('contentUpdated');
}
Update - I'm testing from a highly customized version of 2.1.2 so try the code below. (nesting 'contentUpdated' inside of 'contentLoading' will only get bind after the first call to 'contentUpdated' so you will need to add (maybe) 2 items before it will get triggered.
define(["jquery/ui","jquery"], function(Component, $){
return function(config, element){
var minicart = $(element);
minicart.on('contentLoading', function () {
alert('hello loading');
});
minicart.on('contentUpdated', function () {
alert('hello Updated');
});
}
});
answered Nov 11 '16 at 16:09
Renon StewartRenon Stewart
12.2k12044
Try
define(["jquery/ui","jquery"], function(Component, $){
return function(config, element){
var minicart = $(element);
minicart.on('contentLoading', function () {
alert('hello');
});
}
});
A quick test on EE 2.1.2 product detail page shows that res.minicart return undefined therefore contentUpdated will not get triggered.
See
/vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js
ajaxSubmit: function(form) {
var self = this;
$(self.options.minicartSelector).trigger('contentLoading');
self.disableAddToCartButton(form);
$.ajax({
.....
success: function(res) {
......
if (res.minicart) {
$(self.options.minicartSelector).replaceWith(res.minicart);
$(self.options.minicartSelector).trigger('contentUpdated');
}
Update - I'm testing from a highly customized version of 2.1.2 so try the code below. (nesting 'contentUpdated' inside of 'contentLoading' will only get bind after the first call to 'contentUpdated' so you will need to add (maybe) 2 items before it will get triggered.
define(["jquery/ui","jquery"], function(Component, $){
return function(config, element){
var minicart = $(element);
minicart.on('contentLoading', function () {
alert('hello loading');
});
minicart.on('contentUpdated', function () {
alert('hello Updated');
});
}
});
answered Nov 11 '16 at 16:09
Renon StewartRenon Stewart
12.2k12044
edited Nov 11 '16 at 16:16
answered Nov 11 '16 at 16:09
Renon StewartRenon Stewart
12.2k12044
answered Nov 11 '16 at 16:09
Renon StewartRenon Stewart
12.2k12044
answered Nov 11 '16 at 16:09
Renon StewartRenon Stewart
12.2k12044
12.2k12044
Thank you very much It works but ( at least it enters to ContentUpdated it skips contentLoading) but my problem with this is now is that i am noticing that contentUpdated is call every time the page realoads, so if you didnt add a new product it will enter too.So maybe i am looking into the wrong trigger?
– Christian Emanuel Frigo
Nov 11 '16 at 17:46
If there is no item in cart it will not access ContentUpdated event. But if there is one item in cart i will access every time the page loads =(
– Christian Emanuel Frigo
Nov 11 '16 at 17:57
I would recommend looking into add to cart logic or build some additional logic like checking the number of item in and only display the alert if it change
– Renon Stewart
Nov 11 '16 at 18:12
add a comment |
Thank you very much It works but ( at least it enters to ContentUpdated it skips contentLoading) but my problem with this is now is that i am noticing that contentUpdated is call every time the page realoads, so if you didnt add a new product it will enter too.So maybe i am looking into the wrong trigger?
– Christian Emanuel Frigo
Nov 11 '16 at 17:46
If there is no item in cart it will not access ContentUpdated event. But if there is one item in cart i will access every time the page loads =(
– Christian Emanuel Frigo
Nov 11 '16 at 17:57
I would recommend looking into add to cart logic or build some additional logic like checking the number of item in and only display the alert if it change
– Renon Stewart
Nov 11 '16 at 18:12
Thank you very much It works but ( at least it enters to ContentUpdated it skips contentLoading) but my problem with this is now is that i am noticing that contentUpdated is call every time the page realoads, so if you didnt add a new product it will enter too.So maybe i am looking into the wrong trigger?
– Christian Emanuel Frigo
Nov 11 '16 at 17:46
Thank you very much It works but ( at least it enters to ContentUpdated it skips contentLoading) but my problem with this is now is that i am noticing that contentUpdated is call every time the page realoads, so if you didnt add a new product it will enter too.So maybe i am looking into the wrong trigger?
– Christian Emanuel Frigo
Nov 11 '16 at 17:46
If there is no item in cart it will not access ContentUpdated event. But if there is one item in cart i will access every time the page loads =(
– Christian Emanuel Frigo
Nov 11 '16 at 17:57
If there is no item in cart it will not access ContentUpdated event. But if there is one item in cart i will access every time the page loads =(
– Christian Emanuel Frigo
Nov 11 '16 at 17:57
I would recommend looking into add to cart logic or build some additional logic like checking the number of item in and only display the alert if it change
– Renon Stewart
Nov 11 '16 at 18:12
I would recommend looking into add to cart logic or build some additional logic like checking the number of item in and only display the alert if it change
– Renon Stewart
Nov 11 '16 at 18:12
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%2f145357%2ftrigger-modal-after-placing-a-product-in-minicart-on-magento-2%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
