April 12, 2023

Shopify 小技告知バーで生じるコンテンツのズレ対策

Shopifyの告知バー（announcement-bar）は、DawnやCraftをはじめとする多くのテーマでお馴染みの機能（セクション）ですが、告知バーの表示／非表示の切り替えによって、次のような問題が起こる場合があります。

1. メインメニューとサブメニューの間に隙間ができてしまう。
※position:sticky、もしくはabsoluteやfixedで配置した要素があり、告知バーの表示／非表示にあわせてtopの値を変更する必要がある。

2. 画面ぴったりに表示されていたメイン画像の下に次のコンテンツが見えてしまう。
※メインビジュアルの表示領域を、告知バーの表示／非表示にあわせて設定する必要がある。例として、height:calc（100vh - 告知バーの高さpx（表示されていれば） - ヘッダーの高さpx）

この記事では、Shopifyの告知バー（announcement-bar）の表示／非表示をJavaScriptで判定して、<body>タグにclassを付与することで、上記のようなコンテンツのズレに対応する小技をご紹介します。

告知バーが表示されていたら<body>タグにclassを付与

まずは結論から。
layout/theme.liquidファイルの</body>タグ直前に、以下のJavaScriptコードを追記します。

    <script>
      if (document.querySelector('.announcement-bar-section') !== null) {
        document.body.classList.add('announcement-bar-true');
      }
    </script>

告知バーが表示されているときにだけ、<body>タグにannouncement-bar-trueというclassがつくので、CSSでのスタイル調整が可能になります。
※Dawn、Craftのバージョン8.0.1にて、動作検証を行いました。

CSSは以下のように指定します。
※elementの部分は任意です。

element {
  告知バー非表示時のスタイル
}
.announcement-bar-true element {
  告知バー表示時のスタイル
}

仕様の異なるテーマへの対応

テーマやバージョンによっては、JavaScriptコードの一部に修正が必要になると思います。
先に紹介したコードでは上手くいかなかったときのために、JavaScriptの仕組みを簡単に解説していきます。
※解説に使用しているのはDawnのバージョン8.0.1の画面です。

1. 告知バーの表示設定

まずは告知バーが表示された状態を確認してみましょう。
現時点で告知バーが非表示の場合、管理画面で以下の設定を行います。（すでに告知バーが表示されている場合『2. class名の確認』へ進んでください。）

Shopifyの管理画面 > 販売チャネル > オンラインストア
の画面右下にある『カスタマイズ』ボタンをクリック。

1. 画面左側『告知バー』の項目にある目のマークをクリックして、
2. 画面右上の『保存する』ボタンをクリックします。

2. class名の確認

ブラウザでストアページに告知バーが表示されていることを確認します。
デベロッパーツールなどで、告知バー部分のソースコードをみてみましょう。

『announcement-bar-section』というclassのついた要素があります。

忘れないようにclass名をメモしておきましょう。

3. 告知バーの非表示設定

今度は告知バーが非表示の状態を確認してみましょう。

1. 先程と同じ管理画面で、画面左側『告知バー』の項目にある目のマークをクリックして、
2. 画面右上の『保存する』ボタンをクリックします。

4. パラメーターの書き換え

ブラウザでストアページの告知バーがなくなっていることを確認します。
デベロッパーツールなどで、ソースコードをみてみましょう。

2では存在していた『announcement-bar-section』というclassのついた要素がなくなりました。

この『告知バー表示時のみに出現する要素のclass名』を利用して、JavaScriptによる判定をif文の条件分岐で行なっています。

    <script>
      if (document.querySelector('.xxxxx') !== null) {
        document.body.classList.add('announcement-bar-true');
      }
    </script>

xxxxxの部分を『告知バー表示時のみに出現する要素のclass名』に書き換えることで、仕様の異なるテーマへも対応可能です。

Dawnのバージョン7.0.1では、告知バーの表示／非表示に関わらず、『shopify-section-announcement-bar』というidのついた要素が存在しており、その子要素として、告知バー表示時のみに出現する『announcement-bar』というclassのついた要素がありました。