tips

welcart「配送希望日」の表示内容をカスタマイズ

welcartネタで細かいカスタマイズをひとつ。

welcartの配送希望日の表示がずらっと数字の羅列でちょっと見にくい。曜日とか欲しい。ついでに土日、平日指定なんかも欲しい。

sc-2015-03-05-22.34

 

/////////////////////// 配送希望日のカスタマイズ /////////////////////// 

add_filter( 'usces_delivery_after_days_script', 'my_usces_delivery_after_days_script' );
function my_usces_delivery_after_days_script( $delivery_after_days_script ){
return $delivery_after_days_script = "
 option += '<option value=\"".__('No preference', 'usces')."\">指定しない(一番早い営業日に送付)</option>';
 option += '<option style=\"background-color: #FFF0F5;\" value=\"土日\">土日</option>';
 option += '<option style=\"background-color: #F0FFF1;\" value=\"平日\">平日</option>';
 for(var i = 0; i < delivery_after_days; i++) {
 var newdate = new Date( date[\"year\"]+\"/\"+date[\"month\"]+\"/\"+date[\"day\"] ),
 getday = newdate.getDay(),
 daystyle = '',
 weekday = [\"日\",\"月\",\"火\",\"水\",\"木\",\"金\",\"土\"];
 date_str = date[\"year\"]+\"年\"+parseInt(date[\"month\"])+\"月\"+parseInt(date[\"day\"])+\"日(\"+weekday[getday]+\")\";
 if ( getday == 0 ){
 daystyle = 'background-color: #FFF0F5;'; // 日曜日
 } else if ( getday == 6 ) {
 daystyle = 'background-color: #F0F8FF;'; // 土曜日
 }
 if(date_str == selected_delivery_date) {
 option += '<option style=\"' + daystyle + '\" value=\"' + date_str + '\" selected>' + date_str + '</option>';
 } else {
 option += '<option style=\"' + daystyle + '\" value=\"' + date_str + '\">' + date_str + '</option>';
 }
 date = addDate(date[\"year\"], date[\"month\"], date[\"day\"], 1);
 }";
}

add_filter( 'usces_filter_order_edit_delivery_days_select', 'my_usces_filter_order_edit_delivery_days_select', 10, 3 );
function my_usces_filter_order_edit_delivery_days_select( $delivery_days_select, $data, $delivery_after_days ){
 $delivery_days_select = '<option value="'.__('Non-request', 'usces').'">指定しない(一番早い営業日に送付)</option>';
 $value = '土日';
 $selected = (isset($data['order_delivery_date']) && $data['order_delivery_date'] == $value) ? ' selected="selected"' : '';
 $delivery_days_select .= '<option value="'.$value.'"'.$selected.'>'.$value.'</option>';
 $value = '平日';
 $selected = (isset($data['order_delivery_date']) && $data['order_delivery_date'] == $value) ? ' selected="selected"' : '';
 $delivery_days_select .= '<option value="'.$value.'"'.$selected.'>'.$value.'</option>';
 $data_order_date = explode(" ", $data['order_date']);
 $order_date = explode("-", $data_order_date[0]);
 for($i = 0; $i < $delivery_after_days; $i++) {
 $timestamp = mktime(0,0,0,$order_date[1],$order_date[2]+$i,$order_date[0]);
 $weekday = array( "日", "月", "火", "水", "木", "金", "土" );
 $value = date( 'Y年n月j日', $timestamp ).'('.$weekday[date( 'w', $timestamp )].')';
 $selected = (isset($data['order_delivery_date']) && $data['order_delivery_date'] == $value) ? ' selected="selected"' : '';
 $delivery_days_select .= '<option value="'.$value.'"'.$selected.'>'.$value.'</option>';
 }
 return $delivery_days_select;
}

以上をfunctions.phpに記載して下さい。「usces_delivery_after_days_script」フックはカート画面の表記を変更します。「usces_filter_order_edit_delivery_days_select」フックは受注リスト内の配送希望日セレクタを変更しています。こういう細部のフックもきっちと用意されている当たり、welcartはカスタマイズすることを考えて設計されているんだな、と関心させられますね。

Your Comment

コードの記述は<pre>または<code>タグで括って下さい。自動的にエスケープされます。

 

右の文字を入力して下さい captcha

5 comments

  1. Hase

    1月 26, 2017

    初めまして。貴重な情報ありがとうございます。

    上記のコードを入力したところ、「usces_delivery_after_days_script」フックを入れるとページが表示されなくなってしまいました。

    可能性のある原因など考えられますでしょうか?お教えいただければ幸いです。
    ・テーマ welcart basic 1.2.4
    ・WordPress 4.7.1
    ・GoogleChrome

    返信する
    • Mizuho Ogino

      1月 26, 2017

      エスケープしている文字列が脱落しているみたいですね。

      ビジュアルエディターで記事を更新した時ですかね。修正しました。

    • Hase

      1月 26, 2017

      Mizuho Ogino 様
      大変助かりました!

      ありがとうございます。配送希望日から土日を抜く必要があったので苦戦していましたが、これで実装できました。感謝いたします。

  2. oku

    12月 22, 2016

    初めまして。Welcart使っています。

    例えばですが、2015年3月10(火)
    2015年3月13日(金)という風に毎週の火曜日と金曜日だけを選択できるようにカスタマイズできたりしますでしょうか?

    返信する
    • Mizuho Ogino

      12月 22, 2016

      getday のところで曜日を取得してるので、それを使ってoptionにclassを加え、cssでdisplaynoneにするとか、あるいはgetdayで判別してdisabledにしてはいかがでしょうか。