動的テーブル ブロックで行をスキップする方法
このページで学べること
動的テーブルブロックで行（例：アイテム）をスキップする方法を確認してください。この最も一般的なユースケースは、カゴ落ちメールから配送保険や無料ギフトアイテムなど、関係のないアイテムを非表示にすることです。ただし、動的テーブルブロックを使用する任意のメールで、以下の手順に従うことができます。
このプロセスでは、メールのコードを直接編集します。これは、技術に詳しいマーケター、またはデベロッパーにアクセスできる場合にのみ推奨されます。サポートチームは、このドキュメントで説明している一般的なガイダンスを超えて、カスタムコードの作成を支援できません。データのセキュリティを維持するため、Klaviyo のサポートチームでは HTML ファイルを開くことはできません。
始める前に
この記事では、既存の動的テーブルブロックからアイテムを非表示にする方法について説明します。まだ動作する動的テーブルブロック（例：カゴ落ちメールまたは注文確認メール内の商品）を作成していない場合は、ゼロから作成する方法をご覧いただくか、フロー ライブラリのメッセージから開始してください。
if ステートメントを記述する
テンプレートに変更を加える前に、テキストエディターまたはコードエディターを使用してコードスニペットを 2 つ作成します（後でスニペットをコピー＆ペーストできる場所で行ってください）。各コードスニペットは 3 つのパートで構成されます：
開始 if タグを作成する
if タグを開く例をいくつか紹介します：
タグ | 意味 |
{% if item.price != 0 %} | 商品価格（item.price）が 0 以外の場合。 |
{% if item.product.name != "Route Shipping Insurance" %} | 項目名（item.product.name）が「Route Shipping Insurance」以外の場合。 |
{% if not "T-Shirt" in item.product.title %} | アイテムのタイトル（item.product.title）に「T-Shirt。」が含まれない場合。 |
{% if item.title %} | アイテムのタイトル（item.title）が設定されている（つまり、任意の値がある）場合。 |
これらのタグは大文字と小文字が区別され、データと完全に一致している必要があります。たとえば、商品の価格の変数が item.price ではない場合（例：item.Price または item.details.line_price）、データソースに合わせてコードを更新してください。
if ステートメントのコンテンツを作成します
コンテンツについては、次の手順に従ってダイナミック テーブル ブロックの既存コンテンツを使用します。このコードスニペットをコードまたはテキスト エディタに記述します。次のセクションでテンプレートに追加します。
- テーブルブロックの画像の Cell Content で、[置換] をクリックして画像プレースホルダーを表示します。
- 動的変数または動的 URLフィールドからコード全体をコピーします。これは単純な動的変数の場合もあれば、より長いコードスニペットの場合もあります；長さに関係なく、すべてコピーしてください。
- このコードスニペット内のプレースホルダーを、Dynamic variable or dynamic URL フィールドからコピーしたコードに置き換えます。
<img src="PLACEHOLDER" style="width: 200px; height: auto;" width="200">既存のテーブルブロックに画像用のシンプルな動的変数がある場合、結果のコンテンツは次のようになります。
<img src="{{item.product.variant.images.0.src}}" style="width: 200px; height: auto;" width="200"> 既存のテーブルブロックにより長いコードスニペットが含まれている場合、生成されるコンテンツは次のようになる場合があります。
<img src="{% if item.product.variant.images.0.src %}{{item.product.variant.images.0.src}}{%else%}{{item.product.images.0.src|missing_product_image}}{%endif%}" style="width: 200px; height: auto;" width="200">終了タグを追加します
次に、すべてのコンテンツをまとめます。冒頭の if 文、次にコンテンツ、最後に閉じ {% endif %} タグを配置します。
テキストコンテンツについても繰り返します
次に、テーブル ブロックの右側のコンテンツ（例：テキスト コンテンツ）でも、このプロセスを繰り返します。[</>] をクリックしてコード エディターを開き、HTML コンテンツをすべてコピーしてから、このコンテンツを画像コンテンツで使用したのと同じ if ステートメント（手順 1 と 3）で囲みます。
すべてをまとめると次のようになります：
コードスニペット 1（商品画像） | コードスニペット 2（商品詳細） |
|
|
以下は、それらのコードスニペットの内訳です：
コードスニペット 1（商品画像） | コードスニペット 2（商品詳細） |
|
|
これらのコードスニペットを使用する際は、コードが正しくレンダリングされるように、スマート引用符（“）ではなくストレート引用符（"）を使用してください。
両方のコードスニペットを作成したら、以下の手順に従ってテンプレートエディタで続行します。
動的テーブル ブロックで行をスキップする
動的テーブルブロックを編集する前に、後のメッセージで参照できるように、元のブロックをユニバーサルコンテンツとして保存することを検討してください。次にブロックのリンクを解除し、ユニバーサルコンテンツブロックに編集内容が保存されないように、別個に編集します。
- メールがフローの一部である場合は、フローのメッセージを編集している間にメッセージが送信されないよう、下書きまたは 手動に設定します。
- 新しいテーブル ブロックの両方の列の セル コンテンツ が テキスト に設定されていることを確認してください。
- [</>] をクリックして、テーブルブロックの左側用の HTML エディターを開きます。
- 前のセクションで作成した商品画像のコードスニペットをコピーし、HTML フィールドに貼り付けてください。
- 左上の [完了] をクリックします。
- テーブルブロックの右側のエディターに進みます。
- </> をクリックして、テーブル ブロックの右側の HTML エディタを開きます。
- 前のセクションで作成した商品詳細のコードスニペットをコピーし、以前のコンテンツをすべて置き換えて HTML フィールドに貼り付けます。
- [完了] をクリックします。
- メールをプレビューして、想定どおりに表示されることを確認してください。スキップしたアイテムは表示されず、他のすべてのアイテムは通常どおり表示されます。非表示にしようとしているアイテムを含むイベントで必ずプレビューし、非表示になっていることを確認してください。
条件文とインラインテキスト エディター
特定の条件文をテキストブロックに追加すると、インラインテキストのエディター上に表示されなくなる場合があります。しかし、コードはまだ存在しており、単に非表示になっているだけです。条件付きステートメントを表示して編集するには、Django タグ ビルダー を使用するか、コンテンツを専用の HTML ブロックに移動してコードを直接編集します。
次のタグはインライン テキスト エディタには表示されませんが、テキスト ブロックには残ります。
- {% for ... %}
- {% endfor %}
- {% if ... %}
- {% elif ... %}
- {% else %}
- {% endif%}
- {% with ... %}
- {% endwith %}
トラブルシューティング
プレビューに項目が表示されません
- 使用したデータソースに一致するイベントでプレビューしていることを確認してください（例：カゴ落ちメッセージの場合は Started checkout）。
- 次の回数だけ繰り返す と 行エイリアス が、元のブロックの 行コレクション と 行エイリアス と完全に一致していることを確認してください。
スキップする必要がある項目が引き続き表示されている
if ステートメントのスペルと大文字・小文字を確認してください。商品が引き続き表示される場合は、if ステートメントの条件を満たしていることを意味します。そのため、if ステートメントが正しく構成されていません。詳しくは、テンプレートの条件付きロジックをご覧ください。
達成できること
これらの手順に従うと、if ステートメント内の条件を満たさないアイテムは、カゴ落ちや注文確認メールなどのメッセージに表示されなくなります。
その他のリソース
- メッセージのパーソナライズに関するレファレンス
Klaviyo のテンプレートタグを使って、顧客体験をカスタマイズする方法について説明します。
- カスタム HTML テンプレートをインポートする方法
Klaviyo にカスタム HTML テンプレートをインポートする方法についてはこちらをご覧ください。