Bloosh Company

2021年7月26日

Development>WordPress

Welcartにメッセージカードオプションを追加する!

, , ,

Welcartのオーダーオプションを利用して、メッセージカードオプションを追加する方法です。

①管理画面からオプションを追加


まずは管理画面のWelcart Shop → カートページ設定 → カスタム・オーダーフィールドに追加します。フィールドキーはmessage_textにしておきます。タイプは「テキストエリア」にします。「新規追加」をクリックしてしっかり追加してください。
 

②注文画面の印刷フィールドにメッセージ印刷リンクを追加

Welcart Management → 受注リストの注文番号をクリックして受注データ編集画面を開いてください。お客さんがオプションのメッセージを入力している場合、カスタム・オーダーフィールドに表示されます。

ここまで来たら、手作業でメッセージカードを作成しても良いですが、印刷フィールドから自動で出力したいものです。

下記のコードをテンプレートフォルダのfunctions.phpに追加してください。


/*メール・印刷フィールドに項目を追加*/
add_filter( 'usces_filter_admin_ordernavi',  'my_usces_filter_admin_ordernavi', 10, 3 );
function my_usces_filter_admin_ordernavi( $td, $ordercheck ) {
	$order_id = isset( $_REQUEST['order_id'] ) ? (int) wp_kses( wp_unslash( $_REQUEST['order_id'] ), array() ) : 0;

	$message_text = usces_get_custom_field_value("order", "message_text", $_REQUEST['order_id'], "return");


	if(!$message_text){
		return $td;
	}

	$td = '<td><input name="check[messagecard]" type="checkbox" value="messagecard"';
		if ( isset( $ordercheck['messagecard'] ) ) {
			$td .= ' checked="checked"';
		}
		$td .= '/><a href="#" id="messagecard">メッセージカード印刷</a></td>';
	return $td;
}
add_filter( 'usces_filter_order_edit_page_js',  'my_usces_filter_order_edit_page_js', 10, 3 );
function my_usces_filter_order_edit_page_js( $js, $order_id ) {
	$js = "$('#messagecard').click(function() {
			uscesMail.ordercheckpost('messagecard');
			window.open ( '" . esc_url_raw( USCES_ADMIN_URL . '?page=usces_orderlist&order_action=pdfout&noheader=true&order_id=' . $order_id ) . "&type=messagecard', '_blank');
		});
		let checks = document.querySelectorAll('#mailBox [type=\"checkbox\"]');
		for(let i = checks.length; i--;) {
			checks[i].disabled = 'disabled';
		}"; //ついでにチェックボックスをdisabledに変更
	return $js;
}

Welcartのメール・印刷フィールドのチェックボックスって、クリックしても何も起きません。送信済みまたは印刷済みなら自動でチェックが付きます。紛らわしいのでついでにdisabledにしています。印刷フィールドのキーワードはmessagecardにしておきます。
 

③PDF作成テンプレートを切り替える

このままでは、印刷フィールドの「メッセージカード印刷」リンクをクリックしても、領収書や納品書と同じフォーマットのPDFが出力されます。メッセージオプションのテキストを読み込んで出力させたいので、まずはテンプレート作成ファイルを切り替えます。先ほどのfunctions.phpに下記のコードを追加してください。

/*PDFファイル作成*/
add_filter( 'usces_filter_orderpdf_path_ex',  'my_usces_filter_orderpdf_path', 10, 1 );
add_filter( 'usces_filter_orderpdf_path',  'my_usces_filter_orderpdf_path', 10, 1 );
function my_usces_filter_orderpdf_path($file) {

	if($_REQUEST['type'] == "messagecard") {
		$file = get_template_directory() . "/message.php";
	}

	return $file;
}

 

④PDF作成テンプレートを設置

下記コードをコピペして、message.phpをテンプレートフォルダに保存してください。

<?php
global $usces;

require_once( USCES_PLUGIN_DIR . '/pdf/tcpdf/tcpdf.php' );
require_once( USCES_PLUGIN_DIR . '/classes/orderData.class.php' );
define( 'USCES_PDF_FONT_FILE_NAME', 'msgothic.php' );

//はがきサイズは(100,148)
$pdf = new TCPDF( PDF_PAGE_ORIENTATION, PDF_UNIT, array(100, 148), true, 'UTF-8' );
$usces_pdfo = new orderDataObject( $_REQUEST['order_id'] );
do_action( 'usces_action_order_print_start' );

$pdf->AddPage();

// フォント設定
$font_ob = new TCPDF_FONTS();
$font_file_name = apply_filters( 'usces_filter_pdf_font_file_name', USCES_PDF_FONT_FILE_NAME );
$font = $font_ob->addTTFfont( USCES_PLUGIN_DIR . '/pdf/tcpdf/fonts/' . $font_file_name );
$pdf->SetFont( $font, '', 24 );


//テキストを取得
$text = usces_get_custom_field_value("order", "message_text", $_REQUEST['order_id'], "return");
if($text){
	$text = nl2br($text);
} else{
	$text = "メッセージが取得できませんでした";
}

//背景画像
$card = get_template_directory() . "/img/bluesky.jpg";

//改ページ禁止
$pdf->SetAutoPageBreak( false, 0 );

//画像をページ全体に貼り付け。はがきサイズは(100,148)
$pdf->Image($card, 0, 0, 100, 148, '', '', '', false, 300, '', false, false, 0);


$html = <<<EOM
	<style>
		table{
			width:100%;
			vertical-align:middle;
			text-align:center;
			padding-top:100px;
		}
	</style>
	<table><tr><td>$text</td></tr></table>
EOM;


$pdf->writeHTML($html);
$pdf->Output('message.pdf', 'I');

die();

元々のPDF作成テンプレートルートディレクトリ → wp-content → plugins → usc-e-shop → includes → order_print.phpを改造しました。ポストカードサイズにしたかったので、100, 148を指定しています。他にB6とかA6とか指定できるみたいです。詳しくは、ここで使われているPDF作成のライブラリTCPDFで調べてみてください。
 
また、本家テンプレートでは座標を指定してPDF作成してますが、ここではHTMLを使用しました。でも、すべてのHTMLタグやCSSが使用できるわけではないので、そこも調べてみてください。なぜかtableタグのみpaddingが使用できるらしいです…。
 
背景画像として指定してるテンプレートディレクトリ → img → bluesky.jpgを設置して、完成です。
 
管理画面に戻って、印刷フィールドから「メッセージカードを印刷」リンクをクリックすると・・・

できました!
自動でチェックボックスにチェックも入ってます。

Welcartにメッセージカードオプションを追加する! #WordPress #pdf #welcart #オプション #メッセージ

<<次の記事

ACFとlightgallery.jsで無限に画像を追加する

前の記事>>

Welcartのサンキューメールに商品画像を添付する方法!