WCEX Widget Cart
ドキュメント
リンク

WCEX Widget Cart の応用

気軽にカートに商品を追加できるWCEX Widget Cartを使って、以下のような応用ができます。それぞれ対応バージョンがありますのでご注意ください。

ショートコードで通常記事内にカート投入ボタンを表示

Welcart は、通常記事にカート投入ボタンを表示するショートコードを持っています。

[button_to_cart item='商品コード' sku='SKUコード' value='カートに追加']

itemにはその商品の商品コード、skuにはSKUコード、valueにはボタンのラベルを記述します。Welcart1.1.5以降は、このWCEX Widget Cartに対応しており、このショートコードによって生成されたカート投入ボタンを押すと、ウィジェットに商品が追加されます。それ以前のバージョンではカートページに遷移してしまいますのでご注意ください。また、商品オプションを持っている商品はこのショートコードでは投入できません。商品オプションが必要な商品を扱っている場合は、通常通り商品詳細ページからのカート投入を利用してください。

「Hello world!」カート投入ボタンを表示 「Hello world!」カート投入ボタンを表示

Item List Layout との併用 

 ※Item List Layout は現在販売されておりません。

Item List Layout は商品一覧をグリッド表示させるためのWelcart専用拡張プラグインですが、このグリッド内にカート投入ボタンを設置することで、カートページ遷移する事無く気軽に商品をウィジェットに追加することができます。

Item List Layout によるグリッド Item List Layout によるグリッド

Item List Layout のグリッドに、上の画像のようなカート投入ボタンを設置するには、次のコード(フィルター)をテーマ内のfunctions.phpに追加記述します。

add_filter('item_list_layout_filter_list_price', 'my_list_layout_filter_list_price', 10, 3);
function my_list_layout_filter_list_price($price, $post, $opts){
  global $usces;
  $sku = usces_the_firstSku( 'return' );
  $status_index = usces_the_firstZaiko( 'return' );
  if( 1 < $status_index ){
    $price .= '<div class="zaiko_status">' . esc_html($usces->zaiko_status[$status_index]) . '</div>';
  }else{
    $price .= usces_direct_intoCart($post->ID, $sku, false, 'カートへ追加', NULL, 'return');
  }
  return $price;
}

このフィルターは、Item List Layout の最新版(1.2.7以降)と、Welcart1.1.5以降のバージョンで有効です。また、商品オプションを持っている商品はこのショートコードでは投入できません。商品オプションが必要な商品を扱っている場合は、通常通り商品詳細ページからのカート投入を利用してください。

商品詳細ページ以外でカート投入ボタンを表示する場合は、usces_direct_intoCart()テンプレートタグをご利用ください。