Dawn「コレクションの説明欄が空欄でなければ」の条件の設定方法が知りたいです。

[nishi-ec]

Dawnを利用しています。

■該当箇所

コレクションページの「コレクションバナーセクション」

ファイル：main-collection-banner.liquid

■やりたいこと

管理画面にて「コレクションの説明を表示する」にチェックが入っている状態かつ、コレクションの説明が空欄でない（コレクションページの説明欄に何か入力している）の条件を満たす場合に、main-collection-banner.liquid内で以下のコレクションの説明部分を表示したいです。

    <div class="page-width">
      <div class="collection-hero__text-wrapper">
            <div class="collection-hero__description rte">{{ collection.description }}</div>
      </div>
    </div>

■困っていること

以下のようにif文で条件を追加したのですが、「コレクションの説明を表示する」にチェックが入っている状態で表示する条件は動作していますが、「説明欄が空欄でない場合」の条件が動作しません。

コレクションページの説明欄が空欄であっても、if文内のdivの要素が出力されてしまいます。

「コレクションの説明を表示する」にチェックが入っている状態の条件は「section.settings.show_collection_description」で、

「説明欄が空欄でない場合」の条件は「collection.description != empty」で指定しています。

「collection.description != empty」という指定がうまく動作していないのだと考えますが、原因がわからず解決方法を調べている状態です。

  {%- if section.settings.show_collection_description and collection.description != empty -%}
    <div class="page-width">
      <div class="collection-hero__text-wrapper">
            <div class="collection-hero__description rte">{{ collection.description }}</div>
      </div>
    </div>
  {%- endif -%}

もしお気づきの点があればご助言頂けると助かります。

よろしくお願いいたします。

[株式会社フルバランス]

Nishi-Ecさま

「collection.description != empty」とされている箇所を「collection.description != blank」とされた場合はいかがでしょうか？

ご確認いただけますと幸いです。

フルバランス　園畑

[nishi-ec]

ご回答ありがとうございます！

collection.description != blankに置き換えましたが、表示は変化がありませんでした。

[株式会社おいかぜ · Accepted solution]

@nishi-ec 

こんにちは！

{%- if section.settings.show_collection_description and collection.description -%}

とするといかがでしょうか。

それでもうまくいかない場合は collection.description が本当に空かどうか確認してみるのはいかがでしょうか。

例えばif外に

<p>{{ collection.title | append: 'の説明は' | append: collection.description | append: 'です' }}</p>

としてHTMLで表示させて確認してみたり、

<script>console.log("{{ collection.title | append: 'の説明は' | append: collection.description | append: 'です' }}")</script>

 コンソールに表示させてデベロッパーツールで確認してみるなど。

解決の手助けになりましたら幸いです。よろしくお願いします！

[nishi-ec]

ご回答ありがとうございます！

{%- if section.settings.show_collection_description and collection.description -%}

上記は最初に試していたのですが表示されませんでした。

{{ collection.description }}が本当に空なのかどうかコードで確認していませんでしたので、検証ツールで確認したところ、該当部分に以下のコードが出力されていました。

<br data-mce-fragment="1">

 コレクションの説明に何も入力しない場合でも、このコードが出力されるから、collection.descriptionは空だと認識されていないのですかね。

ちなみに、ご提案頂いた以下コードの出力結果は

<p>{{ collection.title | append: 'の説明は' | append: collection.description | append: 'です' }}</p>

検証ツール上で以下のようになりました。

<p>
"（コレクション名）の説明は"
<br data-mce-fragment="1">
"です"
</p>

collection.descriptionが空ではないから意図通りに動作しないようだと分かりましたので、表示内容が「<br data-mce-fragment="1">」のみの場合という条件を指定する方法があるかどうか調べてみます。

ありがとうございます。

[nishi-ec]

以下のコードで意図した挙動になりました。

ご助言ありがとうございました！

{%- if section.settings.show_collection_description and collection.description != '<br data-mce-fragment="1">'  -%}