HOME  /Welcart
 /welcart_basic オプション表示の不具合を改善する
2020年10月05日

welcart_basic オプション表示の不具合を改善する

welcartのオプションには下記の様な問題点があります。

①必須項目指定の問題

下記はラジオボタンの例ですが、必須項目にチェックしても画面表示は変わりません。

よって、これが入力必須項目か否かの判断が利用者に伝わりません。

必須項目の指定なし 必須項目を指定

 

②ラジオボタン、チェックボックスの問題

ラジオボタンは横、チェックボックスは縦で表示方法が一貫してません。

またチェックBOXは1行目が桁ずれを起こしています。

ラジオボタン チェックボックス

以上の問題点に合わせてスペックを幾つか変更をしました。

 

1.開発仕様と制限

1.入力必須の指定

入力必須を✔すると、下図の様に表示させる。

また、入力必須なのに指定が無い場合はWelcartのjqueryでエラーをださせる。

 

2.デフォルト値の取り扱い

必須入力でない場合は「シングルセレクト」と「マルチセレクト」だけ、先頭の選択肢がデフォルト値に設定される仕様になっています。

しかし今回作る関数は、総てのオプション項目にデフォルト値が設定できる様にします。

 

3.name属性、id属性の指定方法

name属性:welcartのカートプログラムが入力データを取得する為の属性値です。

id属性  :welcartのjqueryが入力データチェックを行う時に参照する属性値です。

下記に各オプション項目に必要な属性を一覧します。

要素 name属性、id属性
チェックボックス itemOption[ポストID][SKUコード][オプション名][]
※name属性に上記を指定します。
最後の[]は、複数値を取得する為に必要になります。
ラジオボタン itemOption[ポストID][SKUコード][オプション名]
※name属性に上記を指定します。
シングルセレクト
マルチセレクト
itemOption[ポストID][SKUコード][オプション名]
※name属性とID属性に上記を指定します。
テキスト itemOption[ポストID][SKUコード][オプション名]
※name属性とID属性に上記を指定します。
テキストエリア itemOption[ポストID][SKUコード][オプション名]
※name属性とID属性に上記を指定します。

 

4.制限事項

オプション情報は製品情報として定義されますが、扱いはSKU情報になります。

よってこの関数は、下記のSKUループの中でしか利用できません。

<?php usces_remove_filter(); ?>
<?php usces_the_item(); ?>   
<?php while ( usces_have_skus() ):?>
  SKU情報の表示
<?php endwhile; ?>

上記で使われているWelcart関数

関数 解説
usces_remove_filter() カートページ、会員ページで制御している the_title や the_content のフィルターを無効化する
usces_the_item() 商品情報をセットする関数
usces_have_skus() while文で複数のSKU情報を読み出します。

 

2.プログラム詳細

1.指定オプションの表示関数

func¥welcart¥itemフォルダに下に「my_option_msg.php」を作成し下記を追加します。

<?php 
/********************************************************************
my_option_msg:オプションの読み込み関数
引数: なし
*********************************************************************/
function my_option_msg(){
  if( usces_is_options() ) {
    while( usces_have_options() ){
       my_option_disp( usces_getItemOptName() );
    }
  }
}

