複数の特定ページのヘッダーを非表示にしたい

[COSS1]

お世話になっております。

現在、特定のページだけ<header>を非表示にしております。

追加で、特定の「商品ページ」も<header>を非表示にしたいと考えております。

theme.liquidに以下のコードがすでに入力されておりまして、

追加で特定の商品ページを追加したい場合はどのように記述すればよろしいでしょうか。

{% unless template.suffix contains "landingpage" %}
{% section 'header' %}
{% endunless %}

・使用テーマは、Debut

・すでにヘッダー非表示となっているテンプレートは「landingpage.liquid」、

　追加で非表示にしたいテンプレートは、商品ページで「item2022.liquid」（仮）

・html・CSSは理解していますが、liquidや分岐の記述にはかなり疎いです。

恐れ入りますが、何卒宜しくお願い致します。

[Qcoltd · Accepted solution]

「特定のページ」の数にもよるのですが、それほど多くないと仮定しまして、

下記ではどうでしょうか？

(unlessで考えると混乱しそうでしたので、ifに変更しています。)

{%- assign hasHeader = true -%}
{%- if template.suffix contains "landingpage" -%}
  {%- assign hasHeader = false -%}
{%- endif -%}
{%- if template.name == 'product' -%}
  {%- if product.id == 対象の商品ID or product.id == 対象の商品ID or product.id == 対象の商品ID -%}
    {%- assign hasHeader = false -%}
  {%- endif -%}  
{%- endif -%}

{%- if hasHeader -%}
{% section 'header' %}
{%- endif -%}

ヘッダーを表示したくない商品のIDを、

{%- if product.id == 対象の商品ID or product.id == 対象の商品ID or product.id == 対象の商品ID -%}

こちらに追加していきます。

商品IDは、ストア管理画面にて、商品の管理画面を開いた際の末尾の数字です。

もし、対象の商品数が多い場合は、下記の方が簡単かもしれません。

{%- assign hasHeader = true -%}
{%- if template.suffix contains "landingpage" -%}
  {%- assign hasHeader = false -%}
{%- endif -%}
{%- if template.name == 'product' -%}
  {%- if product.tags contains "ヘッダーを表示したくない商品につけたタグ" -%}
    {%- assign hasHeader = false -%}
  {%- endif -%}  
{%- endif -%}

{%- if hasHeader -%}
{% section 'header' %}
{%- endif -%}

ヘッダーを表示したくない商品に、商品タグをつけます。

そのタグを、

上記コードの

ヘッダーを表示したくない商品につけたタグ

に設定します。

なお、商品タグを商品詳細ページに出力している場合、

このタグも出力されてしまいますので、

その場合は、商品詳細ページのタグ出力部分をコード編集するか、

表示されても問題がないタグをつけられると良いかと思います。

ご参考まで。

(キュー田辺)

[COSS1]

ご返信ありがとうございます。

無事、理想通りに追加で非表示にすることが出来ました。

誠にありがとうございました。

[COSS1]

追加での質問となり恐れ入ります。

こちらの<footer>バージョンはどのような記述になりますでしょうか。

headerをfooterに変えるだけではうまくいかないようで、背景色以外表示されなくなってしまいました。

別の記述方法になるのでしょうか。

theme.liquidには既に以下の内容がありました。

{% unless template.suffix contains "landingpage" %}
{% section 'footer' %}
{% endunless %}

こちらに追加で、特定の商品ページの<footer>を非表示にしたく存じます。

誠に恐れ入りますが、宜しくお願い致します。

[Qcoltd]

ヘッダーを表示しないページと、フッターを表示しないページは、同じページということでよろしかったでしょうか？

もしそうでしたら、

{% section 'footer' %}

を、

{%- if hasHeader -%}
{% section 'footer' %}
{%- endif -%}

にすることで、

ご希望かなうと思うのですが、

上手くいかなったでしょうか？

もし、

ヘッダーを非表示にしたいページと、

フッターを非表示にしたいページが異なる場合は、

下記のうようにされてはいかがでしょうか？

{%- assign hasFooter = true -%}
{%- if template.suffix contains "landingpage" -%}
  {%- assign hasFooter = false -%}
{%- endif -%}
{%- if template.name == 'product' -%}
  {%- if product.id == 対象の商品ID or product.id == 対象の商品ID or product.id == 対象の商品ID -%}
    {%- assign hasFooter = false -%}
  {%- endif -%}  
{%- endif -%}

{%- if hasFooter -%}
{% section 'footer' %}
{%- endif -%}

ご参考まで。

(キュー田辺)

[COSS1]

ご返信ありがとうございます。

一瞬表示されるのですが、すぐ非表示になってしまうので

もしかしたら他の記述部分が悪さしているのかもしれません。

一時的にfooterをdisplay:noneで対応することにしました。

誠にありがとうございました。

[Qcoltd]

@COSS1 様

もし、根本的な解決を目指される場合は、

プライベートメッセージなどで現象を確認できるURLをお送りいただくことで、

より具体的な回答ができるかもしれません。

(必ず解決できるというお約束はできませんが。。。)

必要であればお声がけください。

(キュー田辺)