markdown 商家可以选择将在新标签页中打开的特定导航项

Posted 2021-05-05

**Theme:** *Debut*

**Last version(s) tested:** *Debut 13.0.0*
 
**Recommended design time:** *10 minutes*
 
 ----
 
 This customization allows merchants to select a nav item that they want to be able to be opened in a new tab. All that selected nav item's child nav items will also be opened in a new tab.
 
 This customization will work for other themes, you will just need to slightly modified where you place the `{% if %}` statements, and change the class names in the jQuery.
 
# What you have

All nav items open in the in same tab.

![](https://screenshot.click/2019-08-15_15-51-07.gif)

# What you want

The merchant is able to choose certain nav items that will open in a new tab instead.

![](https://screenshot.click/2019-08-15_15-52-04.gif)
![screenshot](https://screenshot.click/2019-08-15_16-45-37.jpg)
----

**Step one:** In the header.liquid file, add the following code inside the class attribute of the first `<li>` element in the file.
```
{% if forloop.index == indexOfSpecificNavItem and section.settings.make_specific_nav_items_open_in_a_new_tab %} drop-down-links-open-in-new-tab {% endif %}
```
So it should look like this:
```
<li class="mobile-nav__item {% if forloop.index == indexOfSpecificNavItem and section.settings.make_specific_nav_items_open_in_a_new_tab %} drop-down-links-open-in-new-tab {% endif %} {% unless forloop.last %} border-bottom{% endunless %}">
```
**Step two:** In the header.liquid file, add the following code to the bottom of the schema.
```
{
     "type":      "header",
     "content":   "Make specific nav items open in a new tab"
},
{
      "type": "checkbox",
      "id": "make_specific_nav_items_open_in_a_new_tab",
      "default": true,
      "label": "Make specific nav items open in a new tab"
},
{
     "type": "select",
     "id": "index_of_specific_nav_item",
     "options": [
        { "value": "1", "label": "First nav item"},
        { "value": "2", "label": "Second nav item"},
        { "value": "3", "label": "Third nav item"},
          { "value": "4", "label": "Fourth nav item"},
          { "value": "5", "label": "Fifth nav item"},
          { "value": "6", "label": "Sixth nav item"}  
     ],
     "label": "Underneath which nav item should links to open in a new tab"
}
```
**Step three:** In the header.liquid file, at the very top of the page, add the following code.
```
{% assign indexOfSpecificNavItem = section.settings.index_of_specific_nav_item | round %}
```

**Step four:** In the site-nav.liquid file, add the following code inside the class attribute of the first `<li>` element in the file.
```
{% if forloop.index == indexOfSpecificNavItem and section.settings.make_specific_nav_items_open_in_a_new_tab %} drop-down-links-open-in-new-tab {% endif %}
```
So it should look like this:
```
<li class="{% if forloop.index == indexOfSpecificNavItem and section.settings.make_specific_nav_items_open_in_a_new_tab %} drop-down-links-open-in-new-tab {% endif %} site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %}{% if link.active %} site-nav--active{% endif %}" data-has-dropdowns>
```
**Step five:** In the site-nav.liquid file, add the following code inside the class attribute of the very last `<li>` element in the file.
```
{% if forloop.index == indexOfSpecificNavItem and section.settings.make_specific_nav_items_open_in_a_new_tab %} drop-down-links-open-in-new-tab {% endif %}
```
So it should look like this:
```
<li class="{% if forloop.index == indexOfSpecificNavItem and section.settings.make_specific_nav_items_open_in_a_new_tab %} drop-down-links-open-in-new-tab {% endif %} {% if link.active %} site-nav--active{% endif %}">
```
**Step six:** In the theme.js file, add the following code to the very bottom of the file.
```
$( document ).ready(function() {
  $('.drop-down-links-open-in-new-tab .site-nav__link').each(function() {
    $(this).attr('target', '_blank');
  });
});
```

**Note:** When settings are changed, they do not take effect until the page is refreshed. It may be worth letting the merchant know about this in your email.