#04 Shopifyでヘッダー(ナビゲーションバー)をデザインする
この記事を読むことでオリジナルデザインのヘッダー部分のデザインの概要を学ぶことができます。
ヘッダーのナビゲーション部分は管理画面から編集ができる
まず、Shopifyのヘッダーのナビゲーション部分は管理画面から編集が可能な部分です。
左側のナビゲーションエリアのメニュー(赤枠①)をクリックすると
「メインメニュー(赤枠②)」が表示されます。
管理画面からナビゲーションのメニューにどのメニューを追加するかを設定することができます。
ヘッダー部分のLiquidのコードについて
ヘッダーのナビゲーションのデザインをします。
Shopifyのテーマの「layout」フォルダの「theme.liquid」を開きます。
{% for link in linklists.main-menu.links %}
{% assign child_list_handle = link.title | handleize %}
{% if linklists[child_list_handle].links != blank %}
<a href="{{ link.url }}">{{ link.title }}</a>
[{% for childlink in linklists[child_list_handle].links %}
<a href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
{% endfor %}]
{% else %}
<a href="{{ link.url }}">{{ link.title }}</a>
{% endif %}
{% endfor %}
はい、いきなりハードルが高いですね。
1つずつみていきましょう。
{% for link in linklists.main-menu.links %}
処理内容
{% endfor %}
◆for in 繰り返し
{% for オブジェクト in 条件 %}
処理内容
{% endfor %}
{% for オブジェクト in 条件 %}は繰り返し処理です。
”条件にマッチすると処理内容を繰り返し実行する”ということになります。
{% endfor %}で処理内容の繰り返しを抜けることができます。
{% for link in linklists.main-menu.links %}
処理内容
{% endfor %}
for link in
for ~ in に囲まれた link これは何か?
どうやらlinkオブジェクトみたいです。
https://shopify.dev/api/liquid/objects/link
ここがproductのときある。
その場合はproductオブジェクトになる。
https://shopify.dev/api/liquid/objects/product
次は条件をみていきます。
{% for link in linklists.main-menu.links %}
処理内容
{% endfor %}
linklists.main-menu.links
linklists これは何か?
これもオブジェクトです。
https://shopify.dev/api/liquid/objects/linklist
linklists.main-menu.links
https://shopify.dev/api/liquid/objects/linklist#linklist-links
main-menu はShopifyの管理画面で設定できるナビゲーションのメニューのことを指しています。
for の繰り返し処理に当てはめると、
「main-menuのリンクを1つずつ取り出すよ」ということになります。
そもそもオブジェクトとは何か?
オブジェクトは箱によく例えられます。箱の中にはデータがたくさんあり、オブジェクトを「.」でつなぐことにより、箱の中にあるデータを取り出すイメージです。
例えば、productオブジェクトには商品名などが入っています。商品名を取り出すのに「product.title」と記述します。
https://shopify.dev/api/liquid/objects/product#product-title
オブジェクトについてはイチ役さんの記事が参考になります!
オブジェクトの種類については@eijiSaitoさんの記事が参考になります!
{% assign child_list_handle = link.title | handleize %}
{% assign child_list_handle %}
assign は変数を定義する意味です。
「child_list_handle」という変数を定義しています。
※変数を定義すると、変数の中身を初期化することになる
assign child_list_handle = link.title | handleize
変数「child_list_handle」に「link.title | handleize」の内容を入れる
{% assign child_list_handle = link.title | handleize %}
link.title | handleize とは何か?
linkはオブジェクトで
link.titleはリンクオブジェクトからタイトルを取得する
https://shopify.dev/api/liquid/objects/link#link-title
| handleize とは何か?
| は フィルターです。
フィルターを使う目的は、オブジェクトの中身を出力するときに
フィルターの条件を通した内容を出力することができる
linkオブジェクトにはハンドル属性がないので、
ハンドルフィルター( | handleize)を使用しています。
(例)link.title | handleize の事例
link.titleが「About us」だった場合
「About us」 はハンドルフィルター「| handleize」を通るので、
「about-us」になります。
ハンドルフィルター「| handleize」の効果は、
・スペースをハイフン「-」に変換
・全ての文字を小文字にする「About」→「about」
次に以下のを1つずつ見ていきましょう。
◆if条件分岐
{% if linklists[child_list_handle].links != blank %}
処理内容A
{% else %}
処理内容B
{% endif %}
もし条件に合うなら処理内容Aを実行する
それ以外の場合は処理内容Bを実行する
◆条件内容
{% if linklists[child_list_handle].links != blank %}
処理内容A
{% else %}
処理内容B
{% endif %}
linklists[child_list_handle].links != blank
① ② ③ ④⑤
①linklists はオブジェクト
②[child_list_handle] は上で定義した変数・中身は「link.title | handleize」
③.links オブジェクトのリンクを取得
①②③で
サブメニューのリンク ということになり
――
④!= 同じでない
⑤blank 空白である
④⑤で
!= blank 空白ではない ということになり
★まとめ
もしサブメニューのリンクが空白でなければ
つまり日本語にすると
もしサブメニューがあれば処理内容Aと実行する
それ以外の場合、処理内容Bを実行する
☆サブメニューがあるかどうか判定することが目的
次はサブメニューがあればドロップダウンで表示するためのコードを見ていきましょう。(太字部分)
{% if linklists[child_list_handle].links != blank %}
<a href="{{ link.url }}">{{ link.title }}</a>
[{% for childlink in linklists[child_list_handle].links %}
<a href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
{% endfor %}]
{% else %}
<a href="{{ link.url }}">{{ link.title }}</a>
{% endif %}
◆サブメニューがあればドロップダウンで表示するためのコード
<a href="{{ link.url }}">{{ link.title }}</a>
[{% for childlink in linklists[child_list_handle].links %}
<a href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
{% endfor %}]
※サブメニューのリンクがあればサブメニューのリンクを表示する
| escape エスケイプフィルターの役割
HTML上で、>や、"、などの特殊文字を表示するための処理です。
例えば、<は、<に変換されます。
https://qiita.com/eijiSaito/items/b4a1675ec196546aa4f2#escape
※サブメニューがない場合は
<a href="{{ link.url }}">{{ link.title }}</a>
※リンクタイトルとURLを出力する
AGATA CODEさんの記事が参考になります!
{% if shop.customer_accounts_enabled %}
{% if customer %}
<a href="/account">account</a>
{{ 'log out' | customer_logout_link }}
{% else %}
{{ 'log in ' | customer_login_link }}
{{ 'register' | customer_register_link }}
{% endif %}
{% endif %}
{% if shop.customer_accounts_enabled %}
処理内容A
{% else %}
処理内容B
{% endif %}
shop.customer_accounts_enabled とは?
shop はオブジェクト
customer_accounts_enabled shopオブジェクトのデータを取り出してる
customer_accounts_enabled は何か?
↓
顧客アカウントが有効 → 会員がログインしている状態
ログインしている人は処理内容A
ログインしていない人は処理内容B
― ログインページへのリンク(customer_accounts_enabled解説)
https://shopify.dev/themes/architecture/templates/customers-login#link-to-the-login-page
★まとめ
会員ログインしている人には
「アカウント情報編集ページへのリンク」と
「ログアウトリンク」を表示する
会員ログインしていない人には
「ログインページへのリンク」と「会員登録ページへのリンク」を表示する
{% if customer %}
もし会員なら
<a href="/account">account</a>
アカウント情報編集ページへのリンクが表示される
{{ 'log out' | customer_logout_link }}
ログアウト
―URLフィルター 文字付きリンクが生成される
| customer_logout_link
この場合「ログアウト」という
ログアウトするためのリンク付きテキストが表示される
{{ 'log in ' | customer_login_link }}
ログインページへのリンクが表示される
{{ 'register' | customer_register_link }}
会員登録ページへのリンクが表示される
Bootstrapでナビゲーションを作る
Bootstrapのサイトでコンポーネントとして用意されているコードを使います。左側のメニューから「Components」から「Navbar」を選択し、ページ内の「Nav」の見出しのコードをコピーします。
headerをセクションとして登録する
「sections」フォルダに「header.liquid」を新規作成します。
Shopifyテーマキットでは「sections」フォルダが用意されていないので、
新規作成します。
「sections」フォルダに「header.liquid」にBootstrapのサイトからコピーしたコードをペーストします。
次に「layout」フォルダの「theme.liquid」を開き、以下のコードを切り取りします。
{% for link in linklists.main-menu.links %}
{% assign child_list_handle = link.title | handleize %}
{% if linklists[child_list_handle].links != blank %}
<a href="{{ link.url }}">{{ link.title }}</a>
[{% for childlink in linklists[child_list_handle].links %}
<a href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
{% endfor %}]
{% else %}
<a href="{{ link.url }}">{{ link.title }}</a>
{% endif %}
{% endfor %}
<a href="/carts">carts</a>
{% if shop.customer_accounts_enabled %}
{% if customer %}
<a href="/account">account</a>
{{ 'log out' | customer_logout_link }}
{% else %}
{{ 'log in ' | customer_login_link }}
{{ 'register' | customer_register_link }}
{% endif %}
{% endif %}
「sections」フォルダの「header.liquid」にペーストします。
先程ペーストした、BootstrapのHTMLコードの上にペーストします。
新規作成したセクション「header.liquid」を「theme.liquid」に読み込む
「layout」フォルダの「theme.liquid」を開きます。元々ナビゲーションの記述があった場所にセクション「header.liquid」を読み込むコードを記述します。
{% section 'header' %}
「sections」フォルダにある「header.liquid」が読み込めます。
「header.liquid」の編集
BootstrapのHTMLコードにLiquidのコードを融合させます。この編集作業はHTMLとCSSの知識がある方ならできると思います。
編集前のコードは以下の通りです。
(ざっと流して見るくらいでOKです)
{% for link in linklists.main-menu.links %}
{% assign child_list_handle = link.title | handleize %}
{% if linklists[child_list_handle].links != blank %}
<a href="{{ link.url }}">{{ link.title }}</a>
[{% for childlink in linklists[child_list_handle].links %}
<a href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
{% endfor %}]
{% else %}
<a href="{{ link.url }}">{{ link.title }}</a>
{% endif %}
{% endfor %}
<a href="/cart">carts</a>
{% if shop.customer_accounts_enabled %}
{% if customer %}
<a href="/account">account</a>
{{ 'log out' | customer_logout_link }}
{% else %}
{{ 'log in ' | customer_login_link }}
{{ 'register' | customer_register_link }}
{% endif %}
{% endif %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
Bootstrapのナビゲーションメニューは以下の太字のHTMLコードで
挟んであげると機能しそうです。
◆修正前<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
まずは、以下のコードをBootstrapのナビゲーションの最後のメニューとして記述したいので、
◆修正前<a href="/cart">carts</a>
をメニューの最後の箇所に記述します。
◆修正後
<li class="nav-item">
<a class="nav-link" href="/cart">carts</a>
</li>
※<a class="nav-link">がないと、横並びの文字のスペースがなくなるので、
どのリンクにも追加します。
次にLiquidの記述をBootstrapのメニューの箇所に融合させていきます。
◆修正前
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/cart">carts</a>
</li>
</ul>
Bootstrapのナビゲーションメニューを作成するには以下のコードにすればうまく機能します。次にLiquidに記載されているHTMLを編集しますが、このコードの形にすれば、うまくいきます。
◆Bootstrapのメニューのコード
<li class="nav-item">
<a class="nav-link" href="▲▲▲">■■■</a>
</li>
以下のLiquidのHTMLの箇所を編集していきます。
{% for link in linklists.main-menu.links %}
{% assign child_list_handle = link.title | handleize %}
{% if linklists[child_list_handle].links != blank %}
<a href="{{ link.url }}">{{ link.title }}</a>
[{% for childlink in linklists[child_list_handle].links %}
<a href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
{% endfor %}]
{% else %}
<a href="{{ link.url }}">{{ link.title }}</a>
{% endif %}
{% endfor %}
Bootstrapのコードを削除し、LiquidのコードをBootstrapのコードを削除した場所にコピー&ペーストします。
◆修正前
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/cart">carts</a>
</li>
</ul>
◆修正後
<ul class="navbar-nav">
※※ここにLiquidのコードを追加します※※
{% for link in linklists.main-menu.links %}
{% assign child_list_handle = link.title | handleize %}
{% if linklists[child_list_handle].links != blank %}
<a href="{{ link.url }}">{{ link.title }}</a>
[{% for childlink in linklists[child_list_handle].links %}
<a href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
{% endfor %}]
{% else %}
<a href="{{ link.url }}">{{ link.title }}</a>
{% endif %}
{% endfor %}
※※※※※※※※※※※※※※※※※※※※※※
<li class="nav-item">
<a class="nav-link" href="/cart">carts</a>
</li>
</ul>
Liquidのコードを編集します。
LiquidのHTMLコードの編集手順
①<a>タグがある場所を<li class="nav-item"></li>で挟む
②<a>タグに class="nav-link"を追記する
◆編集後
<ul class="navbar-nav">
{% for link in linklists.main-menu.links %}
{% assign child_list_handle = link.title | handleize %}
{% if linklists[child_list_handle].links != blank %}
<li class="nav-item">
<a class="nav-link" href="{{ link.url }}">{{ link.title }}</a>
</li>
[{% for childlink in linklists[child_list_handle].links %}
<li class="nav-item">
<a class="nav-link" href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
</li>
{% endfor %}]
{% else %}
<li class="nav-item">
<a class="nav-link" href="{{ link.url }}">{{ link.title }}</a>
</li>
{% endif %}
{% endfor %}
<li class="nav-item">
<a class="nav-link" href="/cart">carts</a>
</li>
</ul>
最後に「header.liquid」の一番上にあったLiquidのコードを</nav>タグの下に移動して終わりです。
{% if shop.customer_accounts_enabled %}
{% if customer %}
<a href="/account">account</a>
{{ 'log out' | customer_logout_link }}
{% else %}
{{ 'log in ' | customer_login_link }}
{{ 'register' | customer_register_link }}
{% endif %}
{% endif %}
最後に今回編集した「header.liquid」の全コードを記述しています。
(どこか不具合があれば申し訳ないです)
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
{% for link in linklists.main-menu.links %}
{% assign child_list_handle = link.title | handleize %}
{% if linklists[child_list_handle].links != blank %}
<li class="nav-item">
<a class="nav-link" href="{{ link.url }}">{{ link.title }}</a>
</li>
[{% for childlink in linklists[child_list_handle].links %}
<li class="nav-item">
<a class="nav-link" href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
</li>
{% endfor %}]
{% else %}
<li class="nav-item">
<a class="nav-link" href="{{ link.url }}">{{ link.title }}</a>
</li>
{% endif %}
{% endfor %}
<li class="nav-item">
<a class="nav-link" href="/cart">carts</a>
</li>
</ul>
</div>
</div>
</nav>
{% if shop.customer_accounts_enabled %}
{% if customer %}
<a href="/account">account</a>
{{ 'log out' | customer_logout_link }}
{% else %}
{{ 'log in ' | customer_login_link }}
{{ 'register' | customer_register_link }}
{% endif %}
{% endif %}
この記事が気に入ったらサポートをしてみませんか?