Welcartで実装したECサイトで、商品詳細ページ以外にカートボタンを設置する方法をご紹介いたします。
商品一覧や固定ページなどにカートボタンを表示して、商品詳細へ移動せずに直接カートへ入れることが可能になります。
Welcartで商品詳細ページ以外にカートボタンを設置する方法
商品詳細ページ以外にカートボタンを設置するには、usces_direct_intoCart関数を使います。
<?php usces_direct_intoCart( $post_id, $sku_code, $force, $value, $options, $out ); ?>| $post_id | 商品の投稿ID |
| $sku_code | SKUコード |
| $force | カートページに遷移するかどうか。初期値はfalse(遷移する) |
| $value | ボタンのラベル指定。初期値は”カートに入れる” |
| $options | 商品オプションフィールドを出力するかどうか。初期値はfalse(出力しない) |
| $out | 戻り値の出力をechoするかreturnするか。初期値はecho |
例えば、商品一覧のループ内にカートボタンを設置する場合、カートを表示したい箇所に以下コードを追加してあげます。usces_the_itemで商品情報を、usces_have_skusでSKU情報をセットする必要があります。
<?php
usces_the_item();
usces_have_skus();
usces_direct_intoCart($post->ID, usces_the_itemSku('return'));
?>出力されるHTMLは以下のようになります。投稿IDが”10″、SKUコードが”test_sku”の商品の例です。
<form action="https://example.com/usces-cart" method="post" name="10-test_sku">
<input name="zaikonum[10][test_sku]" type="hidden" id="zaikonum[10][test_sku]" value="">
<input name="zaiko[10][test_sku]" type="hidden" id="zaiko[10][test_sku]" value="0">
<input name="gptekiyo[10][test_sku]" type="hidden" id="gptekiyo[10][test_sku]" value="0">
<input name="skuPrice[10][test_sku]" type="hidden" id="skuPrice[10][test_sku]" value="1000">
<a name="cart_button"></a><input name="inCart[10][test_sku]" type="submit" id="inCart[10][test_sku]" class="skubutton" value="カートに入れる"><input name="usces_referer" type="hidden" value="/">
</form>
<div class="direct_error_message"></div>複数のSKUに対応させる方法
上述した方法だとカートボタンは1つしか表示されないため、複数のSKUが登録されている場合に対応できません。
複数のSKUに対応するためには、以下のように記述します。
<div class="direct-cart">
<?php usces_the_item(); ?>
<?php while (usces_have_skus()) : ?>
<p class="sku"><?php usces_the_itemSkuDisp(); ?>:<?php usces_the_itemPriceCr(); ?></p>
<div class="cart-btn">
<?php usces_direct_intoCart($post->ID, usces_the_itemSku('return'), false, 'カートに入れる'); ?>
</div>
<?php endwhile; ?>
</div>登録されているSKUの分ループさせることで、複数のSKUに対応しています。以下のようにSKU毎にカートボタンを設置できます。
出力されるHTMLは以下の通りです。
<div class="direct-cart">
<h2>ダイレクトカートボタン</h2>
<p class="sku">テストSKU:¥1,000</p>
<div class="cart-btn">
<form action="https://example.com/usces-cart" method="post" name="10-test_sku">
<input name="zaikonum[10][test_sku]" type="hidden" id="zaikonum[10][test_sku]" value="">
<input name="zaiko[10][test_sku]" type="hidden" id="zaiko[10][test_sku]" value="0">
<input name="gptekiyo[10][test_sku]" type="hidden" id="gptekiyo[10][test_sku]" value="0">
<input name="skuPrice[10][test_sku]" type="hidden" id="skuPrice[10][test_sku]" value="1000">
<a name="cart_button"></a><input name="inCart[10][test_sku]" type="submit" id="inCart[10][test_sku]" class="skubutton" value="カートに入れる"><input name="usces_referer" type="hidden" value="/">
</form>
<div class="direct_error_message"></div>
</div>
<p class="sku">テストSKU2:¥2,000</p>
<div class="cart-btn">
<form action="https://example.com/usces-cart" method="post" name="10-test_sku2">
<input name="zaikonum[10][test_sku2]" type="hidden" id="zaikonum[10][test_sku2]" value="">
<input name="zaiko[10][test_sku2]" type="hidden" id="zaiko[10][test_sku2]" value="0">
<input name="gptekiyo[10][test_sku2]" type="hidden" id="gptekiyo[10][test_sku2]" value="0">
<input name="skuPrice[10][test_sku2]" type="hidden" id="skuPrice[10][test_sku2]" value="2000">
<a name="cart_button"></a><input name="inCart[10][test_sku2]" type="submit" id="inCart[10][test_sku2]" class="skubutton" value="カートに入れる"><input name="usces_referer" type="hidden" value="/">
</form>
<div class="direct_error_message"></div>
</div>
</div>あとがき
ECサイトを制作する際、商品一覧やLPなどにもカートボタンを設置したいという要望は結構あると思います。
usces_direct_intoCart関数を使えば、商品詳細ページ以外にも簡単にカートボタンを設置できますね。