/********************************************************************
  my_option_disp:指定されたオプションの表示関数
  引数
  $option_name:オプション名
*********************************************************************/
function my_option_disp($option_name) {
	global $post, $usces;
	$post_id = $post->ID;
	$opts = usces_get_opts($post_id, 'name');							/* オプション情報を取得 */	
	$opt = $opts[$option_name];												/* 上記から$option_nameの情報だけをを取得 */	
	$means = (int)$opt['means'];												/* オプションの種類(0~5) */
	$essential = (int)$opt['essential'];										/* 必須フラグ(0又は1) */
	$selects = explode("\n", $opt['value']);								/* 選択値を配列に変更 */
	$sku = esc_attr(urlencode($usces->itemsku['code']));			/* SKUコード */
	$optcode = esc_attr(urlencode($option_name));					/* オプション名 */

	$name = "itemOption[".$post_id."][".$sku."][".$optcode."]";	/* オプションを書き込む為のコード設定(基本) */
	?>

	<div class='option_label'>
		<?php if($essential == 1):?>
			<?php echo $option_name;?><span class='essential'> &nbsp;&nbsp;※入力必須</span>
		<?php else:?>
			<?php echo $option_name;?>
		<?php endif;?>
	</div>
	<style>
	.option_label{display:flex;font-weight:bold;margin-top:12px;}
	.essential{color:red;}
	</style>
	
	<?php
	switch($means) {
	case 0://Single-select
	case 1://Multi-select
		$multiple = '';
		if($means == 1){$multiple = 'multiple';}
		?>
		<select name='<?php echo $name;?>' id='<?php echo $name;?>' class='option_select' <?php echo $multiple;?> >
			<?php if($essential == 1){echo '<option value="#NONE#" selected="selected">選択してください</option>';};?>
			<?php foreach($selects as $key => $val ):?>
					<?php if($key == 0 & $essential == 0):?>
						<option value='<?php echo $val;?>' selected="selected" ><?php echo $val;?></option>
					<?php else:?>
						<option value='<?php echo $val;?>'><?php echo $val;?></option>
					<?php endif;?>
			<?php endforeach;?>
		</select>
		<br><br>	
		<style>.option_select{cursor:pointer;margin-bottom:0;font-weight:normal;margin-left:3px;}</style>
		<?php
		break;
	case 2://Text
		?>
		<?php if($essential == 0):?>
			<input name='<?php echo $name;?>' id='<?php echo $name;?>' type='text' class='option_text' value='任意入力' >
		<?php else:?>
			<input name='<?php echo $name;?>' id='<?php echo $name;?>' type='text' class='option_text' value='' >
		<?php endif;?> 
		<br><br>
		<style>.option_text{cursor:pointer;margin-bottom:0;font-weight:normal;margin-left:3px;}</style>
		<?php
		break;
	case 3://ラジオボタン
		?>
		<?php foreach($selects as $key => $val ):?>
			<label class='option_radio'>
				<?php if($key == 0 & $essential == 0):?>
					<input name='<?php echo $name;?>' type='radio' value='<?php echo $val;?>' checked='checked'><?php echo '&nbsp;'.$val;?>
				<?php else:?>
					<input name='<?php echo $name;?>' type='radio' value='<?php echo $val;?>'><?php echo '&nbsp;'.$val;?>
				<?php endif;?> 
			</label><br>
		<?php endforeach;?>
		<br>
		<style>
			.option_radio {cursor:pointer;margin-bottom:0;font-weight:normal;margin-left:3px;}
		</style>
		<?php
		break;
	case 4://チェックBOX
		?>
		<?php foreach($selects as $key => $val ):?>
			<label class='option_checkbox'>
				<?php if($key == 0 & $essential == 0):?>
					<input name='<?php echo $name."[]";?>' type='checkbox' value='<?php echo $val;?>' checked='checked'><?php echo '&nbsp;'.$val;?> 
				<?php else:?>
					<input name='<?php echo $name."[]";?>' type='checkbox' value='<?php echo $val;?>'><?php echo '&nbsp;'.$val;?>
				<?php endif;?> 
			</label><br>  
		<?php endforeach;?>
		<br> 
		<style>
			.option_checkbox{cursor:pointer;margin:0 3px;font-weight:normal;}
		</style>
		<?php
		break;
	case 5://Text-area
		?>
		<?php if($essential == 0):?>
			<textarea name='<?php echo $name;?>' id='<?php echo $name;?>' class='option_textarea'>任意入力</textarea>
		<?php else:?>
			<textarea name='<?php echo $name;?>' id='<?php echo $name;?>' class='option_textarea' value='' ></textarea>
		<?php endif;?>
		<br><br>
 		<style>.opution_textarea_label{cursor:pointer;margin:0 3px;font-weight:normal;}</style>
		<?php
		break;
	}
}
?>

■welcartのDBの中からオプション名で情報を取得し、その内容に従ってどの様なオプション表示をするかを切替えています。

 

2.プログラムのロード

functions.phpに下記を記述します

get_template_part('func/welcart/item/my_option_msg');			/* オプション内容の表示 */

 

3.メインプログラムの修正

最後に「wc_item_single.php」を修正します。

<変更前>

<?php if( usces_is_options() ) : ?>
	<dl class="item-option">
		<?php while( usces_have_options() ) : ?>
			<dt><?php usces_the_itemOptName(); ?></dt>
			<dd><?php usces_the_itemOption( usces_getItemOptName(), '' ); ?></dd>
		<?php endwhile; ?>
	</dl>
<?php endif; ?>

<変更後>

<?php my_option_msg(); ?>      <!-- オプションの表示 -->

■一行にする事によりメインプログラムが見やすくなります。

 

3.関数の実行結果

上記プログラムの実行結果サンプルは下記になります。

選択肢 必須項目
チェックなし チェック
シングルセレクト

マルチセレクト

ラジオボタン

チェックボックス
※複数選択可

テキスト

 

テキストエリア

 

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「Wordpress(応用編)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

「wecart」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

welcartで用意されている業務パックデータの表示関数はwhile(usces_have_skus())ループの中でしか使えません。しかしforeachの方がカウンター処理がしやすいのでこれが使える業務パックデータの表示関数を作成しました。

Welcartでは業務パック割引(購入数量割引)という機能があります。この機能を使うとカートページにGPマークが表示させますがこのマークを任意のアイコンに変更する方法を解説しています。

カートに商品を投入すると、商品名は①商品名②商品コード③SKU名④SKUコードを合わせた文字列が商品名として表示されます。これをカスタマイズする方法を解説しています。

Welcartのカートへの投入ボタンのプログラム解説と、色と文字を変更する新しい関数の作成方法を解説しています。

Welcartにはポイントを付与し、商品購入時にそのポイントを利用する仕組みがあります。又キャンペーン設定でポイントをn倍にしたり価格を値引く仕組みもあります。ここではそれらの概要と問題点及び解決策を解説しています。

