FROM CACHE - jp_header

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

解決済
nishi-ec
遊覧客
23 1 2

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 -%}

 

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

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

1 件の受理された解決策

ベストソリューション
株式会社おいかぜ
探検家
74 31 27

成功

@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>

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

 

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

京都・西院に本社を構えるウェブデザイン・グラフィックデザイン制作会社です。
Shopifyストア制作・運営をサポートいたします。お仕事の依頼はDMか弊社ホームページのお問い合わせより連絡頂けますと幸いです。
解決のご参考になりましたら、いいね・ベストアンサーボタンの方何卒よろしくお願いいたします。

元の投稿で解決策を見る

5件の返信5
株式会社フルバランス
Shopify Partner
639 179 397

Nishi-Ecさま

 

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

 

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

 

フルバランス 園畑

 

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ECの技術・実務・成長、お悩みのことがあれば、気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
nishi-ec
遊覧客
23 1 2

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

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

 

株式会社おいかぜ
探検家
74 31 27

成功

@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>

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

 

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

京都・西院に本社を構えるウェブデザイン・グラフィックデザイン制作会社です。
Shopifyストア制作・運営をサポートいたします。お仕事の依頼はDMか弊社ホームページのお問い合わせより連絡頂けますと幸いです。
解決のご参考になりましたら、いいね・ベストアンサーボタンの方何卒よろしくお願いいたします。
nishi-ec
遊覧客
23 1 2

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

{%- 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
遊覧客
23 1 2

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

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

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