拡張プラグイン WCEX SKU Select を公開しました

wcex-sku-select

複数SKUをセレクトボックスまたはラジオボタン形式で1つにまとめて表示することができる拡張プラグイン「WCEX SKU Select」をリリースしました。
標準機能の商品オプションでは在庫管理ができませんが、このプラグインではSKUを商品オプションのように表示しているので、在庫管理も可能です。

詳しくはこちら
 デモサイトはこちら

商品詳細ページの表示

標準機能の商品オプションでは在庫管理ができないため、全ての種類をSKU登録する必要がありました。その場合、右図のようにSKUごとにカートが表示されるため、ページが長くなってしまっていました。

WCEX_SKU_Selectの機能を利用すると、SKUをプルダウン又はラジオボタン形式で選択できるようになり、カートボタンは１つになるのでページが長くなりません。内部的にはSKUを選択しているので、在庫管理も可能です。
右図はプルダウン形式表示の商品詳細ページです。プルダウンで値を選択するごとに、販売価格と在庫状態が切り替わります。

ラジオボタン形式の表示は以下のようになります。

プルダウンのときと同様、ラジオボタンの値を選択するたび販売価格と在庫状態が切り替わります。

Welcart 専用公式テーマの対応バージョン

WCEX SKU Selectプラグインフォルダ内に同梱されているwc_templatesフォルダ内のテンプレートファイルは次の通りです。下記テンプレートは、商品登録 / 編集ページの「SKUセレクト用のSKUを作成」にチェックが入っている場合にのみ読み込まれます。

wc_templates/wc_sku_select.php	SKU Select 専用　商品詳細ページ（物販）
wc_templates/wc_sku_select_service.php	SKU Select 専用　商品詳細ページ（サービス）

これらのテンプレートはWelcart Default テーマのスタイルに合わせてマークアップされています。

その他の Welcart 専用テーマについては、以下のバージョンからSKU Select 専用のテンプレートファイルとスタイルシートが追加されますので、カスタマイズせずにお使いいただくことができます。

テーマ名	バージョン
Welcart Basic	バージョン1.2.1 以降
Welcart Bordeaux	バージョン1.1.1 以降
Welcart Nova	バージョン1.1.1 以降

テーマのカスタマイズ

Welcart 専用公式テーマをアップグレードせずに利用する場合

wc_item_single.php のマークアップを変更していなければ、
最新版のテーマをダウンロードして、ファイル内の以下のテンプレートファイルのみをコピーし、ご利用中のテーマ内に設置ください。

wc_templates/wc_sku_select.php

wc_templates/wc_sku_select_service.php

wcex_sku_select.css

※コピーしたテンプレートファイルは、最新版のテーマと同じ場所に設置ください。

wc_item_single.php のマークアップを変更している場合は、
WCEX SKU Select 専用のテンプレートファイルを　wc_item_single.phpと同じマークアップに修正する必要があります。
レイアウト崩れが起きている場合は、テーマ内に設置した wcex_sku_select.css でスタイル調整を行ってください。

オリジナルテーマで利用する場合

現在ご利用中のテーマにおいて “wc_template/wc_item_single.php” を設置していない場合、これから開設する作業は必要なくそのままご利用いただけます。

wc_item_single.phpを設置していて、Welcat_Defaultとは商品詳細ページのタグ構成が異なるマークアップをされているオリジナルテーマをご利用の場合、下記手順に沿ってファイルを修正する必要があります。

< テーマに専用のテンプレートファイルを作成 >

まずは利用するテーマの下記のパスにwc_sku_select.phpというファイルを作成します。

テーマディレクトリ/wc_templates/wc_sku_select.php

すると、SKU Select機能使用中の商品の詳細ページを表示する際に、WCEX SKU Selectに内蔵されているテンプレートではなく、テーマ内に配置したwc_sku_select.phpが読み込まれ表示されるようになります。

次に、これまで商品詳細ページを表示していたwc_templates/wc_item_single.php

のファイル内容をコピーし、丸ごとテーマ内に作成したwc_sku_select.phpにペーストします。

ここからWCEX SKU Selectが動作するためにwc_sku_select.phpのマークアップを修正します。

