2010年5月26日

カートに入れるを二ヶ所につける 3

カートに入れるを二ヶ所につける 2」のつづき。

今回はJavaScriptのサンプルです。ベースになるソースは「カートに入れるを二ヶ所につける 1」です。
JavaScriptですが、外部ファイルを読み込む場合は、ロリポップ!のようなレンタルサーバーに置き、「共通」か「商品詳細」の先頭で読み込みます( 汎用性のある関数は「共通」で)。<body>部でOK。
<script src="http://~/sample.js" type="text/javascript"></script>
ポイントは前回説明済みですので、今回は補足事項のみ。
・カートの二つめはまるまるコピーで、橙色部分を修正。
・置換処理では関数名しか差し替えていない。

1.テンプレート「商品詳細」の購入数からカートに入れるまで抜粋。橙色部分が修正箇所。
<form name="product_form" method="post" action="<{$cart_url}>">
  (中略)
  <{if $product.soldout_flg == 0 && $shop_stop_flg == false && $product.login_sale_flg == false }>
    <tr>
      <th>購入数</th>
      <td style="padding: 0px 5px;">
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td style="padding: 0px;">
              <input type="text" name="product_num" value="<{$product.init_num}>" style="width: 50px;" onKeyUp="change_key_num()"/>
            </td>
            <td style="padding: 0px;">
              <div style="width: 15px; margin: 0px;">
                <a href="<{$num_up_url|regex_replace:'/f_change_num2/':'change_button_num'}>"><img src="<{$num_up_img_url}>"></a>
                <a href="<{$num_dw_url|regex_replace:'/f_change_num2/':'change_button_num'}>"><img src="<{$num_dw_img_url}>"></a>
              </div>
            </td>
            <td style="padding: 0px;"><{$product.unit}></td>
          </tr>
       </table>
     </td>
   </tr>
  <{/if}>
  (中略)
  <{if $product.soldout_flg == 0 && $shop_stop_flg == false && $product.login_sale_flg == false }>
    <tr>
      <th>購入数</th>
      <td style="padding: 0px 5px;">
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td style="padding: 0px;">
              <input type="text" name="product_num2" value="<{$product.init_num}>" style="width: 50px;" onKeyUp="change_key_num2()" />
            </td>
            <td style="padding: 0px;">
              <div style="width: 15px; margin: 0px;">
                <a href="<{$num_up_url|regex_replace:'/f_change_num2\(document.product_form.product_num/':'change_button_num(document.product_form.product_num2'}>"><img src="<{$num_up_img_url}>"></a>
                <a href="<{$num_dw_url|regex_replace:'/f_change_num2\(document.product_form.product_num/':'change_button_num(document.product_form.product_num2'}>"><img src="<{$num_dw_img_url}>"></a>
              </div>
            </td>
            <td style="padding: 0px;"><{$product.unit}></td>
          </tr>
       </table>
     </td>
   </tr>
  <{/if}>
  (中略)
</form>

2.JavaScript
function change_key_num(){
  document.product_form.product_num2.value = document.product_form.product_num.value;
}

function change_key_num2(){
  document.product_form.product_num.value = document.product_form.product_num2.value;
}

//***********************************
//個数UP・DOWNボタン処理(差し替え版)
//***********************************
function change_button_num(select, pType, pMinNum, pStockNum) {
  if( select.value.match(/[^0-9]/)){ select.value = pMinNum; return; }
  wNum = parseInt(select.value);
  if (pType == "0" && wNum > pMinNum) {
    document.product_form.product_num.value = String(wNum-1);
    document.product_form.product_num2.value = String(wNum-1);
  }
  if (pType == "1") {
    if (pStockNum) {
      if (wNum >= pStockNum) return;
    }
    document.product_form.product_num.value = String(wNum+1);
    document.product_form.product_num2.value = String(wNum+1);
  }
}

テストした感じだと問題なさそうですが、いかがでしょうか。
以前に仕事でつくったソースより、ずいぶんシンプルになりました。


カートに入れるを二ヶ所につける - オプション編」に続く。

【追記】
間違い部分を訂正しました。ご指摘ありがとうございました。