打ち消し線価格と割引バッジを表示する
実際の価格の横に打ち消し線付きの価格を並べると、割引がひと目でわかります。このレシピでは、年間プロダクトのカードを改造して、月額プランでの月額料金を打ち消し線付きで表示し、その横に年間プランの実質月額価格を並べ、さらに割引バッジを追加します。 取り消し線のフォーマットはテキスト要素全体に適用されるため、大きなテキストの中の変数だけに取り消し線を引くことはできません。そのため、取り消し線が引かれた価格は独立したテキスト要素として配置し、水平コンテナの中で割引価格と横に並べます。
始める前に
- プロダクトを表示するペイウォール画面を作成してください。たとえば、基本的なペイウォール画面の作成を参考にしてください。このレシピでは、ペイウォールが年間プランと月間プランの2つのプロダクトを提供していることを前提としています。
1. 価格行を重ねる
年間カードは最初、単一の価格行（年間プロダクトの prod_price 変数に /year を付けたもの、例: $29.99/year）だけで始まります。その上に月額換算の価格行を追加しましょう。
- Layers パネルで、年額プロダクトカード内の価格テキストを選択します。テキストはすでにカードの縦方向コンテナ内にあるため、コピーはその下に積み重なります。
- レイヤーの3点メニュー をクリックし、Duplicate を選択します。コピーが元のテキストの下に表示されます。次のステップで、上のテキストが月額価格の行になり、下のテキストが年額価格のままになります。
2. 月次行を2つの価格に分割する
月次行には、取り消し線付きの月額プランの価格と、年間プランの1か月あたりの価格という2つのテキスト要素が含まれています。
変数ピッカーには、フロースクリーンに存在するプロダクトの価格のみが表示されます。フローに含まれていないプロダクトを参照するには、空のスクリーンを作成して Products 要素を追加し、そのプロダクトを割り当ててください。そのスクリーンへのナビゲーションアクションが設定されていないことを確認してください。
-
上部のテキスト要素を選択し、三点メニューをクリックして、Wrap > Wrap in Horizontal Container を選択します。
-
新しいコンテナ内のテキストレイヤーの三点メニューをクリックし、Duplicate を選択します。
-
最初のテキスト要素を選択し、Content フィールドをクリアします。変数アイコン
をクリックし、月額プロダクトを選択して prod_price_per_month属性を選びます。変数の後に/monthと入力します。 -
Design タブの Typography で、Decoration を Strikethrough に設定します（要素のスタイリング — Decoration を参照）。
-
2つ目のテキスト要素を選択し、同じ方法でコンテンツを置き換えます。ただし、年額プロダクトの
prod_price_per_month属性を選択します。変数の後に/monthと入力します。
3. 年間価格の表示を控えめにする
複製した月額価格は元のスタイルを引き継いでいるため、3つの価格がすべて同じサイズ・ウェイトで表示されています。月額行が目立つよう、年間価格をより控えめなスタイルに変更しましょう。
- キャンバス上で、一番下のテキスト要素（年間価格）を選択します。
- 要素上部のツールバーでテキストスタイルのドロップダウンを開き、より控えめなスタイルを選択します（例：Caption）。または、Design タブの Typography から別のスタイルを選んでください。
4. 割引バッジを追加する
バッジは価格の横に節約額を強調表示します。
- + > Badge をクリックします。
- Layers パネルで、バッジを年間プロダクトの内部（価格の縦方向コンテナとラジオボタンの間）にドラッグします。
- バッジのテキストレイヤーを選択し、Content フィールドを編集します（例：
Save 75%）。
割引率の変数はないため、価格から計算して静的テキストとして入力してください。
これで年間カードは月額プランを基準価格として表示します。打ち消し線付きの月額料金、年間プランの月換算料金、割引バッジが1行に並び、その下に年間の合計金額が表示されます。
次のステップ
- フローを保存して公開する
- プレースメントにフローを追加することで、ユーザーへの表示を開始できます。