All things Shopify and commerce
Hi fellow developers, thank you for your help.
1. I published French language. Get automatic URL rukatech.de/fr
2. When I am on the .de version everything works fine. On .de/fr the main menu doesn't work. It works on mobile but not on desktop. How it "works" is in the video.
Online store is here. https://rukatech-filter.de/
One think I noticed on .de version. Notice the <a href="#">
On de/fr version. notice the <a href="/fr#".
That is probably at least a part of the problem.
In Shopify Navigation is the top link "Fabricant" set to # so I can use it only to open up the rest of the navigation.
This is a code for the theme. header. This is for the whole picture. Below the snippet there is a part I suspect is the problematic one.
theme.headerNav = function() { var e, t, i, n, o = "#HeaderWrapper", s = "#SiteHeader", a = "#LogoContainer img", r = ".megamenu", c = ".site-navigation", l = ".site-nav__item", d = ".site-nav__link--has-dropdown", h = ".site-nav__dropdown-link--second-level", u = ".site-nav__compress-menu", p = '[data-type="nav"]', m = '[data-type="search"]', f = { hasDropdownClass: "site-nav--has-dropdown", hasSubDropdownClass: "site-nav__deep-dropdown-trigger", dropdownActive: "is-focused", headerCompressed: "header-wrapper--compressed", overlay: "header-wrapper--overlay", overlayStyle: "is-light" }, v = { namespace: ".siteNav", wrapperOverlayed: !1, stickyEnabled: !1, stickyActive: !1, subarPositionInit: !1, threshold: 0 }; function g() { theme.settings.overlayHeader && document.querySelector(".header-section").classList.add("header-section--overlay"); var t = theme.config.bpSmall ? document.querySelector('.site-header__element--sub[data-type="search"]') : document.querySelector('.site-header__element--sub[data-type="nav"]'); if (t) { var i = t.offsetHeight; 0 !== i && document.documentElement.style.setProperty("--header-padding-bottom", i + "px"), v.subarPositionInit || (e.classList.add("header-wrapper--init"), v.subarPositionInit = !0) } } function y() { document.querySelector(".header-section").style.position = "relative" } function S() { v.stickyEnabled && !v.forceStopSticky && requestAnimationFrame(b) } function b() { if (window.scrollY > v.threshold) !v.stickyActive && (i && theme.utils.prepareTransition(i), n && theme.utils.prepareTransition(n), v.stickyActive = !0, e.classList.add(f.headerCompressed), v.wrapperOverlayed && e.classList.remove(f.overlayStyle), document.dispatchEvent(new CustomEvent("headerStickyChange"))); else { if (!v.stickyActive) return; i && theme.utils.prepareTransition(i), n && theme.utils.prepareTransition(n), v.stickyActive = !1, v.threshold = e.getBoundingClientRect().top, e.classList.remove(f.headerCompressed), v.wrapperOverlayed && e.classList.add(f.overlayStyle), document.dispatchEvent(new CustomEvent("headerStickyChange")) } } function w(e) { document.querySelectorAll(a).forEach((e => { var t = e.clientWidth, i = e.closest(".header-item").clientWidth; t > i ? e.style.maxWidth = i : e.removeAttribute("style") })) } return { init: function() { e = document.querySelector(o), t = document.querySelector(s), i = e.querySelector(p), n = e.querySelector(m), v.threshold = e.getBoundingClientRect().top, v.subarPositionInit = !1, v.stickyEnabled = "true" === t.dataset.sticky, v.stickyEnabled ? (v.wrapperOverlayed = e.classList.contains(f.overlayStyle), theme.config.stickyHeader = (a = 0, t.querySelectorAll(r).forEach((e => { var t = e.offsetHeight; t > a && (a = t) })), !(window.innerHeight < a + 120)), theme.config.stickyHeader ? (v.forceStopSticky = !1, window.scrollY > v.threshold && S(), window.on("scroll" + v.namespace, S)) : (v.forceStopSticky = !0, y())) : y(), theme.settings.overlayHeader = "true" === t.dataset.overlay, theme.settings.overlayHeader && Shopify && Shopify.designMode && document.body.classList.contains("template-collection") && !document.querySelector(".collection-hero") && this.disableOverlayHeader(), g(), window.on("resize" + v.namespace, theme.utils.debounce(250, g)); var a, b = e.querySelector(u); b && b.on("click", (function() { b.classList.toggle("is-active"), theme.utils.prepareTransition(i, (function() { i.classList.toggle("is-active") })) })), function() { var e = !1; function i(t) { var i = t.parentNode; if (i.classList.contains(f.hasDropdownClass) && (i.classList.add(f.dropdownActive), !0), !theme.config.isTouch && !e) { var n = theme.config.isTouch ? "touchend" : "click"; e = !0, document.documentElement.on(n + v.namespace, function() { o(), document.documentElement.off(n + v.namespace), e = !1 }.bind(this)) } } function n(e, t) { var i = e.parentNode; (i.classList.contains(f.hasSubDropdownClass) || t) && (i.classList.add(f.dropdownActive), !0) } function o() { s(), a() } function s() { document.querySelectorAll(l).forEach((e => { e.classList.remove(f.dropdownActive) })) } function a() { document.querySelectorAll(h).forEach((e => { e.parentNode.classList.remove(f.dropdownActive) })) } theme.config.isTouch && document.querySelectorAll(d).forEach((e => { e.on("touchend" + v.namespace, (function(e) { e.currentTarget.parentNode.classList.contains(f.dropdownActive) ? window.location.replace(e.currentTarget.getAttribute("href")) : (e.preventDefault(), o(), i(e.currentTarget)) })) })), document.querySelectorAll(h).forEach((e => { theme.config.isTouch && e.on("touchend" + v.namespace, (function(e) { var t = e.currentTarget.parentNode; t.classList.contains(f.hasSubDropdownClass) ? t.classList.contains(f.dropdownActive) ? window.location.replace(e.currentTarget.getAttribute("href")) : (e.preventDefault(), a(), n(e.currentTarget)) : window.location.replace(e.currentTarget.getAttribute("href")) })), e.on("focusin" + v.namespace, (function(e) { a(), n(e.currentTarget, !0) })) })), theme.config.isTouch && (document.body.on("touchend" + v.namespace, (function() { o() })), t.querySelectorAll(r).forEach((e => { e.on("touchend" + v.namespace, (function(e) { e.stopImmediatePropagation() })) }))) }(); var L = t.querySelector(c); L.querySelectorAll(".grid-product") && (new theme.QuickAdd(L), new theme.QuickShop(L)), window.on("load" + v.namespace, w), window.on("resize" + v.namespace, theme.utils.debounce(150, w)) }, removeOverlayClass: function() { v.wrapperOverlayed && e.classList.remove(f.overlayStyle) }, disableOverlayHeader: function() { e.classList.remove(v.overlayEnabledClass, f.overlayStyle), v.wrapperOverlayed = !1, theme.settings.overlayHeader = !1 } }
This is what I suspect is problematic.
theme.config.isTouch && document.querySelectorAll(d).forEach((e => { e.on("touchend" + v.namespace, (function(e) { e.currentTarget.parentNode.classList.contains(f.dropdownActive) ? window.location.replace(e.currentTarget.getAttribute("href")) : (e.preventDefault(), o(), i(e.currentTarget)) })) })), document.querySelectorAll(h).forEach((e => { theme.config.isTouch && e.on("touchend" + v.namespace, (function(e) { var t = e.currentTarget.parentNode; t.classList.contains(f.hasSubDropdownClass) ? t.classList.contains(f.dropdownActive) ? window.location.replace(e.currentTarget.getAttribute("href")) : (e.preventDefault(), a(), n(e.currentTarget)) : window.location.replace(e.currentTarget.getAttribute("href")) })), e.on("focusin" + v.namespace, (function(e) { a(), n(e.currentTarget, !0) })) })), theme.config.isTouch && (document.body.on("touchend" + v.namespace, (function() { o() })), t.querySelectorAll(r).forEach((e => { e.on("touchend" + v.namespace, (function(e) { e.stopImmediatePropagation() })) })))
Thank you again for your help. Any questions please let me know.
Thank you
David
User | RANK |
---|---|
42 | |
42 | |
34 | |
24 | |
21 |
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...
By Jasonh Nov 6, 2023