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

商品説明文がスクロールするくらい長いショップの方から、「カートに入れる」をページ上下に二つほしいと要望がありました。
なかをみると、カラーミーショップ!プロは通常ひとつを想定しているようでした。

複数設置すると当然のように、「購入数」を表示するテキスト入力フィールドが複数必要になります（なくても問題ありませんが、お客様の利便性を考えると普通はつけます）。
複数になると各々のテキストフィールド内で表示している数字の整合が取れなくなり、正しい数字をサーバーに渡すことができなくなります。
そこさえクリアすれば複数設置することは可能です。ポイントをみていきましょう。

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;" />
            </td>
            <td style="padding: 0px;">
              <div style="width: 15px; margin: 0px;">
                <a href="<{$num_up_url}>"><img src="<{$num_up_img_url}>"></a>
                <a href="<{$num_dw_url}>"><img src="<{$num_dw_img_url}>"></a>
              </div>
            </td>
            <td style="padding: 0px;"><{$product.unit}></td>
          </tr>
       </table>
     </td>
   </tr>
  <{/if}>
  （中略）
</form>

以下の独自タグで、JavaScriptを呼び出します。
<{$num_up_url}>の内容
javascript:f_change_num2(document.product_form.product_num,'1',1,1);
<{$num_dw_url}>の内容
javascript:f_change_num2(document.product_form.product_num,'0',1,1);

2.http://～/js/cart.js 内の関数

//***********************************
//個数UP・DOWNボタン処理
//***********************************
function f_change_num2(select, pType, pMinNum, pStockNum) {
  if( select.value.match(/[^0-9]/)){ select.value = pMinNum; return; }
    wNum = parseInt(select.value);
    if (pType == "0" && wNum > pMinNum) {
      select.value = String(wNum-1);
    }
    if (pType == "1") {
      if (pStockNum) {
        if (wNum >= pStockNum) return;
      }
      select.value = String(wNum+1);
    }
}

数量を増減させるボタンを押すと、cart.js（最初からあるJavaScript）の関数「f_change_num2」が呼び出されます。pTypeで増か減かの条件分岐。
ここでのselect.valueとは、「document.product_form.product_num.value」のことです。

どのように整合をとるか、イメージできましたか。橙色部分が修正時のポイントです。
cart.jsは、はじめからあるJavaScriptで、ファイルの置き場所に手が出せません。そういうことで、なかを手直しすることはできません。

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


【参照リンク】
・とほほのWWW入門