WelCartの商品詳細ページのカート投入は「usces_the_itemSkuButton」を利用します。
このカスタマイズは下記になります。
しかしWelcartでは商品一覧ページでもカート投入ができる「usces_direct_intoCart」という関数も用意されています。
これらの違いを下記に解説します。
1.usces_direct_intoCartとは
関数名が示すようにこの関数はダイレクトにカートに投入する関数で、カートに送る各種の情報に加え、下記のsubmit情報が生成されます。
<input name='[post_id][sku]' type='submit' id='inCart[post_id][sku]' class='skubutton' value='カートに入れる' onclick='return widgetcart.intoCart("post_id","sku")'>
■青字の所は商品情報が入ります。
■赤字の所がカート登録を行うjavascript名です。
下記の商品詳細ページの場合と比較して下さい。javascript名が異なります。
<input name="inCart[post_id][sku]" type="submit" id="inCart[post_id][sku]" class="skubutton p-wc-button-sku p-button" value="カートに追加" onclick="return uscesCart.intoCart('post_id','sku')" />
onclikとは、ボタンが押された時にCALLされるjavascript関数名です。
「widgetcart.intoCart」や「uscesCart.intoCart」はWelcartのクラス関数の中に定義されているjavascriptの「intoCart」が利用されます。
しかしクラス名によって動きが異なります。
1.usces_direct_intoCartを使う上での問題点
商品詳細ページの「usces_the_itemSkuButton」は、必須オプションが指定されてないと、画面上にエラーメッセージが表示されます。
一方、商品一覧ページで使う「usces_direct_intoCart」は、必須オプションのエラーチェックは行ってくれないので、そのままカートに登録されてしまいます。
よってこのカートボタンは原則、必須オプションが無い時だけに使える関数という事になります。
2.usces_direct_intoCartでエラーチェックを行う方法
しかし「usces_direct_intoCart」でもエラーチェックをしたいというニーズはあります。
この場合当然、このプログラムをベースにしたカスタマイズプログラムが必要となります。
上記のカスタマイズはかなり説明が難しいので、ポイントだけを下記に紹介します。
①オプションを表示する時に「post_id＋sku＋no」で構成されるクラス名を書き込みます。
noは、この商品の何番目のオプションか？の情報です。
②本来の購入ボタンはCSSで非表示にします。
③本来の購入ボタンの下に新規にエラーチェック用の購入ボタンを作成します。
<button sku='post_id+sku情報' No='3' class='button' type="button" >カートに入れる</button>
上記のボタン属性に「Post_id」、「sku」と「オプション数」を入れます
④Jqueryの処理
■ボタンが挿入されたら、「Post_id」、「sku」と「オプション数」を読込み、このクラス名を検索してエラーチェックをします。
■エラーがあった場合は、アラートを表示して終了します。
■エラーが無い場合は、下記で非表示の購入ボタンをプログラムでクリックします。
document.getElementById(new_id).click();
location.reload();
※new_idの所はinCart[post_id][sku]になります。
以上のやり方で商品一覧画面の購入ボタンでもエラーチェックが可能になりました。
メモ
本来の購入ボタンをJqeryで編集する方法も試みましたが、PCとAndroidではうまく機能するのですがiPADやiPhoneではうまく機能しない問題が発生しました。
そこで購入ボタンの編集は諦め、ダミー購入ボタンでエラーチェックを行う方法を採用しました。
