【Shopify】外部リンクを別タブで開く。メニューの外部リンクもこれで解決！

たいと 197カ国世界一周🇯🇵

2022年1月5日 17:29

Shopifyのデフォルトの仕様では、メニューに外部リンクを設定しても別タブには飛びません。そこで、JavaScriptで別タブに飛ぶ仕様にしたいと思います。

はじめに

テーマはデフォルトテーマの「Dawn」を使用します。
※多少のHTML, Liquid, JavaScriptの知識が必要になります。

ゴール

メニューに外部リンクを入れた際に、別タブで開くようにする。
1と同時にサイト内にある外部リンクを全て別タブで開くようにする。

実装方法

1.aseetsファイルに[custom.js]を作成する。

2.[theme.liquid]の[global.js]が読み込んであるところの下で、[custom.js]を読み込む

<script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>

3.[custom.js]の中身を以下にする。(下記に説明も)

window.addEventListener('DOMContentLoaded', function() {
  const links = document.links;
  const linksLength = links.length;
  for (let i = 0; i < linksLength ; i++) {
    if (links[i].hostname !== window.location.hostname) {
      links[i].target = '_blank';
      links[i].rel = 'noreferrer noopener';
    }
  }
});

4.メニューに外部リンクを設定する。

5.確認

以上5ステップで簡単に終了します。他テーマでも動作確認済みですので、是非使用してみてください！

JavaScript説明

DOMContentLoadedイベント

DOMContentLoadedイベントはHTML解析後の実行なので、全てのリンクを取得するためにこちらのイベントを使用しています。DOMContentLoadedイベントの詳細は以下の記事をご覧ください。
DOMContentLoadedイベント：DOMツリーの構築が完了したとき

変数宣言

const links = document.links;
const linksLength = links.length;

ここで、サイト内にある全てのリンクを取得し、リンクの個数を[linksLength]に代入しています。

for文で1つずつ確認

  for (let i = 0; i < linksLength ; i++) {
    if (links[i].hostname !== window.location.hostname) {
      links[i].target = '_blank';
      links[i].rel = 'noreferrer noopener';
    }
  }

for文で1つずつ確認し、もしリンクのホストネームが現在のホストネームと違ったら、targetに'_blank'を入れ、relに'noreferrer noopener'を入れることによって、別タブに飛ぶようにしています。

target="_blank"と"_new"について

こちらは外せない話題です。
是非こちらのnoteも読んで理解を深めてください。

まとめ

何かご不明点、おかしな点あればご連絡ください。

これ以外にもShopifyテーマのLiquidでのカスタマイズを今後もnoteに投稿していくので、フォローといいねしていただけるとうれしいです。

また、Shopifyの独自のカスタマイズやテーマ開発などのご依頼ございましたら、TwitterのDMよりお待ちしております。

あわせてお読みください

自己紹介

エンジニア経歴

2019.08〜2020.08　カレント自動車株式会社IT事業部インターン
2020.08〜　フリーランスとして、数社の業務委託とShopifyエンジニア, Webエンジニアとして活動
2021.08〜　僕と私と株式会社 Shopify事業部責任者
2022.01〜　石垣島に僕と私と株式会社グループのEC制作会社設立（代表）

その他経歴

2021　電動キックボード日本一周
　　　雑誌「BICYCLE JAPAN」7月号掲載
　　　渋谷大型スクリーンCM「SWALLOW」出演

SNS

TikTok
85,000フォロワー(2021.09時点)
主に旅について発信

Instagram
11,000フォロワー(2021.09時点)
主に旅と生活について発信

Twitter
旅とShopifyについて発信

Tweets by taito_smile

この記事が気に入ったらサポートをしてみませんか？