Welcart_Basic カートボタンの色と表示文字を変更可能にします

このカスタマイズを行う前にカートシステムの仕組みとは？を理解してから行ってください。

Welcartのカートボタンは下図に様に「色」と「文字」が固定になっています。

<PC画面>

＜スマホ、iPAD画面＞

これを任意の「色」と「文字」に変更できる様にカスタマイズします。

1.関数の作成方針

1.関数名と引数

関数名：my_basic_cart($color,$text)

引数	デフォルト値	備考
$color	‘#ff8c00’	ボタンの色デフォルト値はWelcart_basicが使っている色
$text	‘カートの中’	ボタンの中に表示する文字

2.プログラム

1.プログラム

func￥welcart￥headerの下に「my_basic_cart.php」というファイルを作成し、下記を追加します。

<?php 
/*****************************************************************************
カートシステムの出力
引数：
$color:PCのカートボタンのカラー（デフォルトは「オレンジ」）
$text:PCのカートボタンの文字（デフォルトは「カートの中」）
*******************************************************************************/
function my_basic_cart($color='#ff8c00',$text='カートの中') {
?>

<a href="<?php echo USCES_CART_URL; ?>">
	<i class="fa fa-shopping-cart">
		<span><?php echo $text;?></span>
	</i>
	<span class="total-quant">
		<?php usces_totalquantity_in_cart(); ?>
	</span>
</a>
<style>
/*** 表示制御(スマホ) ****/
.incart-btn .total-quant{background-color:<?php echo $color;?>;}
.incart-btn a{border-radius:5px;}
/*** 表示制御(PC) ****/
@media screen and (min-width: 62.5em) {
	.incart-btn {min-width:140px;}
	.incart-btn a {	background-color:<?php echo $color;?>;}
	.incart-btn .total-quant{
		background-color:#fff;
		color:<?php echo $color;?>;
	}
}
</style>			
<?php
 }
?>

■上記は Welcart_basicのカートシステムの仕様のプログラムをベースにカスタマイズすると共に、CSS設定もこの中に含めました。

■上記で使っている関数は下記になります。

項目	関数	説明
カートページURL	USCES_CART_URL	カートページのURIを返す
カート内の合計数量	usces_totalquantity_in_cart()	カート内の合計数量を返す

2.プログラムのロード

functions.phpに上記関数の読み込みを記述します。

/* カート関数の追加 */
	get_template_part('func/welcart/header/my_cart');

3.header.phpの修正

最後に子テーマの「header.php」を変更します。

上記ファイルが無い場合は、親テーマからコピーして下さい。

＜変更前＞

<div class="incart-btn">
	<a href="<?php echo USCES_CART_URL; ?>"><i class="fa fa-shopping-cart"><span><?php _e('In the cart', 'usces') ?></span></i><?php if(! defined( 'WCEX_WIDGET_CART' ) ): ?><span class="total-quant"><?php usces_totalquantity_in_cart(); ?></span><?php endif; ?></a>
</div>

＜変更後＞

<div class="incart-btn">
	<?php my_basic_cart();?>
</div>

4.関数の使い方

1.デフォルトの表示

<?php my_basic_cart();?>

2.色をブルーにして、文字はカートにする

<?php my_basic_cart('blue','カート');?>

以上で完了です。