カートへの投入ボタンの表示は下記の様になっています。
これを色や文字を変更できる様にカスタマイズします。
1.関数の開発方針と制限
1.関数名と引数
関数名：my_cart_input($color,$text)
| 引数 | デフォルト値 | 備考 |
| $color | ‘#ff8c00’ | ボタンの色 デフォルト値はWelcart_basicが使っている色 |
| $value | ‘カートに入れる’ | ボタンの中に表示する文字 |
2.表示サンプル
<?php my_cart_input('blue','カートに入れる');?>
上記の指定の場合のボタンは下記になります。
アイコンはfontawesomeの「fas fa-cart-arrow-down」を利用します。
このテーマでFont Awesomeが利用できるようにして下さい。
3.name属性、id属性の指定方法
name属性：welcartのカートプログラムが入力データを取得する為の属性値です。
id属性 ：welcartのjqueryが入力データチェックを行う時に参照する属性値です。
下記に必要な属性を一覧します。
1）inputのtype=”hidden”で渡す情報
| 受け渡す情報 | name属性,id属性 | value属性 |
| 在庫数 | zaikonum[ポストID][SKU値] | 在庫数 |
| 在庫状態 | zaiko[ポストID][SKU値] | 在庫ステータス |
| 数量割引 | gptekiyo[ポストID][SKU値] |
数量割引対象か否か |
| 価格情報 | skuPrice[ポストID][SKU値] |
価格 |
| スラグ情報 | usces_referer | 現在のページのスラグ名
$_SERVER[“REQUEST_URI”]) |
2)カート投入ボタンで渡す情報
| name属性 | onclick属性 |
| inCart[ポストID][SKU値] | return uscesCart.intoCart(ポストID,SKU値) |
■onclickはボタンが挿入された時に動くWelcartのクラス関数です。
４．制限事項
カートへの投入ボタンは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情報を読み出します。 |
3.プログラム
1.プログラム
func￥welcart￥itemフォルダの下に「my_my_cart_input.php」ファイルを作成し下記を記述します。
<?php /******************************************************************** カートへの投入ボタン 引数： $color:カートボタンのカラー（デフォルトは「オレンジ」） $value:カートボタンの文字（デフォルトは「カートに入れる」） *********************************************************************/ function my_cart_input($color='#ff8c00',$value='カートに入れる') { global $usces, $post; $post_id = (int)$post->ID; $sku = esc_attr(urlencode($usces->itemsku['code'])); $zaikonum = esc_attr($usces->itemsku['stocknum']); /* 在庫数の取得 */ $zaiko_status = esc_attr($usces->itemsku['stock']); /* 在庫状態の取得 */ $gptekiyo = esc_attr($usces->itemsku['gp']); /* 数量割引情報の取得 */ $skuPrice = esc_attr($usces->getItemPrice($post_id, $usces->itemsku['code']));/* 価格情報の取得 */ $name_zaikonum = 'zaikonum[' .$post_id.']['.$sku.'}'; /* 在庫数のname&id属性の設定 */ $name_zaiko_status = 'zaiko[' .$post_id.']['.$sku.']'; /* 在庫状態のname&id属性の設定 */ $name_gptekiyo = 'gptekiyo[' .$post_id.']['.$sku.']'; /* 数量割引のname&id属性の設定 */ $name_skuPrice = 'skuPrice[' .$post_id.']['.$sku.']'; /* 価格のnam&ide属性の設定 */ $name_inCart = 'inCart[' .$post_id.']['.$sku.']'; /* カート投入ボタンのname属性の設定 */ $inCart_js = 'return uscesCart.intoCart("'.$post_id.'","'.$sku.'")'; /* ボタンを挿入した時のJabascriptの指定 */ ?> <input type='hidden' value='<?php echo $zaikonum;?>' name='<?php echo $name_zaikonum;?>' id='<?php echo $name_zaikonum;?>' > <input type='hidden' value='<?php echo $zaiko_status;?>' name='<?php echo $name_zaiko_status;?>' id='<?php echo $name_zaiko_status;?>'> <input type='hidden' value='<?php echo $gptekiyo;?>' name='<?php echo $name_gptekiyo;?>' id='<?php echo $name_gptekiyo;?>'> <input type='hidden' value='<?php echo $skuPrice;?>' name='<?php echo $name_skuPrice;?>' id='<?php echo $name_skuPrice;?>'> <input type='hidden' value='<?php echo esc_url($_SERVER["REQUEST_URI"]);?>' name='usces_referer' > <button type='submit' name='<?php echo $name_inCart;?>' id='<?php echo $name_inCart;?>' class='inCart_button' onclick='<?php echo $inCart_js;?>'> <i class="icon fas fa-cart-arrow-down"></i> <?php echo $value;?> </button> <style> .inCart_button{ border: none; outline: none; margin:5px 0; padding:10px 20px; border-radius:5px; box-shadow: 0 3px 5px rgba(0, 0, 0, .3); color:#fff; background-color:<?php echo $color;?>} .icon{font-size:20px;} </style> <?php } ?>
2.プログラムのロード
functions.phpに下記を記述します。
/* 個別商品関連関数の追加 */ get_template_part('func/welcart/item/my_cart_input'); /* カートへの投入ボタン */
3.この関数を設定する場所
子テーマの「wc_templates」フォルダの中の「wc_item_single.php」を変更します。
上記ファイルが無い場合は親テーマからフォルダ毎コピーして下さい。
＜変更前＞
<?php usces_the_itemSkuButton( ' ' . __('Add to Shopping Cart', 'usces' ), 0 ); ?>
＜変更後＞
<?php my_cart_input('blue','カートに入れる'); ?> <!-- カートへの投入ボタン -->
