ワンクリックで購入できるようなランディングページを作成してみた 2
2020/11/08
さ~実践です!
以下は私がやった流れなんで間違いとかあるかもしれません。
①全ファイルをアップロード
②各ファイルパーミッション変更(マニュアル参照!)
③cgiconfig.cgiファイル
使用するモジュールの変更
フォームの送信先アドレス設定
→その他の設定は後からおいおいやっても大丈夫!
④paypal設定
アップロードフォルダ/mailformpro/configs
変更するのはここ!
APIエンドポイント{‘HOST’}(APIサービスへのURL)
APIユーザー名{‘API_USER’}
APIパスワード{‘API_PWD’}
署名{‘API_SIGNATURE’}
{‘REDIRECTURI’}
Sandbox:環境 https://api-3t.sandbox.paypal.com/nvp【初期設定はこっち】
本番環境: https://api-3t.paypal.com/nvp
サンドボックス環境で試すならそのまま【初期設定はこっち】
(’https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_express-checkout&token=’;)
本番環境にするなら
‘https://www.paypal.com/cgi-bin/webscr?cmd=_express-checkout&token=’;
⑤ショッピングカート機能をオンにする
config.cgiの中にある
push @AddOns,’cart/cart.js’;
push @Modules,’cart’;
をそれぞれ有効に。
その他使いそうな機能をオンにしていく
(後でオンにしたことを忘れないように注意!)
⑥最初のアクセスページ(index.html)作成
⑦「example.html」をベースにindexページを作成(ファイルをコピーしてリネームするだけ)
「カートに追加」ボタンを作成した「index.html」ページへ追加
→shopping.htmlファイルから
1 2 3 4 |
<!--メールフォームプロ カート用ファイル--> <link rel="stylesheet" href="/mfp.statics/cart.css" type="text/css"> <script type="text/javascript" src="mfp.statics/cart.js"></script> <!--/メールフォームプロ カート用ファイル--> |
を/headタグ直前にいれてそれぞれパスを修正
<!–カートに入れるサンプル–>のコードを「カートに入れる」ボタンを設置したい場所へ挿入
(examples/shopping.html 内のコード参照ね!)
名称・金額などを変更、「action」「data-href」のパスを変更(フォームを設置したファイル名と場所にあわせる)
商品IDから価格情報などを呼び出さず、
HTMLから価格などをカートに送る場合は
configs/cart.cgi を編集し、
1 |
<span>$config{'file.item'} = './configs/Items.tsv';</span> |
をコメントアウトしてください。
↑これしないとカートに入れるから購入フォーム画面にデータが届かないみたい
⑧フォーム入力ページを編集
20行目くらい
1 |
<script type="text/javascript" src="examples/example.js"></script> |
はサンプルページのセレクタなのでコメントアウトする
<!–メールフォームプロ用CSS–>のパスを変更
<!–メールフォームプロ–> 「action」のパスを変更