< 単一SKUと複数SKUの表示を統一 >

まず、Welcart_Defaultのように単一SKUと複数SKUで商品詳細ページの表示を分けているようなテーマの場合、その記述が不要となりますのでWelcart_defaultのwc_item_single.phpを例に修正していきます。

まずは下記の記述を削除します。

<?php if(usces_sku_num() === 1) : usces_have_skus(); ?>

そして下記の記述

<?php elseif(usces_sku_num() > 1) : usces_have_skus(); ?>

から

<?php endif; ?>

までを削除します。

次に、

<?php usces_the_item(); ?>

という記述の下に

<?php usces_have_skus(); ?>

と記述します。
これによりSKUの数に関わらず、単一SKUの際の表示がされるようになりました。

< id=”skuform”の付与 >

続いて下記の記述

 <form action="<?php echo USCES_CART_URL; ?>" method="post"></form>

の直下のdivタグにskuformというidをつけます。

Welcart_defaultでは下記のようにskuformというクラス名のついたdivタグがあるので

<div class="skuform" align="right">

このdivタグにid=”skuform”を割り当てます。

<div class="skuform" id="skuform" align="right">

<　wcex_sku_select_form()の記述　>

SKU Selectのプルダウンや・ラジオボタンを表示するための関数wcex_sku_select_form()を記述します。

この関数は必ずid=”skuform”を付与したタグの中に記述してください。

<?php wcex_sku_select_form(); ?>

< class=”ss_cprice”の付与 >

ss_cpriceクラスはプルダウン・ラジオの値を選択した際に定価を切り替えるために必要なクラスです。

下記コードのように定価を表示する関数usces_the_itemCpriceCr()をタグで囲ってそのにss_cpriceクラスを割り当てるのが良いでしょう。

<span class="ss_cprice"><?php usces_the_itemCpriceCr(); ?></span>

< class=”ss_price”の付与 >

ss_priceクラスは売価を切り替えるために必要なクラスです。

売価はusces_the_itemPriceCr()という関数で表示していますので、この関数をで囲んでss_priceクラスを割り当てます。

<span class="ss_price"><?php usces_the_itemPriceCr(); ?></span>

< class=”ss_stockstatus”の付与 >

ss_stockstatusクラスは在庫状態を切り替え得るために必要なクラスです。

在庫状態はusces_the_itemZaikoStatus()という関数と、usces_get_itemZaiko(‘name’)という関数で出力している箇所があるので、それぞれで囲み、ss_stockstatusクラスを割り当てます。

<span class="ss_stockstatus"><?php usces_the_itemZaikoStatus(); ?></span>

<span class="ss_stockstatus"><?php echo apply_filters('usces_filters_single_sku_zaiko_message', esc_html(usces_get_itemZaiko( 'name' ))); ?></span>

< 在庫状態によるカートボタンの表示切り替え >

下記のようにusces_have_zaiko()関数を使って在庫がある場合はカートを表示、在庫がない場合はカートボタンを表示させず売り切れ表示している記述箇所を修正します。

<?php if( !usces_have_zaiko() ) : ?>
     <div class="zaiko_status"><?php echo apply_filters('usces_filters_single_sku_zaiko_message', esc_html(usces_get_itemZaiko( 'name' ))); ?></div>
<?php else : ?>
     <div style="margin-top:10px"><?php _e('Quantity', 'usces'); ?><?php usces_the_itemQuant(); ?><?php usces_the_itemSkuUnit(); ?><?php usces_the_itemSkuButton(__('Add to Shopping Cart', 'usces'), 0); ?></div>
     <div class="error_message"><?php usces_singleitem_error_message($post->ID, usces_the_itemSku('return')); ?></div>
<?php endif; ?>

SKU Select商品の場合は、在庫有り・無しの切り替えをJavascriptで切り替えることになるので、usces_have_zaiko()の分岐文を以下のように削除します。

       
<div class="zaiko_status"><span class="ss_stockstatus"><?php echo apply_filters('usces_filters_single_sku_zaiko_message', esc_html(usces_get_itemZaiko( 'name' ))); ?></span></div>
<div style="margin-top:10px"><?php _e('Quantity', 'usces'); ?><?php usces_the_itemQuant(); ?><?php usces_the_itemSkuUnit(); ?><?php usces_the_itemSkuButton(__('Add to Shopping Cart', 'usces'), 0); ?></div>
<div class="error_message"><?php usces_singleitem_error_message($post->ID, usces_the_itemSku('return')); ?></div>

