HubSpot カスタムモジュールで、ブール値と IF分(+UNLESS文)を使用してみた
HubSpotでページを編集していると、ページ編集画面の左側に
コンテンツタブとスタイルタブが表示されていますよね。
ユーザーが入力するテキストや画像、チェックボックスなんかを設定できる場所です。
今回は、ジュールフィールドの中でシンプルだけど高頻度で使用される、
ブール値フィールドと IF文(とおまけにUNLESS文) を試してみました!
🧩 ブール値とは?
カスタムモジュールでブール値フィールドを追加すると、コンテンツタブにチェックボックスとして表示されます。
ユーザーがチェックを入れるかどうかで、値が true または false になります。
では、これをHubLでどう使うか見てみましょう。
👀サンプル:if と unless の使い方
IF文の基本の書き方は、{% if 条件文 %}条件を満たした際のコンテンツ{% endif %} です。
{% endif %}は、終わりの印なので忘れないようにします。
{% if module.checkbox == 'true' %}
1)チェックされてる時だけ表示 ✅
{% endif %}
ページ編集画面でチェックしていると、中に表示されている文言が表示されます。
HubSpotでは 'true' や 'false' は文字列として扱われるため、クォーテーションで囲む必要があります。
{% if module.checkbox == 'false' %}
2)チェックされてない時だけ表示 ❌
{% endif %}
ページ編集でチェックしていると、中に表示されている文言が表示されなくなりました。
チェックボックスを空にすると、中に設定した文言が表示されるようになります。
{% if module.checkbox %}
3)チェックされてたら表示 ✅
{% endif %}
デフォルト値はtrueなので、ページ編集でチェックしていると 中に表示されている文言が表示されます。
{% if module.checkbox == 't' %}
4)非推奨:チェックされてたら表示 ✅
{% endif %}
前述の通り、デフォルト値はtrueなので、
ページ編集でチェックしていると 中に表示されている文言が表示されますが
どんなツールでも正しくコードを書くのがベストプラクティスだと思います。
{% unless module.checkbox %}
5)チェックされてない時だけ表示 ❌
{% endunless %}
逆に 特定の場合だけ除外する場合、UNLESS文を使用して除外条件を指定する方が便利です!
📌 今日のメモ
ブール値がチェックされた状態は"true"、チェックが外された状態は"false" を指定します。
また、デフォルトのブール値は true。
falseを指定しない限りはチェックされていることが前提になるので、スペルミスに気を付ける。
▍テスト時に、チェックをしているとき
▍テスト時に、チェックを外しているとき
📣 次回予告
次回は、スタイルタブでユーザーがページ編集画面で 色などのデザインを調整できるようにする方法を紹介予定です✨