BLOG

Active class on nav bar open page based on conical url

<nav class="main-navigation medium-down--hide">
<ul>
{% for link in shortcut_menu.links %}
<li class="main-menu-item{% if link.links.size > 0 %} has-dropdown{% endif %}
{% assign base_url = shop.url %}
{% assign coni_url = canonical_url | remove: base_url %}
{% if coni_url contains link.url %} is-open {% endif %}
{% for sublink in link.links %}
{% if coni_url == sublink.url %} is-open {% endif %}
{% if sublink.links.size > 0 %}
{%- for subChildren in sublink.links -%}
{% if coni_url == subChildren.url %} is-open {% endif %}
{%- endfor -%}
{% endif %}
{% endfor %}
" data-title="{{ link.title }}">
<a
class="menu-link-fix"
data-text="{{ link.title }}"
href="{{ link.url }}">{{ link.title }}</a>
{% if link.links.size > 0 %}
<ul class="dropdown-menu">
<div class="dropdown-column">
{% for sublink in link.links %}
<li class="dropdown-menu-item{% if sublink.links.size > 0 %} has-sub-dropdown{% endif %}">
{% assign sub_link_item_title_cleaned = sublink.title | replace: "--", "" %}
{% assign sub_link_item_title_small = sublink.title | downcase %}
{% if sub_link_item_title_small contains "sale" %}
<a
href="{{ sublink.url }}"
class="dropdown-menu-link text-red menu-link-fix"
data-text="{{ sub_link_item_title_cleaned }}">{{ sub_link_item_title_cleaned | strip }}</a>
{% else %}
<a
href="{{ sublink.url }}"
class="dropdown-menu-link menu-link-fix"
data-text="{{ sub_link_item_title_cleaned }}">{{ sub_link_item_title_cleaned | strip }}</a>
{% endif %}

{% assign contains_dashes = false %}
{%- for subChildren in sublink.links -%}
{% if subChildren.title contains "----" %}
{% assign contains_dashes = true %}
{% endif %}
{%- endfor -%}

{% if sublink.links.size > 0 %}
<div class="sub-dropdown-wrapper{% unless contains_dashes %} no-dropdown-footer{% endunless %}">
<div class="sub-dropdown-nav-wrapper">
{% assign current_heading = "" %}
<div class="sub-dropdown-menu">
<ul>
{% for subChildren in sublink.links %}
{% assign sub_children_item_title = subChildren.title %}
{% assign sub_children_item_title_cleaned = subChildren.title | replace: "---", "" %}
{% assign sub_children_item_title_small = subChildren.title | downcase %}
{% unless sub_children_item_title contains "----" %}
{% if sub_children_item_title contains "---" %}
{% if current_heading != "" %}
</ul>
</div>
<div class="sub-dropdown-menu">
<ul>
{% endif %}
<a href="{{ subChildren.url }}" class="sub-dropdown-heading">{{ sub_children_item_title_cleaned }}</a>
{% assign current_heading = sub_children_item_title_cleaned %}
{% endif %}
{% endunless %}
{% unless sub_children_item_title contains "---" or sub_children_item_title contains "----" %}
<li class="sub-dropdown-menu-item">
{% if sub_children_item_title_small contains "sale" %}
<a href="{{ subChildren.url }}" class="sub-dropdown-link text-red">{{ sub_children_item_title_cleaned }}</a>
{% else %}
<a href="{{ subChildren.url }}" class="sub-dropdown-link">{{ sub_children_item_title_cleaned }}</a>
{% endif %}
</li>
{% endunless %}
{% endfor %}
</ul>
</div>
<span class="break sub-dropdown-menu"></span>
<span class="break sub-dropdown-menu"></span>
<span class="break sub-dropdown-menu"></span>
</div>

{% if contains_dashes %}
<div class="dropdown-footer">
<ul class="footer-menu">
{%- for subChildren in sublink.links -%}
{% assign sub_children_item_title = subChildren.title %}
{% assign sub_children_item_title_cleaned = sub_children_item_title | replace: "----", "" %}
{% if sub_children_item_title contains "----" %}
<li class="footer-menu-item">
<a href="{{ subChildren.url }}" class="footer-menu-link">{{ sub_children_item_title_cleaned }}</a>
</li>
{% endif %}
{%- endfor -%}
</ul>
</div>
{% endif %}
</div>
{% endif %}
</li>
{% endfor %}
</div>
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>

 <script>

 document.addEventListener('DOMContentLoaded', function() {



// Get the stored URL from localStorage
const storedUrl = localStorage.getItem('targetUrl');

// Ensure storedUrl is valid
if (storedUrl) {
// Select all elements with the class 'has-dropdown'
const listItems = document.querySelectorAll('.has-dropdown');

listItems.forEach(item => {
// Get all <a> elements that are direct children of the current <li>
const links = Array.from(item.children).filter(child =>
child.tagName === 'A' && child.getAttribute('href') === storedUrl
);

// If any matching link is found, add 'is-open' class to <li>
if (links.length > 0) {
item.classList.add('is-open');
}
});
}else{
const listItems = document.querySelectorAll('.default--1');
listItems.forEach(item => {
item.classList.add('is-open'); // Add the 'is-open' class to each element
});
}

const openDropdown = document.querySelector('.has-dropdown.is-open');
if (openDropdown) {
// Add the 'active' class to the body element
document.body.classList.add('main-menu-open');
}
if(window.location.href === "https://ivalo.com/" || window.location.href === "https://fi.ivalo.com/" || window.location.href === "https://nl.ivalo.com/" ){
// Try to get the target URL from localStorage
try {
const storedUrl = localStorage.getItem('targetUrl');
if (storedUrl) {
// Redirect to the stored URL
window.location.href = storedUrl;
}
} catch (e) {
console.error('Error accessing localStorage:', e);
}
}
// Select all link elements with both classes 'menu-link-fix' and 'has-dropdown'
const menuLinks = document.querySelectorAll('.has-dropdown>.menu-link-fix');

if (menuLinks.length > 0) {
// Iterate over each link and add a click event listener
menuLinks.forEach(menuLink => {
menuLink.addEventListener('click', function(event) {
event.preventDefault(); // Prevent the default link behavior

// Get the URL from the href attribute
const targetUrl = this.getAttribute('href');

try {
// Store the URL in localStorage (optional, if needed elsewhere)
localStorage.setItem('targetUrl', targetUrl);
} catch (e) {
console.error('Error setting localStorage:', e);
}

// alert('Target URL: ' + targetUrl); // Display the target URL in an alert

// Redirect to the target URL
window.location.href = targetUrl;
const savedUrl = localStorage.getItem('savedUrl');



});
});
} else {
console.error('No elements with class "menu-link-fix has-dropdown" found.');
}
});

</script>

Preview link: https://ivalo.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=168122581315

Share:

Post a Comment!