Welcartで商品詳細ページ以外にカートボタンを設置する方法

Welcartで商品詳細ページ以外にカートボタンを設置する方法

Welcartで商品詳細ページ以外にカートボタンを設置する方法

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毎にカートボタンを設置できます。

複数の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関数を使えば、商品詳細ページ以外にも簡単にカートボタンを設置できますね。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です