２０２４.４.２６公開：　もうリピート注文で悩まない！顧客が顧客を呼ぶ機能！？１日でできるお中元・お歳暮商戦のベストアンサー

ＬＰカートの注文フォームを商品ページに設置する

TOP > 制作 > ランディングページ

１ ＬＰカートを設定する

ＬＰカートの販売ページ、および確認画面、完了画面を作成します。

ＬＰカート注文フォームの商品ページへの設置は、大まかに言えばＬＰカート販売ページを通常どおり作成し、
iframeタグを利用して商品ページに差し込むイメージです。そのため、まずはＬＰカート販売ページを通常どおり作成します。


このＬＰカート販売ページでは、注文フォームを設置したい商品ページと同じ商品を登録します。


販売ページ内容欄のＨＴＭＬソースから、初期値の「ヘッダ設定」「フッタ設定」というテキストを削除すれば、
注文フォームのみのページになります。



ＬＰカートの設置方法は他のページでご案内していますので、そちらをご覧ください。
注文フォーム一体型ランディングページを作成する

２ 商品ページを編集する



ＬＰカートの注文フォームを設置したい商品の編集画面を開きます。

■ＬＰカートの注文フォームを設置する記述を入力します

商品紹介文の欄に、ＬＰカートの注文フォームを設置する記述を入力します。具体的な記述は次の項目をご確認ください。

  • カスタムテンプレートの場合
    通常はメイン紹介文をご利用ください。
    サブ紹介文1、2は、初期状態では非表示であるため、利用するにはＨＴＭＬのカスタマイズが必要です。
    カスタムテンプレートの商品ページのサブ紹介文 1、2 を表示する
  • ベーシックテンプレートの場合
    サブ紹介文をご利用ください。
    メイン紹介文はカートボタンよりも上に表示されるため、メイン紹介文への入力はお勧めしません。
  • スマートフォンサイトの場合
    サブ紹介文をご利用ください。
    スマートフォンサイト用商品ページのメイン紹介文エリアには「続きを見る」ボタンが表示されるため、注文フォームが途切れてしまうため、メイン紹介文はお勧めしません。


ＨＴＭＬエディタをＯＮにしている場合は、ＨＴＭＬソースエディタを開き、デフォルトで入力されている<div></div>を削除してから入力してください。

■ＬＰカートの注文フォームを設置する記述


以下ＨＴＭＬソースの「販売ページのＵＲＬ」と「幅」を調整してご利用ください。
<iframe id='lpc_frame' src='https://店舗のドメイン/lpc/管理コード' style='width:100%' frameborder='0' scrolling='no'></iframe>

<script>
var iframe = document.getElementById("lpc_frame");
var userAgent = window.navigator.userAgent.toLowerCase();
var isMs = (userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1 || userAgent.indexOf('edge') != -1);
var isSafari = (userAgent.indexOf('safari') != -1 && userAgent.indexOf('chrome') == -1);

function changeLpIframeHeight(){
if(isMs || isSafari){
iframe.style.height = iframe.contentWindow.document.body.clientHeight + 30 + "px";
} else {
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 30 + "px";
}
}

iframe.onload = function(){
changeLpIframeHeight();
};

</script>
  • オレンジ文字の部分は、「１ ＬＰカートの設定をする」で作成したＬＰカート販売ページのＵＲＬを記述してください。
  • 青文字の部分は表示する「幅」です。
    テンプレートや、商品のバリエーション、オプション選択肢のテキストの長さによって異なります。
    そのため、100%では注文フォームの端が切れることがあり、商品ページごとにサイズを調整する必要があります。
    また、「%」で指定すると、スマートフォン用の表示になるテンプレートもあり、その場合は「px」で指定してください。

■「カートボタンエリア」のチェックを外します

下にスクロールし、「カートボタンエリア」のチェックを外します。合わせて「在庫をみるボタン」も外します。

「カートボタンエリア」のチェックを入れたままにしておくと、バリエーションやオプションの選択肢などの表示が、商品ページに標準で表示されているものと注文フォーム内のものと重複表示した状態になるため、チェックを外します。

■入力内容を保存します

画面下部の「保存して次へ」ボタンをクリックして、商品情報の変更を完了します。


ブラウザ「Safari」では、ブラウザの仕様に起因する理由により、ＬＰカートの注文フォームを設置した商品ページのプレビューを表示できません。