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が人気のようですね。
素晴らしいプラグインでした。
では、また次回。