「ペイディ分割払いアップセルウィジェット」表示方法

Paidy社より提供されている、ウィジェット表示用のスクリプトを「フリーパーツ」に登録します。

  <script src="https://cdn.paidy.com/promotional-messaging/general/paidy-upsell-widget.js" defer="defer"></script>
  <div class="_paidy-promotional-messaging" data-amount="{% product.tax_in_price_raw %}"></div>

  <script src="https://cdn.paidy.com/promotional-messaging/general/paidy-upsell-widget.js" defer="defer"></script>
  <div class="_paidy-promotional-messaging" data-amount="{% product.tax_in_price_raw %}" data-6-pay-enabled></div>

<script src="https://cdn.paidy.com/promotional-messaging/general/paidy-upsell-widget.js" defer="defer"></script>
<div class="_paidy-promotional-messaging" data-amount="{% product.tax_in_price_raw %}" data-6-pay-enabled data-12-pay-enabled></div>

［手順1］で作成した「フリーパーツ」を、「商品詳細」画面のレイアウトに配置し、表示させます。

以下の手順では例として「PC・タブレット」に関して設定を行っております。表示したいテーマとレイアウトを適宜選択し、操作してください。
スマートフォンやタブレットで、テーマを分けている場合は、それぞれのテーマでの操作が必要です。

【2-1】「レイアウト一覧」より、ウィジェットを表示させたい商品詳細の「レイアウト変更」画面を開きます。

※例として、「商品詳細（横2列レイアウト）」を利用した「商品詳細」画面に表示します。

を押下すると、レイアウトに配置する（画面に表示する）コンテンツを調整する「レイアウト変更」画面に遷移します。

【2-2】「レイアウト変更」画面にて、「商品名・価格など商品情報」を開きます。

BODY＞メインエリア＞コンテンツエリア＞商品詳細エリア＞商品名・価格など商品情報

【2-3】「パーツ検索エリア」で配置するパーツを検索します。

【2-4】左の「パーツ配置エリア」にドラック＆ドロップで配置します。

「（例）ペイディ分割払いアップセルウィジェット」パーツを左の「パーツ配置エリア」にドラック＆ドロップで配置します。
「商品価格パーツ」の下に配置してください。

※フリーパーツ用の置換文字、「販売価格（OGP）{% product.tax_in_price_raw %}」は、「商品詳細エリア」以下に含まれるエリアでのみ、正しく動作します。配置エリアを必ずご確認ください。

【2-5】プレビューして表示を確認します。

保存前にプレビューで確認が行えます。［プレビュー］を押下します。

プレビューモードを選択するモーダルが開きますので、「デザイン確認モード」を選択し、［プレビューを表示する］を押下します。
ECサイトのトップが表示されますので、該当レイアウトを利用している「商品詳細」画面まで遷移し、ウィジェットが表示されているか確認してください。

表示が確認できたら、［保存する］を押下します。

特定の商品にのみウィジェットを表示したくない場合 「商品タグ」と「レイアウトパーツ」の「表示条件」機能を利用して行います。
詳しい手順については、「商品タグ」を用いた「ペイディ分割払いアップセルウィジェット」の非表示方法をご覧ください。

以上で表示設定は完了です。

Paidy社より提供されている、ウィジェット表示用のスクリプトを「フリーパーツ」に登録します。

※通常・予約商品と同様です。通常・予約商品用に作成済みの「フリーパーツ」がある場合には、そちらをご利用いただけます。（あたらに作成いただく必要はありません。）

<script src="https://cdn.paidy.com/promotional-messaging/general/paidy-upsell-widget.js" defer="defer"></script>
<div class="_paidy-promotional-messaging" data-amount="{% product.tax_in_price_raw %}"></div>

<script src="https://cdn.paidy.com/promotional-messaging/general/paidy-upsell-widget.js" defer="defer"></script>
<div class="_paidy-promotional-messaging" data-amount="{% product.tax_in_price_raw %}" data-6-pay-enabled></div>

<script src="https://cdn.paidy.com/promotional-messaging/general/paidy-upsell-widget.js" defer="defer"></script>
<div class="_paidy-promotional-messaging" data-amount="{% product.tax_in_price_raw %}" data-6-pay-enabled data-12-pay-enabled></div>

［手順1］で作成した「フリーパーツ」を、「商品詳細（定期）」画面のレイアウトに配置し、表示させます。

以下の手順では例として「PC・タブレット」に関して設定を行っております。表示したいテーマとレイアウトを適宜選択し、操作してください。スマートフォンやタブレットで、テーマを分けている場合は、それぞれのテーマでの操作が必要です。

【2-1】「レイアウト一覧」より、ウィジェットを表示させたい商品詳細の「レイアウト変更」画面を開きます。

例として、「商品詳細(定期)（横2列レイアウト）」を利用した「商品詳細(定期)」画面に表示します。

を押下すると、レイアウトに配置する（画面に表示する）コンテンツを調整する「レイアウト変更」画面に遷移します。

【2-2】「レイアウト変更」画面にて、「商品名・価格など商品情報」を開きます。

BODY＞メインエリア＞コンテンツエリア＞商品詳細エリア(定期)＞商品名・価格など商品情報

【2-3】「レイアウトパーツ」を設定します。