Welcartでは業務パック割引(購入数量割引)という機能があります。これは、指定した数量以上を購入した場合に価格を値引く仕組みですが、業務パック割引という言葉はあまりなじみがないのでこのメッセージを変更する方法を解説しています。

Welcart_Basicの購入数量は数値入力です。しかしスマホではこのような入力方法は面倒なので+/-ボタンで購入数量が変更できる様に変更した事例を紹介しています。

Welcartでは個別商品画面に商品オプションやカスタムフィールドを追加する事ができます。ここではその追加方法を解説しています。

Welcartで個別商品表示画面から、商品マスタ編集にジャンプする事ができるとコンテンツ編集効率が飛躍的に向上します。しかしWelcartではこの機能が提供されていないのでこれを可能になる関数を作成します。

ここではWelcart商品を価格順に並び替える為に、WordpressのメタデータにWelcartの価格データを自動的に登録する関数の作成方法を解説しています。

ここではWelcartのキャンペーン商品設定の方法と、設定された商品リストを表示する関数を作成する方法を解説しています

ここではWelcartの商品カテゴリを指定して商品リストする関数を作成しています。全商品、おすすめ商品、新製品及び商品カテゴリが対象となります。

ここでは売れている商品をWelcartのDBから読み出して「売れ筋商品」としてリストする関数を作成する方法を解説しています。

Welcartには関連商品という概念はありません。そこで個別商品を表示した時に、その商品と同じカテゴリの商品を「関連商品リスト」として表示する関数を作成する方法を解説します。

Welcart_basicのメニュをカスタマイズする為にはどの様な仕組みで作られているか?を知る必要があります。そこでここではメニュの仕様を解説しています。

ここではWelcart_basicのカートボタンの「色」と「文字」を変更する関数の作成方法を解説しています。

カートボタンをカスタマイズする為には、このカートがどの様に作られているのか?を知る必要があります。そこでここではその仕様について解説しています。

Welcartで会員システムを使うのであれば、ログイン後の画面に現在使えるポイント数が表示されているのが親切です。そこでここではwelcart_bascで保有ポイントが表示されるようにカスタマイズしたサンプルを解説しています。

welcart_basicの会員システムをカスタマイズする為には、この機能がどの様に作られているか?を知る必要があります。
そこでこのでは会員システムの仕組みについて解説しています。

Welcart_basicの検索機能をカスタマイズする為には、これがどの様に作られているのか?を知る必要があります。ここではその仕様を解説しています。

welcart_basicは商品だけしか検索対象としていませんが、ここではページの情報を読み込んで、カテゴリ別に検索できる様にカスタマイズする方法を解説しています。

ここでは「welcart_basic」の「category.php」がブログ用のサイドーバーが使われてない問題点を修正方法を説明しています。また「welcart_basic」がどの様な構造になっているか?も併せて解説しています。

ここではwelcartの.検索機能制限の解除、カテゴリが製品か否かの判断関数、上位カテゴリの取得関数、.商品カテゴリの取得関数の作成方法を解説しています。

ここではWelcartで用意されている関数を解説しています。

Welcartのファンクションはfunctions.phpからincフォルダにあるファンクションをインクルードしています。この辺の構造を商品表示の設定例で解説しています。

Welcartのホームページと事前に作られている固有のページを解説してます。特にカートページやメンバーページ及びお問い合わせフォームの作り方も解説しています。

WelcartはWordPressの「固定ページ」と「投稿ページ」のみで作られております。この「投稿ページ」の中に「商品」が設定されています。そこで検索機能はファンクションの中で、商品のみを検索する様な設定が定義されている為、そのままではブログ等を検索できません。

ここではWelcartの商品画像を「slick」でスライドさせる方法を解説しています。スライド方法は下記の2つを解説しています。①.slickオプションだけでスライドさせる。②slickイベントやメソッドを使ってスライドさせる。

welcart_basicのカスタマイズ→ヘッダ画像で設定したヘッダ画像を「slick」で自動スライドさせる方法を解説しています。

「slick.js」はjqueryでスライド動作を指定するプラグインです。ここでは「slick.js」のインストールから、設定方法及び「slick.js」のオプションを解説しています。またslickのメソッドやイベントの使い方の説明しています。

ここでは「Welcart basic」の子テーマの作成方法を解説しています。

Welcartの商品画像適用ルールと「Media Library Assistant」による画像管理、及び商品画像の登録方法を解説しています。

Welcartで商品登録を行う前に.Welcart Shopの「基本設定」、「配送設定」及び「.商品カテゴリ」の登録が必要で、ここではその登録方法を解説しています。

ここではWelCartの商品の登録の仕方を解説しています。

WelcartはWordPressを使った無償のe-Commerceシステムです。ここでは「Welcart」の「インストール」と無償テンプレート「Welcart_basic」について解説します。

ここでは「Welcart_Basic」の「メニュ」や「ウィジェット」及び「ヘッダ画像」の使い方を解説します。