• カミナリツイッターカミナリtwitter
  • カミナリフェイスブックカミナリfacebook
  • カミナリインスタグラムカミナリinstagram

山陰の情報を発信するカミナリ

ナビ

05

SEPTEMBER

ウェブTUESDAY 2017 / 9 / 5

Welcartにて受取日の指定を強制する

Welcartで通販サイトを制作する際、受取日指定で受取日時が指定可能です。

既定値は「指定なし」となっていますが、受取日の選択を強制させたい場合はどうしたらいいでしょうか。

 

ソースを探ると、この箇所はPHPではなくJavaScriptにて生成されていました。SELECT要素はPHPから出力されていますが、その子要素のOPTION要素はJavaScriptで生成されています。よってJavaScriptにて対応する必要がありました。

下記のJavaScriptの処理を該当ページにて実行させます。
最小限で動作させたいなら wc_delivery_page.php で動作させますが、それほど重くない処理なので全ページ共通で動作する JavaScript にしてしまっても問題ありません。

(function($){
  var $target = $('#delivery_date_select');
  if(! $target.length){ return; }
  wait();
  
  function proc(){
    if($target.children('option').length > 1){
      $target.children('option[value="指定なし"]').remove();
    }
  }
  
  function wait(){
    setTimeout(function(){
      if(! $('#delivery_date_select').children().length){
        wait();
      }else{
        proc();
      }
    }, 200);
  }
})(jQuery)

 

やっていることは単純で、受取日の選択肢から「指定なし」をremoveで削除しているだけですが

・選択肢がOPTION要素として登録済みか否かチェックしてから動作させる。

・万一「指定なし」しか選択肢がない場合には削除しない。商品が買えなくなるので…..
(発送日目安が未選択の商品が含まれる場合に発生します)

というようなことをしています。

 

このあたりの処理は、山陰の特産品の通信販売をしている https://beewing.jp/ さまのサイトにて使用しています。

 

今回のは送料処理が複雑で送料計算を自前で書いたり、お気に入り商品の登録/表示ができるプラグインを自前で作ったり、最近見た商品の履歴を記録/表示できるプラグインを自前で作ったりと、なかなかの労作になりました。

松本博之隠しプロフィール画像

TEXT by

松本 博之まつもとひろゆき)

1978年、鳥取県米子市生まれ。
株式会社マジックワード WEBシステムの開発・運用を担当。

この人が書いた他の記事を読む