「商品名・価格など商品情報」を開いた状態で、「パーツ配置エリア」下に表示されている［レイアウトパーツを追加する］ボタンを押下します。

表示された「レイアウトパーツ設定」モーダルの「パーツ名」に、「ペイディ分割払いアップセルウィジェット表示用（3回用）（任意に設定してください。）」と入力します。

入力完了後、［OK］を押下します。

【2-4】追加した「レイアウトパーツ（ペイディ分割払いアップセルウィジェット表示用）」の表示位置を変更します。

【2-5】「レイアウトパーツ（ペイディ分割払いアップセルウィジェット表示用）」に表示条件を設定します。

「（例）ペイディ分割払いアップセルウィジェット表示用（3回用）」の「レイアウトパーツ」のを押下し、表示されたメニューから「表示条件を選択する」を押下します。

表示された「表示条件を設定」モーダルにて、「定期販売方法」にチェックし、「通常・定期」を選択します。
選択後、［OK］を押下しモーダルを閉じます。

【2-6】「レイアウトパーツ（ペイディ分割払いアップセルウィジェット表示用）」を開きます。

【2-7】「パーツ検索エリア」で配置するパーツを検索します。

【2-8】左の「パーツ配置エリア」にドラック＆ドロップで配置します。

「フリーパーツ（ペイディ分割払いアップセルウィジェット（3回用））」を、先ほど「パーツ配置エリア」で開いた「レイアウトパーツ（ペイディ分割払いアップセルウィジェット表示用（3回用））」内に、ドラック＆ドロップで配置します。

【2-9】プレビューして表示を確認します。

保存前にプレビューで確認が行えます。［プレビュー］を押下します。

プレビューモードを選択するモーダルが開きますので、「デザイン確認モード」を選択し、［プレビューを表示する］を押下します。
ECサイトのトップが表示されますので、該当レイアウトを利用している「商品詳細（定期）」画面まで遷移し、ウィジェットが表示されているか確認してください。

「通常・定期商品」のみ、ウィジェットが表示されていることが確認できたら、［保存する］を押下します。

以上で表示設定は完了です。

※あと払い（ペイディ）は定期販売ではご利用いただけませんので、必要に応じて注釈をご記載いただきますようお願いいたします。

こちらの手順で追加したウィジェット表示用の「フリーパーツ」に「非表示用」の「class」を追加します。

※「3回払いでの月々の金額を表示するウィジェット」で例示します。
※（★）が追記部分です。「class（例：paidy-widgetNodisplay）」名は任意に指定して結構です。

--------------------------

<div class="paidy-widgetNodisplay"> ←（★）
    <script src="https://cdn.paidy.com/promotional-messaging/general/paidy-upsell-widget.js" defer="defer"></script>
　　<div class="_paidy-promotional-messaging" data-amount="{% product.tax_in_price_raw %}"></div>
</div>　←（★）

「class（例：paidy-widgetNodisplay）」にてウィジッドを非表示にするCSSを「フリーパーツ」で用意します。

※（例：paidy-widgetNodisplay）を任意で指定した「非表示用」の「class」名に変更してください。

--------------------------

<style type="text/css">
　　.paidy-widgetNodisplay{display:none;}
</style>

登録完了後、［保存する］を押下します。

こちらの手順の通りにウィジェット表示用の「フリーパーツ（例：ペイディ分割払いアップセルウィジェット（3回用））」を配置します。

以下の手順では例として「PC・タブレット」に関して設定を行っております。
表示したいテーマとレイアウトを適宜選択し、操作してください。スマートフォンやタブレットで、テーマを分けている場合は、それぞれのテーマでの操作が必要です。

【4-1】「商品詳細エリア」を開きます。

操作中の「商品詳細」レイアウトの、階層を示すパンくずにて、「商品詳細エリア」を押下し「商品詳細エリア」を開きます。

【4-2】［レイアウトパーツを追加する］ボタンを押下し、「レイアウトパーツ」を設定します。

例では、パーツ名を「ペイディ分割払いウィジェット表示制御」としました。

レイアウトパーツ追加完了

【4-3】「レイアウトパーツ」の表示条件を設定します。

【4-4】「レイアウトパーツ」内に、「フリーパーツ（例：ペイディウィジェット非表示のCSS）」を配置します。

　を押下し、「レイアウトパーツ（例：ペイディ分割払いウィジェット表示制御）」を開きます。

右の検索エリアから「非表示用」のCSSを記述した「フリーパーツ（例：ペイディウィジェット非表示のCSS）」を検索表示し、左のパーツ配置エリアにドラッグ＆ドロップします。

【4-5】プレビューして表示を確認します。

保存前にプレビューで確認が行えます。［プレビュー］を押下します。

プレビューモードを選択するモーダルが開きますので、「デザイン確認モード」を選択し、［プレビューを表示する］を押下します。
ECサイトのトップが表示されますので、該当レイアウトを利用している「商品詳細」画面まで遷移します。

指定した「商品タグ」が設定されている商品と設定されていない商品の「商品詳細」画面をそれぞれ表示し、「商品タグ」が設定された商品のみ、ウィジェットが表示されていないことを確認してください。

確認できたら、［保存する］を押下します。

以上で表示設定は完了です。