WelCart で投稿ページに商品購入欄を作る

WelCart で投稿ページに商品購入欄を作る

WelCart の商品ページは、ご存知んごとくウルトラダサい。

これをカスタマイズしないとなんとも素人っぽさの抜けないサイトになってしまう。


WelCart で投稿ページに商品購入欄を作るときのモジュール構造

モジュールを書くとき構造のテンプレートがあると便利なので概念図を書いておく。

WelCart で投稿ページに商品購入欄を作るときの１商品の購入欄のモジュール構造

$args = array(
‘post_type’ => ‘post’,
‘posts_per_page’ => -1,
‘no_found_rows’ => true, //ページャーを使う時はfalseに。
‘p’ => $postid,
);
$query1 = new WP_Query( $args );
while($query1->have_posts()) { // post(商品ページ) loop / といっても p= で設定しているので1つしかない
$query1->the_post();
global $post; // 商品ページの post id をとる
usces_the_item(); // 商品ページを指定する
$cnt = usces_sku_num(); // 商品ページの SKU の数を見る
if($cnt>0){ // 商品ページの SKU が1以上なら
while (usces_have_skus()){ // 商品ページのSKUループ
//
// 商品ページ SKU の共通オプションの表示部
//
if( usces_is_options()>0 ){ // オプションがあるか？
while(usces_have_options()){ // オプションのループ
// オプションの入力フィールドを取得
$block = usces_the_itemOption( usces_getItemOptName(),”,’return’ );
}
//
// 商品フィールド
//
//
// 数量入力フィールド取得
//
$block=usces_the_itemQuant(‘return’);

//
// かごへ入れるボタン
//
usces_the_itemSkuButton(‘購入’,0,’return’);
//
// エラーメッセージが返ってきたか？
//
$block = usces_singleitem_error_message($post->ID, usces_the_itemSku(‘return’), ‘return’) ;
if($block!=”){
// javascript でエラーアラートを出す
<script type=’text/javascript'<alert(‘”.$block.”‘+’\\n’+’スクロールして商品購入欄で修正してください。’);</script>

$block // エラー内容
}
]
]
}


これをベースに全商品のリストを出す


WelCart で投稿ページに全商品の購入欄を作る


書式は、毎回手作りになるタイプ（プラグイン化すればもっと楽になるけど）

前述の構造を以下のようにサブルーチン化してしまう。

function welcartinline($postid,$css,$itemQuant='',$style='') {
	// postid:ターゲットのポストID
	// css:css: スタイルを付けるかどうか(テーブルのデフォルトクラス tbl8) １ページに複数インラインを使う場合
	//  1つめの welcartinline の css は ０、それ以降は１を設定する。
	// itemQuant: 選択数量を , で区切って指定 省略すると普通の input
	// style: 選択式の時のstyle を指定
	$postid_stk = explode(",",$postid);			// カンマ区切りで複数ID指定を想定
	$args = array(
		'post_type'			=> 'post', 
		'posts_per_page'	=> -1,
		'no_found_rows'		=> true,			//ページャーを使う時はfalseに。
		'p'					=> $postid_stk,		// 特定カテゴリの商品をループさせたい場合 'cat' => $postid_stk
	 );
	$query1 = new WP_Query( $args );
	if($query1->have_posts()) {		// post(商品ページ) loop / といっても p= で設定しているので1
		while($query1->have_posts()) {		// post(商品ページ) loop / といっても p= で設定しているので1
			$query1->the_post();
			global $post;								// 商品ページの post id をとる	
			usces_the_item();							// 商品ページを指定する
			$cnt = usces_sku_num();						// 商品ページの SKU の数を見る
			if($cnt>0){									// 商品ページの SKU が1以上なら
				while (usces_have_skus()){				// 商品ページのSKUループ
					//
					// 表示用テーブル ヘッド部
					//
					$opt_line = '';
					$opt_line.='<table style="font-size:12px;">';
					$opt_line.='<tr style="font-size:10px;">';
					$opt_line.='<th style="text-align: center !important;">品名</th>';
					$opt_line.='<th style="text-align: center !important;">ご注文エリア</th>';
					$opt_line.='<th style="text-align: center !important;">ご注文数量</th>';
					$opt_line.='<th style="text-align: center !important;">数量</th>';
					$opt_line.='<th style="text-align: center !important;"> </th>';
					$opt_line.='</tr>';
					//
					// 商品ページ SKU の共通オプションの表示部
					//
					$opt_line.='<tr>';
					$opt_line.='<td style="text-align: center !important;">'.usces_the_itemSkuDisp('return').'</td>';
					if( usces_is_options()>0 ){			// オプションがあるか？
						$col = 0;
						while(usces_have_options()){	// オプションのループ
							if($col==0){				// オプション１つめ
								$opt_line.='<td style="text-align: center !important;">';
								$s = ' style="width:60px;"';
							}elseif($col==1){			// オプション２つめ
								$opt_line.='<td style="text-align: center !important;">';
								$s = ' style="width:60px;"';
							}else{						// オプション3つ目以降
								$opt_line.='<td style="text-align: center !important;">';
								$s = '';
							}
							// オプションの入力フィールドを取得
							$block = usces_the_itemOption( usces_getItemOptName(),'','return' );
							// オプションの class を変更(見た目カスタマイズ）
							$block = str_replace('class=\'iopt_select\'','class=\'iopt_select\''.$s,$block);
							$opt_line.=$block;
							$opt_line.='</td>';
							$col++;
						}
					}
					$opt_line.='<td style="text-align: center !important;">';
					//
					// 数量入力フィールド取得
					//
					$block=usces_the_itemQuant('return');
					//
					// 数量
					//
					if($itemQuant!=''){
						//
						// 数値を 選択型にする場合 (受け取り引数 $itemQuant = "1,2,3,5,10" とかの時
						//
						$value= get_formfield($block,"name");
						//
						$itemQuant_stk = array();
						$tags = "";
						$tags.= "<select name='".$value."' id='".$value."' style='".$style."'>";
						$itemQuant_stk = explode(",",$itemQuant);
						foreach($itemQuant_stk as $val){
							$tags.="<option value='".$val."'>".$val."個</option>";
						}
						$tags.="</select>";
						$opt_line.=$tags;
					}else{
						//
						// 数値入力フィールドの style を書き換え（変更) で数値入力フィールドを設定
						//
						$opt_line.=str_replace('input','input style="width:20px;font-size:12px;"',$block);
					}
					$opt_line.='</td>';
					//
					// かごへ入れるボタン
					//
					$opt_line.='<td style="text-align: center !important;">';
					$block = usces_the_itemSkuButton('購入',0,'return');
					$opt_line.= '<!--pre-->'.$block.'<!--/pre-->';
					$opt_line.='</td>';
					$opt_line.='</tr>';
					// 
					// エラーメッセージが返ってきたか？
					//
					$block = usces_singleitem_error_message($post->ID, usces_the_itemSku('return'), 'return') ;
					if($block!=''){
						$opt_line.= "<script type='text/javascript'>alert('".$block."'+'\\n'+'スクロールして商品購入欄で修正してください。');</script>";
						$opt_line.= '<tr><td colspan="5"> 　 <font color="#cc0000" size="5"><b>'.$block.'</b></font></td></tr>';
					}
					//
					// 1商品終わり
					$opt_line.= '</table>';
				}
			}
		}
		wp_reset_postdata();
	}

	//
	// form にいれる
	//
	$USCES_CART_URL_str = USCES_CART_URL;
	
	$ret = <<<EOF
<form action="$USCES_CART_URL_str" method="post">
$opt_line
</form>
EOF;

	return($ret);
}


カテゴリー毎の商品リストを表示させる

リストを一括表示（商品ごとにかごに入れるボタンを押すタイプ）するモジュール

function g_rep_yuzu_welcart_listMB($catid,$class)
{
	// postid:ターゲットのポストID
	// css:css: スタイルを付けるかどうか(テーブルのデフォルトクラス tbl8) １ページに複数インラインを使う場合
	//  1つめの welcartinline の css は ０、それ以降は１を設定する。
	// itemQuant: 選択数量を , で区切って指定 省略すると普通の input
	// style: 選択式の時のstyle を指定
	$USCES_CART_URL_str = USCES_CART_URL;
	
	if($class!=''){
		$class = ' class="'.$class.'"';
	}
	$opt_line='';
	
	$catid_stk = explode(",",$catid);
	$args = array(
	    'post_type' => 'post', 
	    'posts_per_page' => -1,
	    'no_found_rows' => true,  //ページャーを使う時はfalseに。
	    'cat' => $catid_stk,
	 );

	$query1 = new WP_Query( $args );
	if($query1->have_posts()){
		$opt_line.='<form action="'.$USCES_CART_URL_str.'" method="post">';
		$opt_line.='<table style="font-size:12px;"'.$class.'>';
		//
		// 表示用テーブル ヘッド部
		//
		while($query1->have_posts()) {				// post 商品 loop
			$query1->the_post();
			global $post;								// 商品ページの post id をとる
			usces_the_item();							// 商品ページを指定する
			//---------------------------
			// 商品ページ(商品名)
			//
			$opt_line.='<tr>';
			$opt_line.='<th style="text-align: center !important;" colspan="2">'.usces_the_itemName('return').'</th>';
			$opt_line.='</tr>';
			//
			$cnt = usces_sku_num();						// 商品ページの SKU の数を見る
			if($cnt>0){									// 商品ページの SKU が1以上なら
				while (usces_have_skus()){				// 商品ページのSKUループ
//echo $post->ID.' sku_cnt='.$cnt.'<br>';
					//
					// １商品
					//
					//---------------------------
					$opt_line.='<tr>';
					// グラム・形状 (SKU表示名)
					$opt_line.='<td style="text-align: left !important;">'.usces_the_itemSkuDisp('return').'</td>';
					//
					// 在庫
					//
					$opt_line.='<td style="text-align: center !important;">'.usces_the_itemZaiko('return').'</td>';
					$opt_line.='</tr>';
					//---------------------------
					//
					// 単価
					//
					$opt_line.='<tr>';
					$opt_line.='<td style="text-align: right !important;">'.usces_the_itemCprice('return').'円</td>';
					//
					// 数量入力フィールド取得
					//
					$opt_line.='<td style="text-align: center !important;">';
					$block=usces_the_itemQuant('return');
					//
					// 数量
					//
					if($itemQuant!=''){	// プルダウンでえらばせる時
						//
						// 数値を 選択型にする場合 (受け取り引数 $itemQuant = "1,2,3,5,10" とかの時
						//
						$value= get_formfield($block,"name");
						//
						$itemQuant_stk = array();
						$tags = "";
						$tags.= "<select name='".$value."' id='".$value."' style='".$style."'>";
						$itemQuant_stk = explode(",",$itemQuant);
						foreach($itemQuant_stk as $val){
							$tags.="<option value='".$val."'>".$val."個</option>";
						}
						$tags.="</select>";
						$opt_line.=$tags;
					}else{
						//
						// 数値入力フィールドの style を書き換え（変更) で数値入力フィールドを設定
						//
						$block    =str_replace('input','input style="width: 3rem;font-size: 16px;border: #ccc solid 1px;padding: 0 3px;"',$block);
						$block    =str_replace('value="1"','value=""',$block);
						$opt_line.=$block;

					}
					$opt_line.=usces_the_itemSkuUnit('return');	// 単位
					$opt_line.='</td>';
					$opt_line.='</tr>';

					//---------------------------
					//
					// かごへ入れるボタン
					//
					$opt_line.='<tr>';
					$opt_line.='<td style="text-align: right !important;" colspan="2">';
					$block = usces_the_itemSkuButton('かごに入れる',0,'return');
					$opt_line.= '<!--pre-->'.$block.'<!--/pre-->';
					$opt_line.='</td>';
					$opt_line.='</tr>';
					// 
					// エラーメッセージが返ってきたか？
					//
					$block = usces_singleitem_error_message($post->ID, usces_the_itemSku('return'), 'return') ;
					if($block!=''){
						$opt_line.= "<script type='text/javascript'>alert('".$block."'+'\\n'+'スクロールして商品購入欄で修正してください。');</script>";
						$opt_line.= '<tr><td colspan="2"> 　 <font color="#cc0000" size="5"><b>'.$block.'</b></font></td></tr>';
					}
					//
					// 1商品終わり
				}
			}
		}
		$opt_line.= '</table>';
		$opt_line.= '</form>';
		wp_reset_postdata();
	}

	return($opt_line);
}

カテゴリー毎の商品リストを表示させるショートコード

前述のカテゴリー毎の商品リストを表示させるモジュールを使って投稿ページにリストを出す場合にショートコードになっていると便利なので書いてみた。

ショートコードは [welcart-list cat={catid} {class={class_name}}]
/********************************************************/
//// ショートコード処理関数とショートコードを設定
add_shortcode('welcart', 'g_rep_yuzu_welcart');
/********************************************************/
function g_rep_yuzu_welcart($attr)
{
	extract(shortcode_atts(array(
		'cat' => 1,	// リストを出したい カテゴリーIDを指定
		'med' => '',	// デバッグ用 mb を設定すると強制的にモバイルタイプの書式を出す
		'class' => '',	// 出力にクラス指定できるようにしておくと便利
	), $attr));
	$g_rep_yuzu_env = get_option('g_rep_yuzu_env');
	if($g_rep_yuzu_env!=''){
		$med = 'mb';
	}
	
	if(wp_is_mobile() || $med=='mb'){
		return( g_rep_yuzu_welcart_listMB($cat,$class) ); // モバイルタイプの書式を出す
	}else{
		return( g_rep_yuzu_welcart_listPC($cat,$class) ); // ブラウザタイプの書式を出す
	}
	return '';
}

WelCart の商品のカテゴリーを追加する

WelCart の商品のカテゴリーを追加するのは、WelCartの商品マスターからではできないのでワードプレスのダッシュボードメニューの「投稿」と同じ並びにある「カテゴリー」で「親カテゴリー」を「商品」にしてかたごりーを追加します。


以上、あなたの一助になれば幸いです。

スポンサーリンク