WelcartのSKUに入力項目を複数追加する

1ヶ月ぶりの更新です。
東京でも雪降ったり、最近は冬本番って感じですね。
まぁ、それでも平年に比べると暖冬とのことですが、寒いの寒いすね。。

てことで、最近、個人で請け負ってる仕事で、
WordPressのEC用プラグインWelcartをいじる機会があったので、その時の備忘録。

ご要望で、SKUに新規の入力項目を追加したい、と声をいただきまして、
とりあえずググると、良記事を発見!(非常に助かりました。ありがとうございます。
WelcartのSKU内にオリジナル入力項目を追加する。

Welcartには、SKU追加時の対応のため、初めからadvanceという拡張領域を用意してくれてるようです。
ただ、上記の記事そのままだと、管理画面の入力項目のtableに、複数の入力エリアを追加出来なかったので、プラグインの中身を色々と物色。
すると、item_post.php内に
usces_filter_sku_meta_rowspan
usces_filter_sku_meta_row
usces_filter_newsku_meta_row
というフィルター・フックを発見!
(フィルター・フックなどに関してはこちらをご参考ください)

このフィルター・フックを利用すると、管理画面のhtml側も拡張できます。
てことで、ソースです。
最初の記事に記載のある、
usces_filter_sku_meta_form_advance_title
usces_filter_sku_meta_form_advance_field
usces_filter_sku_meta_row_advance
の処理をコメントアウトしておきます。

そして以下を追記します。

// 管理画面SKU テーブル rowの長さ
add_filter( 'usces_filter_sku_meta_rowspan', 'add_usces_filter_sku_meta_rowspan' );
function add_usces_filter_sku_meta_rowspan(){
	return '6';
}

// 管理画面SKU 更新
add_filter( 'usces_filter_sku_meta_row', 'add_usces_filter_sku_meta_row',10,2 );
function add_usces_filter_sku_meta_row( $default_field, $sku ) {
	$advance = Array (
		'custom1' => '',
		'custom2' => '',
		'custom3' => '',
		'custom4' => '',
		'custom5' => '',
		'custom6' => '',
		'custom7' => '',
		'custom8' => '',
		'custom9' => '',
		'custom10' => ''
	);
	if (isset($sku["advance"])) {
		$list = explode(";", $sku["advance"]);
		foreach ($list as $item) {
			$ele = explode("=", $item);
			if (count($ele) == 2) $advance[trim($ele[0])] = trim($ele[1]);
		}
	}
	return
	'<input hidden type="text" value="'.$sku["advance"].'" id="itemsku[' .$sku["meta_id"]. '][skuadvance]" name="itemsku[' .$sku["meta_id"]. '][skuadvance]" >
		<tr>
			<th class="left">custom1</th>
			<th>custom2</th>
			<th>custom3</th>
			<th>custom4</th>
			<th>custom5</th>
		</tr>
		<tr>
			<th class="left">custom6</th>
			<th>custom7</th>
			<th>custom8</th>
			<th>custom9</th>
			<th>custom10</th>
		</tr>
		<tr>
			<td>
				<input type="text" data-key="custom1" id="itemsku[' .$sku["meta_id"]. '][custom1]" name="itemsku[' .$sku["meta_id"]. '][custom1]" class="metaboxfield addadvance-'.$sku["meta_id"].'" value="'.$advance['custom1'].'">
			</td>
			<td>
				<input type="text" data-key="custom2" id="itemsku[' .$sku["meta_id"]. '][custom2]" name="itemsku[' .$sku["meta_id"]. '][custom2]" class="metaboxfield addadvance-'.$sku["meta_id"].'" value="'.$advance['custom2'].'">
			</td>
			<td>
				<input type="text" data-key="custom3" id="itemsku[' .$sku["meta_id"]. '][custom3]" name="itemsku[' .$sku["meta_id"]. '][custom3]" class="metaboxfield addadvance-'.$sku["meta_id"].'" value="'.$advance['custom3'].'">
			</td>
			<td>
				<input type="text" data-key="custom4" id="itemsku[' .$sku["meta_id"]. '][custom4]" name="itemsku[' .$sku["meta_id"]. '][custom4]" class="metaboxfield addadvance-'.$sku["meta_id"].'" value="'.$advance['custom4'].'">
			</td>
			<td>
				<input type="text" data-key="custom5" id="itemsku[' .$sku["meta_id"]. '][custom5]" name="itemsku[' .$sku["meta_id"]. '][custom5]" class="metaboxfield addadvance-'.$sku["meta_id"].'" value="'.$advance['custom5'].'">
			</td>
		</tr>
		<tr>
			<td>
				<input type="text" data-key="custom6" id="itemsku[' .$sku["meta_id"]. '][custom6]" name="itemsku[' .$sku["meta_id"]. '][custom6]" class="metaboxfield addadvance-'.$sku["meta_id"].'" value="'.$advance['custom6'].'">
			</td>
			<td>
				<input type="text" data-key="custom7" id="itemsku[' .$sku["meta_id"]. '][custom7]" name="itemsku[' .$sku["meta_id"]. '][custom7]" class="metaboxfield addadvance-'.$sku["meta_id"].'" value="'.$advance['custom7'].'">
			</td>
			<td>
				<input type="text" data-key="custom8" id="itemsku[' .$sku["meta_id"]. '][custom8]" name="itemsku[' .$sku["meta_id"]. '][custom8]" class="metaboxfield addadvance-'.$sku["meta_id"].'" value="'.$advance['custom8'].'">
			</td>
			<td>
				<input type="text" data-key="custom9" id="itemsku[' .$sku["meta_id"]. '][custom9]" name="itemsku[' .$sku["meta_id"]. '][custom9]" class="metaboxfield addadvance-'.$sku["meta_id"].'" value="'.$advance['custom9'].'">
			</td>
			<td>
				<input type="text" data-key="custom10" id="itemsku[' .$sku["meta_id"]. '][custom10]" name="itemsku[' .$sku["meta_id"]. '][custom10]" class="metaboxfield addadvance-'.$sku["meta_id"].'" value="'.$advance['custom10'].'">
			</td>
		</tr>
		<script type="text/javascript">
			jQuery("input.addadvance-'.$sku["meta_id"].'").blur(function() {
				var advance = "";
				jQuery("input.addadvance-'.$sku["meta_id"].'").each(function(e){
					advance += jQuery(this).data("key") + "=" + jQuery(this).val() + ";";
				});
				jQuery(\'input[name="itemsku[' .$sku["meta_id"]. '][skuadvance]"]\').val(advance);
			});
		</script>';
}

// 管理画面SKU 新規追加
add_filter( 'usces_filter_newsku_meta_row', 'add_usces_filter_newsku_meta_row' );
function add_usces_filter_newsku_meta_row(){
	return
	'<input hidden type="text" value="custom1=;custom2=;custom3=;custom4=;custom5=;custom6=;custom7=;custom8=;custom9=;,custom10=;" id="newskuadvance" name="newskuadvance" >
		<tr>
			<th class="left">custom1</th>
			<th>custom2</th>
			<th>custom3</th>
			<th>custom4</th>
			<th>custom5</th>
		</tr>
		<tr>
			<th class="left">custom6</th>
			<th>custom7</th>
			<th>custom8</th>
			<th>custom9</th>
			<th>custom10</th>
		</tr>
		<tr>
			<td>
				<input type="text" data-key="custom1" id="custom1" name="custom1" class="metaboxfield newadvance">
			</td>
			<td>
				<input type="text" data-key="custom2" id="custom2" name="custom2" class="metaboxfield newadvance">
			</td>
			<td>
				<input type="text" data-key="custom3" id="custom3" name="custom3" class="metaboxfield newadvance">
			</td>
			<td>
				<input type="text" data-key="custom4" id="custom4" name="custom4" class="metaboxfield newadvance">
			</td>
			<td>
				<input type="text" data-key="custom5" id="custom5" name="custom5" class="metaboxfield newadvance">
			</td>
		</tr>
		<tr>
			<td>
				<input type="text" data-key="custom6" id="custom6" name="custom6" class="metaboxfield newadvance">
			</td>
			<td>
				<input type="text" data-key="custom7" id="custom7" name="custom7" class="metaboxfield newadvance">
			</td>
			<td>
				<input type="text" data-key="custom8" id="custom8" name="custom8" class="metaboxfield newadvance">
			</td>
			<td>
				<input type="text" data-key="custom9" id="custom9" name="custom9" class="metaboxfield newadvance">
			</td>
			<td>
				<input type="text" data-key="custom10" id="custom10" name="custom10" class="metaboxfield newadvance">
			</td>
		</tr>
		<script type="text/javascript">
			jQuery("input.newadvance").blur(function() {
				var advance = "";
				jQuery("input.newadvance").each(function(e){
					advance += jQuery(this).data("key") + "=" + jQuery(this).val() + ";";
				});
				jQuery(\'input[name="newskuadvance"]\').val(advance);
			});
			// 新規追加ボタンが押されたら、SKU項目を空にセットし直す
			var additemsku = itemSku.additemsku;
			itemSku.additemsku = function() {
					var result = additemsku.apply(this, arguments);
					jQuery("input.newadvance").val("");
					return result;
			}
		</script>';
}

簡単に説明しますと、
usces_filter_sku_meta_rowspan
で、追加する行数を「6」と指定してます。
これはこのままでいいと思います。(6だと数が多い場合は、追加するtd側のrowspanとかで調整してください)

usces_filter_sku_meta_row
は、既に登録済みのSKU更新時の表示です。

usces_filter_newsku_meta_row
は、新規SKU登録時の表示です。

DBへの登録はあくまでもadvanceカラム1つなので、表示上は複数入力可能ですが、
最終的にはそれらを区切り文字で1つに繋いで、advanceに登録しています。
その辺りは、最初にご紹介した記事に記載ある通りです。

完成した表示が、こんな感じです。

ということで、今日はWelcartのお話でしたー!
初めて触ったけど、WordPressでECサイト構築する際、日本語のプラグインというとWelcartが人気のようですね。
素晴らしいプラグインでした。
では、また次回。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です