そして在庫がない場合に表示する要素を囲っているタグにはitemsoldoutクラスを付与し、在庫有りの場合に表示する要素を囲っているタグにはc-boxクラスを付与します。


<div class="zaiko_status itemsoldout"><span class="ss_stockstatus"><?php echo apply_filters('usces_filters_single_sku_zaiko_message', esc_html(usces_get_itemZaiko( 'name' ))); ?></span></div>
<div style="margin-top:10px" class="c-box"><?php _e('Quantity', 'usces'); ?><?php usces_the_itemQuant(); ?><?php usces_the_itemSkuUnit(); ?><?php usces_the_itemSkuButton(__('Add to Shopping Cart', 'usces'), 0); ?></div>
<div class="error_message"><?php usces_singleitem_error_message($post->ID, usces_the_itemSku('return')); ?></div>

< 表示切り替え中のloading画像設置 >

id=”skuform”を付与したタグの中に下記のタグを記述すると、価格などを切り替えている際にloading画像が表示されます。

<div class="wcss_loading"></div>

< usces_the_itemGpExp()のコメントアウト >

SKU Selectでは業務パック割引機能が利用できないので、usces_the_itemGpExp()をコメントウトしておきます。

<?php //usces_the_itemGpExp(); ?>

定期購入商品を販売するためのプラグインWCEX Auto Delivery利用していなければ以上で作業は完了です。

WCEX Auto Deliveryをご利用の場合

WCEX Auto Deliveryをご利用の場合で、”wcad_filter_item_single_regular”というフックを使って定期購入表示をオリジナルのマークアップに変更されている場合はこちらの修正も必要です。

“wcad_filter_item_single_regular” フックを使ってカスタマイズしている箇所は残しておき、新しく”wcex_sku_select_filter_single_item_autodelivery” というフックを使ってSKU Select用のカスタマイズを行います。

カスタマイズファイル(function.php等)に下記のように記述します。

add_action( 'wcex_sku_select_filter_single_item_autodelivery', 'my_sku_select_autodelivery' );
function my_sku_select_autodelivery(){

}

これまで定期購入の箇所を表示していた”wcad_filter_item_single_regular”をつかってカスタマイズしていた関数の中身をコピーし、そのまま上記の関数my_sku_select_autodelivery()の中にペーストします。

ここから先ほどと同じように、idやclass名をタグに付与していく作業となります。

定期購入表示の箇所は先ほど説明したものとidやclass名が変わりますので改めて説明していきます。

< 単一SKUと複数SKUの表示を統一 >

単一SKUと複数SKUで表示を分けている場合は統一します。

まずは下記の記述を削除します。

　if( usces_sku_num() === 1 ) :

そして下記の記述

elseif( usces_sku_num() > 1 ) :

から

endif;

までの記述をすべて削除します。

次に、

<?php usces_the_item(); ?>

という記述の下に

<?php usces_have_skus(); ?>

と記述します。

そして下記の記述を

if( usces_have_zaiko() ) :

を下記の記述に変更します。

if( usces_have_zaiko_anyone( $post->ID ) ) :

               usces_the_item();

これによりSKUの数に関わらず、単一SKUの際の表示がされるようになりました。

< id=”skuform_regular”の付与 >

続いて下記の記述

 <form action="<?php echo USCES_CART_URL; ?>" method="post"></form>

の直下のdivタグにskuform_regularというidをつけます。

下記のようにskuformというクラス名のついたdivタグがあるので

<div class="skuform" align="right">

このdivタグにid=”skuform_regular”を割り当てます。

<div class="skuform" id="skuform_regular" align="right">

<　wcex_auto_delivery_sku_select_form()の記述　>

SKU Selectのプルダウンや・ラジオボタンを表示するための関数wcex_auto_delivery_sku_select_form()を記述します。

この関数は必ずid=”skuform_regular”を付与したタグの中に記述してください。

