Execute JavaScript code after swatches are displayed in category view
I'm trying to trigger custom event whenever Magento displays the product swatches in category view.
It looks like Magento uses ajax to load these swatches, they are not displayed on page load, they "pop" after a few moments. I need to add some custom JavaScript code after these swatches are actually displayed. So I thought the best way will be to trigger custom event just after Magento finishes to render the swatches. But I'm not sure how to do this correctly in Magento 2.
What I want to do is to trigger a custom event $(document).trigger('swatches-visible'); when a block of swatches is finally displayed on the page.
And then, an event handler will execute a function:
$(document).on('swatches-visible', function() {
doSomething();
});
That function doSomething() is already added via RequireJS in one of the template files:
<script type="text/javascript">
requirejs(['jquery'], function(jQuery) {
function doSomething()
{
// Here make some layout changes of the products list...
}
});
</script>
magento2 configurable-product swatches category-view
asked Oct 3 '16 at 11:58
zitixzitix
1,04562140
|
show 5 more comments
I'm trying to trigger custom event whenever Magento displays the product swatches in category view.
It looks like Magento uses ajax to load these swatches, they are not displayed on page load, they "pop" after a few moments. I need to add some custom JavaScript code after these swatches are actually displayed. So I thought the best way will be to trigger custom event just after Magento finishes to render the swatches. But I'm not sure how to do this correctly in Magento 2.
What I want to do is to trigger a custom event $(document).trigger('swatches-visible'); when a block of swatches is finally displayed on the page.
And then, an event handler will execute a function:
$(document).on('swatches-visible', function() {
doSomething();
});
That function doSomething() is already added via RequireJS in one of the template files:
<script type="text/javascript">
requirejs(['jquery'], function(jQuery) {
function doSomething()
{
// Here make some layout changes of the products list...
}
});
</script>
magento2 configurable-product swatches category-view
asked Oct 3 '16 at 11:58
zitixzitix
1,04562140
Are you loading your script via RequireJS? I ask this as you can tell Require to only load a script when a certain element has been rendered with x-magento-ini. See this section of the dev docs for more info - devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/…
– Ben Crook
Oct 3 '16 at 12:30
@Ben-Space48 I want to trigger custom event$(document).trigger('swatches-visible')when a block of swatches is finally displayed. And then, an event handler will execute a function:$(document).on('swatches-visible', function(e) { doSomething(); });That functiondoSomething()is already added via RequireJS in one of the template files. What you proposed sounds like a good solution but I'm not sure how to use it in my case. Isn't
– zitix
Oct 3 '16 at 15:08
Isn'tdata-mage-initexecuted only on page load? Note that the blocks of swatches for all products, e.g.<div class="swatch-opt-1822">...</div>, are displayed with a delay, not instantly on page load.
– zitix
Oct 3 '16 at 15:20
I knowdata-mage-initis,x-magento-initis different although I'm not sure if that is also only on page load (the dev docs don't mention). If it is page load then the only other method I can think of is to initialise the JS inside the swatch template. Require works in templates to so I don't see why that wouldn't work.
– Ben Crook
Oct 3 '16 at 15:33
Although JS inside a template isn't the cleanest method :(
– Ben Crook
Oct 3 '16 at 15:34
|
show 5 more comments
I'm trying to trigger custom event whenever Magento displays the product swatches in category view.
It looks like Magento uses ajax to load these swatches, they are not displayed on page load, they "pop" after a few moments. I need to add some custom JavaScript code after these swatches are actually displayed. So I thought the best way will be to trigger custom event just after Magento finishes to render the swatches. But I'm not sure how to do this correctly in Magento 2.
What I want to do is to trigger a custom event $(document).trigger('swatches-visible'); when a block of swatches is finally displayed on the page.
And then, an event handler will execute a function:
$(document).on('swatches-visible', function() {
doSomething();
});
That function doSomething() is already added via RequireJS in one of the template files:
<script type="text/javascript">
requirejs(['jquery'], function(jQuery) {
function doSomething()
{
// Here make some layout changes of the products list...
}
});
</script>
magento2 configurable-product swatches category-view
asked Oct 3 '16 at 11:58
zitixzitix
1,04562140
I'm trying to trigger custom event whenever Magento displays the product swatches in category view.
It looks like Magento uses ajax to load these swatches, they are not displayed on page load, they "pop" after a few moments. I need to add some custom JavaScript code after these swatches are actually displayed. So I thought the best way will be to trigger custom event just after Magento finishes to render the swatches. But I'm not sure how to do this correctly in Magento 2.
What I want to do is to trigger a custom event $(document).trigger('swatches-visible'); when a block of swatches is finally displayed on the page.
And then, an event handler will execute a function:
$(document).on('swatches-visible', function() {
doSomething();
});
That function doSomething() is already added via RequireJS in one of the template files:
<script type="text/javascript">
requirejs(['jquery'], function(jQuery) {
function doSomething()
{
// Here make some layout changes of the products list...
}
});
</script>
magento2 configurable-product swatches category-view
magento2 configurable-product swatches category-view
asked Oct 3 '16 at 11:58
zitixzitix
1,04562140
asked Oct 3 '16 at 11:58
zitixzitix
1,04562140
edited Oct 3 '16 at 15:25
zitix
asked Oct 3 '16 at 11:58
zitixzitix
1,04562140
asked Oct 3 '16 at 11:58
zitixzitix
1,04562140
asked Oct 3 '16 at 11:58
zitixzitix
1,04562140
1,04562140
Are you loading your script via RequireJS? I ask this as you can tell Require to only load a script when a certain element has been rendered with x-magento-ini. See this section of the dev docs for more info - devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/…
– Ben Crook
Oct 3 '16 at 12:30
@Ben-Space48 I want to trigger custom event$(document).trigger('swatches-visible')when a block of swatches is finally displayed. And then, an event handler will execute a function:$(document).on('swatches-visible', function(e) { doSomething(); });That functiondoSomething()is already added via RequireJS in one of the template files. What you proposed sounds like a good solution but I'm not sure how to use it in my case. Isn't
– zitix
Oct 3 '16 at 15:08
Isn'tdata-mage-initexecuted only on page load? Note that the blocks of swatches for all products, e.g.<div class="swatch-opt-1822">...</div>, are displayed with a delay, not instantly on page load.
– zitix
Oct 3 '16 at 15:20
I knowdata-mage-initis,x-magento-initis different although I'm not sure if that is also only on page load (the dev docs don't mention). If it is page load then the only other method I can think of is to initialise the JS inside the swatch template. Require works in templates to so I don't see why that wouldn't work.
– Ben Crook
Oct 3 '16 at 15:33
Although JS inside a template isn't the cleanest method :(
– Ben Crook
Oct 3 '16 at 15:34
|
show 5 more comments
Are you loading your script via RequireJS? I ask this as you can tell Require to only load a script when a certain element has been rendered with x-magento-ini. See this section of the dev docs for more info - devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/…
– Ben Crook
Oct 3 '16 at 12:30
@Ben-Space48 I want to trigger custom event$(document).trigger('swatches-visible')when a block of swatches is finally displayed. And then, an event handler will execute a function:$(document).on('swatches-visible', function(e) { doSomething(); });That functiondoSomething()is already added via RequireJS in one of the template files. What you proposed sounds like a good solution but I'm not sure how to use it in my case. Isn't
– zitix
Oct 3 '16 at 15:08
Isn'tdata-mage-initexecuted only on page load? Note that the blocks of swatches for all products, e.g.<div class="swatch-opt-1822">...</div>, are displayed with a delay, not instantly on page load.
– zitix
Oct 3 '16 at 15:20
I knowdata-mage-initis,x-magento-initis different although I'm not sure if that is also only on page load (the dev docs don't mention). If it is page load then the only other method I can think of is to initialise the JS inside the swatch template. Require works in templates to so I don't see why that wouldn't work.
– Ben Crook
Oct 3 '16 at 15:33
Although JS inside a template isn't the cleanest method :(
– Ben Crook
Oct 3 '16 at 15:34
Are you loading your script via RequireJS? I ask this as you can tell Require to only load a script when a certain element has been rendered with x-magento-ini. See this section of the dev docs for more info - devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/…
– Ben Crook
Oct 3 '16 at 12:30
Are you loading your script via RequireJS? I ask this as you can tell Require to only load a script when a certain element has been rendered with x-magento-ini. See this section of the dev docs for more info - devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/…
– Ben Crook
Oct 3 '16 at 12:30
@Ben-Space48 I want to trigger custom event
$(document).trigger('swatches-visible') when a block of swatches is finally displayed. And then, an event handler will execute a function: $(document).on('swatches-visible', function(e) { doSomething(); }); That function doSomething() is already added via RequireJS in one of the template files. What you proposed sounds like a good solution but I'm not sure how to use it in my case. Isn't– zitix
Oct 3 '16 at 15:08
@Ben-Space48 I want to trigger custom event
$(document).trigger('swatches-visible') when a block of swatches is finally displayed. And then, an event handler will execute a function: $(document).on('swatches-visible', function(e) { doSomething(); }); That function doSomething() is already added via RequireJS in one of the template files. What you proposed sounds like a good solution but I'm not sure how to use it in my case. Isn't– zitix
Oct 3 '16 at 15:08
Isn't
data-mage-init executed only on page load? Note that the blocks of swatches for all products, e.g. <div class="swatch-opt-1822">...</div>, are displayed with a delay, not instantly on page load.– zitix
Oct 3 '16 at 15:20
Isn't
data-mage-init executed only on page load? Note that the blocks of swatches for all products, e.g. <div class="swatch-opt-1822">...</div>, are displayed with a delay, not instantly on page load.– zitix
Oct 3 '16 at 15:20
I know
data-mage-init is, x-magento-init is different although I'm not sure if that is also only on page load (the dev docs don't mention). If it is page load then the only other method I can think of is to initialise the JS inside the swatch template. Require works in templates to so I don't see why that wouldn't work.– Ben Crook
Oct 3 '16 at 15:33
I know
data-mage-init is, x-magento-init is different although I'm not sure if that is also only on page load (the dev docs don't mention). If it is page load then the only other method I can think of is to initialise the JS inside the swatch template. Require works in templates to so I don't see why that wouldn't work.– Ben Crook
Oct 3 '16 at 15:33
Although JS inside a template isn't the cleanest method :(
– Ben Crook
Oct 3 '16 at 15:34
Although JS inside a template isn't the cleanest method :(
– Ben Crook
Oct 3 '16 at 15:34
|
show 5 more comments
2 Answers
2
active
oldest
votes
I used the event 'swatch.initialized' to fire a function after swatches are loaded in the product page:
$(document).on('swatch.initialized', function() {
// do something
})
The event is triggered in Magento_Swatches/js/swatch-renderer.js
$(this.element).trigger('swatch.initialized');
edited Jan 25 '18 at 16:24
Piyush
4,76872053
answered Jan 25 '18 at 15:35
Guillem LormanGuillem Lorman
5113
add a comment |
Try With This one.
<script type="text/javascript">
require(['jquery','Magento_Swatches/js/swatch-renderer'],function($,swatch){
$(document).on('swatch.initialized', function() {
function doSomething()
{
// Here make some layout changes of the products list...
}
});
</script>
answered yesterday
Aniket PrajapatiAniket Prajapati
527
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%2f139122%2fexecute-javascript-code-after-swatches-are-displayed-in-category-view%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
I used the event 'swatch.initialized' to fire a function after swatches are loaded in the product page:
$(document).on('swatch.initialized', function() {
// do something
})
The event is triggered in Magento_Swatches/js/swatch-renderer.js
$(this.element).trigger('swatch.initialized');
edited Jan 25 '18 at 16:24
Piyush
4,76872053
answered Jan 25 '18 at 15:35
Guillem LormanGuillem Lorman
5113
add a comment |
I used the event 'swatch.initialized' to fire a function after swatches are loaded in the product page:
$(document).on('swatch.initialized', function() {
// do something
})
The event is triggered in Magento_Swatches/js/swatch-renderer.js
$(this.element).trigger('swatch.initialized');
edited Jan 25 '18 at 16:24
Piyush
4,76872053
answered Jan 25 '18 at 15:35
Guillem LormanGuillem Lorman
5113
add a comment |
I used the event 'swatch.initialized' to fire a function after swatches are loaded in the product page:
$(document).on('swatch.initialized', function() {
// do something
})
The event is triggered in Magento_Swatches/js/swatch-renderer.js
$(this.element).trigger('swatch.initialized');
edited Jan 25 '18 at 16:24
Piyush
4,76872053
answered Jan 25 '18 at 15:35
Guillem LormanGuillem Lorman
5113
I used the event 'swatch.initialized' to fire a function after swatches are loaded in the product page:
$(document).on('swatch.initialized', function() {
// do something
})
The event is triggered in Magento_Swatches/js/swatch-renderer.js
$(this.element).trigger('swatch.initialized');
edited Jan 25 '18 at 16:24
Piyush
4,76872053
answered Jan 25 '18 at 15:35
Guillem LormanGuillem Lorman
5113
edited Jan 25 '18 at 16:24
Piyush
4,76872053
edited Jan 25 '18 at 16:24
Piyush
4,76872053
edited Jan 25 '18 at 16:24
Piyush
4,76872053
4,76872053
answered Jan 25 '18 at 15:35
Guillem LormanGuillem Lorman
5113
answered Jan 25 '18 at 15:35
Guillem LormanGuillem Lorman
5113
answered Jan 25 '18 at 15:35
Guillem LormanGuillem Lorman
5113
5113
add a comment |
add a comment |
Try With This one.
<script type="text/javascript">
require(['jquery','Magento_Swatches/js/swatch-renderer'],function($,swatch){
$(document).on('swatch.initialized', function() {
function doSomething()
{
// Here make some layout changes of the products list...
}
});
</script>
answered yesterday
Aniket PrajapatiAniket Prajapati
527
add a comment |
Try With This one.
<script type="text/javascript">
require(['jquery','Magento_Swatches/js/swatch-renderer'],function($,swatch){
$(document).on('swatch.initialized', function() {
function doSomething()
{
// Here make some layout changes of the products list...
}
});
</script>
answered yesterday
Aniket PrajapatiAniket Prajapati
527
add a comment |
Try With This one.
<script type="text/javascript">
require(['jquery','Magento_Swatches/js/swatch-renderer'],function($,swatch){
$(document).on('swatch.initialized', function() {
function doSomething()
{
// Here make some layout changes of the products list...
}
});
</script>
answered yesterday
Aniket PrajapatiAniket Prajapati
527
Try With This one.
<script type="text/javascript">
require(['jquery','Magento_Swatches/js/swatch-renderer'],function($,swatch){
$(document).on('swatch.initialized', function() {
function doSomething()
{
// Here make some layout changes of the products list...
}
});
</script>
answered yesterday
Aniket PrajapatiAniket Prajapati
527
answered yesterday
Aniket PrajapatiAniket Prajapati
527
answered yesterday
Aniket PrajapatiAniket Prajapati
527
answered yesterday
Aniket PrajapatiAniket Prajapati
527
527
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f139122%2fexecute-javascript-code-after-swatches-are-displayed-in-category-view%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
Are you loading your script via RequireJS? I ask this as you can tell Require to only load a script when a certain element has been rendered with x-magento-ini. See this section of the dev docs for more info - devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/…
– Ben Crook
Oct 3 '16 at 12:30
@Ben-Space48 I want to trigger custom event
$(document).trigger('swatches-visible')when a block of swatches is finally displayed. And then, an event handler will execute a function:$(document).on('swatches-visible', function(e) { doSomething(); });That functiondoSomething()is already added via RequireJS in one of the template files. What you proposed sounds like a good solution but I'm not sure how to use it in my case. Isn't– zitix
Oct 3 '16 at 15:08
Isn't
data-mage-initexecuted only on page load? Note that the blocks of swatches for all products, e.g.<div class="swatch-opt-1822">...</div>, are displayed with a delay, not instantly on page load.– zitix
Oct 3 '16 at 15:20
I know
data-mage-initis,x-magento-initis different although I'm not sure if that is also only on page load (the dev docs don't mention). If it is page load then the only other method I can think of is to initialise the JS inside the swatch template. Require works in templates to so I don't see why that wouldn't work.– Ben Crook
Oct 3 '16 at 15:33
Although JS inside a template isn't the cleanest method :(
– Ben Crook
Oct 3 '16 at 15:34