Megamenu issue - Clicking menu opens category page for that menu in mobile in Magento2
I am stuck at the issue of responsive megamenu for mobile.
The issue is when I click on the subcategory to opens its child sub-categories the link gets clicked and gets redirected because of which seeing expanded menu gets difficult.
However I tried to locate the code due to which this happens.
Below is the code which is present in menu.js file:
_toggleMobileMode: function () {
$(this.element).off('mouseenter mouseleave');
this._on({
"click .ui-menu-item:has(a)": function (event) {
event.preventDefault();
var target = $(event.target).closest(".ui-menu-item");
if (!target.hasClass('level-top') || !target.has(".ui-menu").length) {
window.location.href = target.find('> a').attr('href');
}
},
"click .ui-menu-item:has(.ui-state-active)": function (event) {
this.collapseAll(event, true);
}
});
var subMenus = this.element.find('.level-top');
$.each(subMenus, $.proxy(function (index, item) {
var category = $(item).find('> a span').not('.ui-menu-icon').text(),
categoryUrl = $(item).find('> a').attr('href'),
menu = $(item).find('> .ui-menu');
this.categoryLink = $('<a>')
.attr('href', categoryUrl)
.text($.mage.__('All ') + category);
this.categoryParent = $('<li>')
.addClass('ui-menu-item all-category')
.html(this.categoryLink);
if (menu.find('.all-category').length === 0) {
menu.prepend(this.categoryParent);
}
}, this));
}
What I need is that when we click on pseudo element(which shows expansion and contraction) of the sub-category, its child sub-categories should be shown and clicking on sub-category anyways redirects to that particular sub-category
page.
Can someone please help me with this.
magento2 magento-2.1 luma-theme
asked 8 mins ago
NisithNisith
636
add a comment |
I am stuck at the issue of responsive megamenu for mobile.
The issue is when I click on the subcategory to opens its child sub-categories the link gets clicked and gets redirected because of which seeing expanded menu gets difficult.
However I tried to locate the code due to which this happens.
Below is the code which is present in menu.js file:
_toggleMobileMode: function () {
$(this.element).off('mouseenter mouseleave');
this._on({
"click .ui-menu-item:has(a)": function (event) {
event.preventDefault();
var target = $(event.target).closest(".ui-menu-item");
if (!target.hasClass('level-top') || !target.has(".ui-menu").length) {
window.location.href = target.find('> a').attr('href');
}
},
"click .ui-menu-item:has(.ui-state-active)": function (event) {
this.collapseAll(event, true);
}
});
var subMenus = this.element.find('.level-top');
$.each(subMenus, $.proxy(function (index, item) {
var category = $(item).find('> a span').not('.ui-menu-icon').text(),
categoryUrl = $(item).find('> a').attr('href'),
menu = $(item).find('> .ui-menu');
this.categoryLink = $('<a>')
.attr('href', categoryUrl)
.text($.mage.__('All ') + category);
this.categoryParent = $('<li>')
.addClass('ui-menu-item all-category')
.html(this.categoryLink);
if (menu.find('.all-category').length === 0) {
menu.prepend(this.categoryParent);
}
}, this));
}
What I need is that when we click on pseudo element(which shows expansion and contraction) of the sub-category, its child sub-categories should be shown and clicking on sub-category anyways redirects to that particular sub-category
page.
Can someone please help me with this.
magento2 magento-2.1 luma-theme
asked 8 mins ago
NisithNisith
636
add a comment |
I am stuck at the issue of responsive megamenu for mobile.
The issue is when I click on the subcategory to opens its child sub-categories the link gets clicked and gets redirected because of which seeing expanded menu gets difficult.
However I tried to locate the code due to which this happens.
Below is the code which is present in menu.js file:
_toggleMobileMode: function () {
$(this.element).off('mouseenter mouseleave');
this._on({
"click .ui-menu-item:has(a)": function (event) {
event.preventDefault();
var target = $(event.target).closest(".ui-menu-item");
if (!target.hasClass('level-top') || !target.has(".ui-menu").length) {
window.location.href = target.find('> a').attr('href');
}
},
"click .ui-menu-item:has(.ui-state-active)": function (event) {
this.collapseAll(event, true);
}
});
var subMenus = this.element.find('.level-top');
$.each(subMenus, $.proxy(function (index, item) {
var category = $(item).find('> a span').not('.ui-menu-icon').text(),
categoryUrl = $(item).find('> a').attr('href'),
menu = $(item).find('> .ui-menu');
this.categoryLink = $('<a>')
.attr('href', categoryUrl)
.text($.mage.__('All ') + category);
this.categoryParent = $('<li>')
.addClass('ui-menu-item all-category')
.html(this.categoryLink);
if (menu.find('.all-category').length === 0) {
menu.prepend(this.categoryParent);
}
}, this));
}
What I need is that when we click on pseudo element(which shows expansion and contraction) of the sub-category, its child sub-categories should be shown and clicking on sub-category anyways redirects to that particular sub-category
page.
Can someone please help me with this.
magento2 magento-2.1 luma-theme
asked 8 mins ago
NisithNisith
636
I am stuck at the issue of responsive megamenu for mobile.
The issue is when I click on the subcategory to opens its child sub-categories the link gets clicked and gets redirected because of which seeing expanded menu gets difficult.
However I tried to locate the code due to which this happens.
Below is the code which is present in menu.js file:
_toggleMobileMode: function () {
$(this.element).off('mouseenter mouseleave');
this._on({
"click .ui-menu-item:has(a)": function (event) {
event.preventDefault();
var target = $(event.target).closest(".ui-menu-item");
if (!target.hasClass('level-top') || !target.has(".ui-menu").length) {
window.location.href = target.find('> a').attr('href');
}
},
"click .ui-menu-item:has(.ui-state-active)": function (event) {
this.collapseAll(event, true);
}
});
var subMenus = this.element.find('.level-top');
$.each(subMenus, $.proxy(function (index, item) {
var category = $(item).find('> a span').not('.ui-menu-icon').text(),
categoryUrl = $(item).find('> a').attr('href'),
menu = $(item).find('> .ui-menu');
this.categoryLink = $('<a>')
.attr('href', categoryUrl)
.text($.mage.__('All ') + category);
this.categoryParent = $('<li>')
.addClass('ui-menu-item all-category')
.html(this.categoryLink);
if (menu.find('.all-category').length === 0) {
menu.prepend(this.categoryParent);
}
}, this));
}
What I need is that when we click on pseudo element(which shows expansion and contraction) of the sub-category, its child sub-categories should be shown and clicking on sub-category anyways redirects to that particular sub-category
page.
Can someone please help me with this.
magento2 magento-2.1 luma-theme
magento2 magento-2.1 luma-theme
asked 8 mins ago
NisithNisith
636
asked 8 mins ago
NisithNisith
636
asked 8 mins ago
NisithNisith
636
asked 8 mins ago
NisithNisith
636
asked 8 mins ago
NisithNisith
636
636
add a comment |
add a comment |
0
active
oldest
votes
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%2f261499%2fmegamenu-issue-clicking-menu-opens-category-page-for-that-menu-in-mobile-in-ma%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f261499%2fmegamenu-issue-clicking-menu-opens-category-page-for-that-menu-in-mobile-in-ma%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
