ある和紙メーカー様のワードプレスサイトへ会員様向けに、和紙での名刺を作成注文できるシステム作成をワードプレスドクターで作成させていただきましたので依頼事例をご紹介いたします。
和紙メーカ様の名刺作成システムの要件
こちらのシステム制作のご依頼の内容は下記のようなものでございました。
●ユーザーが名刺の情報を入力することで、リアルタイムに名刺のプレビューができる
●注文後にPDFでそのまま印刷できる形でメールで管理者側に注文データが届く
PDFは、そのまま版下にご利用可能とのことで、ワードプレスに組み込んだPHPシステム上にPDF出力とメール送信を行えばメールで版下PDFの添付を行って送信可能です。
様々な仕組みを組み合わせてシステム制作を実現させています
１ユーザーが名刺の情報を入力することで、リアルタイムに名刺のプレビュー
ユーザーがフォームに入力を行うと、上部にあるリアルタイムプレビュー画面が自動更新されます。この仕組みにはJQUERY、JAVASCRIPTを利用します。また、名刺のレイアウトにはJSで自由位置に要素を置いてドラッグドロップできる特殊なライブラリを利用します。
２最終プレビュー
上記入力情報や座標を元に、画像化して最終プレビュー画面を表示します。
３PDF化とメール送信
ユーザーの入力した情報と、ボックスの位置を元にPDFをプログラム上で作成してメールに添付して送信します。PDFはPHPのライブラリを使うとボックス位置、フォント、テキストなどをプログラムから指定して作成することが可能です。
このPDFをメールに添付して管理者側と、お客様側(注文控え)を同時送信します。
