javascript - 価格に影響を与える BigCommerce カスタムフィールド

Question

これは BigCommerce サイト用です。製品ごとに配送日情報を収集する必要があるため、jQuery 日付ピッカーといくつかのラジオ ボタンを追加して、顧客が希望する配送日を選択できるようにします。(スクリーンショットを参照)。

合計製品価格に追加される選択肢ごとに金銭的価値を割り当て、注文が送信されたら、選択したオプションを他の注文の詳細とともに渡すことができるかどうか疑問に思っています.

関連性が高いかどうかはわかりませんが、HTML と日付ピッカー コードも貼り付けました。

免責事項: 私は BigCommerce API に精通していませんが、それが唯一の方法である場合は、喜んで試してみます。そうでなければ、いくつかのjQueryまたはjavascriptが私の最良の選択肢かもしれないと言われました。ただし、私はどちらも初心者なので、その方法でよい場合は、できるだけ具体的に回答してください。とても有難い。

    <script type="text/javascript">
    $(document).ready(function() {

    //holidays
    var natDays = [
      [1, 1, 'New Year'], //2014
      [1, 20, 'Martin Luther King'], //2014
      [2, 17, 'Washingtons Birthday'], //2014       
      [5, 26, 'Memorial Day'], //2014
      [7, 4, 'Independence Day'], //2014
      [9, 1, 'Labour Day'], //2014
      [10, 14, 'Columbus Day'], //2013
      [11, 11, 'Veterans Day'], //2013
      [11, 28, 'Thanks Giving Day'], //2013 
      [12, 25, 'Christmas'] //2013     
];

    var dateMin = new Date();
    dateMin.setDate(dateMin.getDate() + (dateMin.getHours() >= 14 ? 1 : 0));
    AddBusinessDays(dateMin, 4);

    function AddBusinessDays(curdate, weekDaysToAdd) {
        while (weekDaysToAdd > 0) {
            curdate.setDate(curdate.getDate() + 1);
            //check if current day is business day
            if (noWeekendsOrHolidays(curdate)[0]) {
                weekDaysToAdd--;
            }
        }
    }    

    function noWeekendsOrHolidays(date) {
        var noWeekend = $.datepicker.noWeekends(date);
        if (noWeekend[0]) {
            return nationalDays(date);
        } else {
            return noWeekend;
        }
    }
    function nationalDays(date) {
        for (i = 0; i < natDays.length; i++) {
            if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) {
                return [false, natDays[i][2] + '_day'];
            }
        }
        return [true, ''];
    }
      $('#datepicker').datepicker({ 
            inline: true,
            beforeShowDay: noWeekendsOrHolidays,           
            showOn: "both",            
            firstDay: 0,
                dateformat: "dd/mm/yy",
            changeFirstDay: false,
            showButtonPanel: true,       
            minDate: dateMin            
    });
  });
  </script>

<p>
<label for="datepicker">Desired Delivery Date: </label>
  <input type="text" id="datepicker" placeholder="ex. 01/01/2013" name="properties[Delivery Date]" readonly />
  <label><font size=1>Need it faster? Call us! (800) 880-0307</font>
  </label></p>
<style>
  #datepicker { height: 17px; max-width: 120px; }
  #datepicker {-webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;}
</style>

無線オプションの HTML:

 <p style="margin-top: 15px; margin-left: 40px;"><font size=3>Please Choose From Delivery Options:</font></p>   
    <br>                                                             
    <label for="Standard" style=" margin-left: 40px;">
    <input id="Standard" type="radio" name="properties[Delivery]" value="Standard Shipping" />
    <font>Standard Shipping</font><br>
    <p>
    <font size=1 style="margin-left: 18px;">Earliest Date of Delivery: 
    <span id="delivery-date">Estimated Date from Datepicker</span></font>
    </p>
    </label>
    {datepicker goes here}                                   
    <hr style=" margin-left: 40px;"> 
     <br>                                                            
     <label for="3DayExpress" style=" margin-left: 40px;">
     <input id="3DayExpress" type="radio"name="properties[Delivery]" value="3Day Express" />
     <font>Guaranteed by <script>document.write(d_names[curr_day] + " " + m_names[curr_month] + " " + curr_date + "<SUP>"
                                + sup + "</SUP> " + curr_year);</script>.<br></font><font size=1 style="margin-left: 18px;">3 Day Express Shipping. Additional $15</font>                  </label>
    <br>                                                             
    <label for="2DayExpress" style=" margin-left: 40px;">
    <input id="2DayExpress" type="radio" name="properties[Delivery]" value="2Day Express" />
    <font>Guaranteed by <script>document.write(d_names[curr_day] + " " + m_names[curr_month] + " " + curr_date + "<SUP>"
                                + sup + "</SUP> " + curr_year);</script>.<br></font><font size=1 style="margin-left: 18px;">2 Day Express Shipping. Additional $25</font>
   </label><br>