<?php wcex_auto_delivery_sku_select_form(); ?>

< class=”ss_price_regular”の付与 >

ss_price_regularクラスは定期購入の売価を切り替えるために必要なクラスです。

定期購入の売価はwcad_the_itemPriceCr()という関数で表示していますので、この関数をで囲んでss_price_regularクラスを割り当てます。

<span class="ss_price_regular"><?php usces_the_itemPriceCr(); ?></span>

< class=”ss_stockstatus_regular”の付与 >

ss_stockstatus_regularクラスは在庫状態を切り替え得るために必要なクラスです。

在庫状態はusces_the_itemZaikoStatus()という関数と、usces_get_itemZaiko(‘name’)という関数で出力している箇所があれば、それぞれで囲み、ss_stockstatus_regularクラスを割り当てます。

<span class="ss_stockstatus_regular"><?php echo apply_filters('usces_filters_single_sku_zaiko_message', esc_html(usces_get_itemZaiko( 'name' ))); ?></span>

< 在庫状態によるカートボタンの表示切り替え >

下記の記述の箇所を

<div style="margin-top:10px"><?php _e('Quantity', 'usces'); ?><?php wcad_the_itemQuant(); ?><?php usces_the_itemSkuUnit(); ?><?php wcad_the_itemSkuButton(__('Apply for a regular purchase', 'autodelivery'), 0); ?></div>

下記の記述に書き換えます。

<div class="zaiko_status itemsoldout"><span class="ss_stockstatus_regular"><?php echo apply_filters('usces_filters_single_sku_zaiko_message', esc_html(usces_get_itemZaiko( 'name' ))); ?></span></div>
<div style="margin-top:10px" class="c-box"><?php _e('Quantity', 'usces'); ?><?php wcad_the_itemQuant(); ?><?php usces_the_itemSkuUnit(); ?><?php wcad_the_itemSkuButton(__('Apply for a regular purchase', 'autodelivery'), 0); ?></div>

上記により、在庫がない場合はitemsoldoutクラスのついたdivタグ内を表示(売り切れ表示)し、在庫がある場合はc-boxクラスのついたdivタグ内を表示(カートボタン表示)します。

ss_stock_regularは定期購入表示の在庫状態を切り替えるために必要なクラスですので、在庫表示している関数をspanで囲んでください。ここではusces_get_itemZaiko( ‘name’ )が在庫表示している関数です。

< 表示切り替え中のloading画像設置 >

id=”skuform_regular”を付与したタグの中に下記のタグを記述すると、価格などを切り替えている際にloading画像が表示されます。

<div class="wcss_loading"></div>

< usces_the_itemGpExp()のコメントアウト >

SKU Selectでは業務パック割引機能が利用できないので、usces_the_itemGpExp()をコメントウトしておきます。

<?php //usces_the_itemGpExp(); ?>

以上で定期購入表示のSKU Selectへの対応作業は完了です。

商品詳細ページの表示

Welcart 専用公式テーマの対応バージョン

テーマのカスタマイズ

Welcart 専用公式テーマをアップグレードせずに利用する場合

オリジナルテーマで利用する場合

< テーマに専用のテンプレートファイルを作成 >

< 単一SKUと複数SKUの表示を統一 >

< id=”skuform”の付与 >

< wcex_sku_select_form()の記述 >

< class=”ss_cprice”の付与 >

< class=”ss_price”の付与 >

< class=”ss_stockstatus”の付与 >

< 在庫状態によるカートボタンの表示切り替え >

< 表示切り替え中のloading画像設置 >

< usces_the_itemGpExp()のコメントアウト >

WCEX Auto Deliveryをご利用の場合

< 単一SKUと複数SKUの表示を統一 >

< id=”skuform_regular”の付与 >

< wcex_auto_delivery_sku_select_form()の記述 >

< class=”ss_price_regular”の付与 >

< class=”ss_stockstatus_regular”の付与 >

< 在庫状態によるカートボタンの表示切り替え >

< 表示切り替え中のloading画像設置 >

< usces_the_itemGpExp()のコメントアウト >

Trending Articles

<　wcex_sku_select_form()の記述　>

<　wcex_auto_delivery_sku_select_form()の記述　>