【カラーミー】「カートに入れる」を複数設置する方法

ネットショップの作成・運営が簡単にできる人気のサービス「カラーミーショップ」ですが、商品を購入するページで、標準では「カートに入れる」ボタンが1つしか置けません。
スマートフォン等、ページが長くなるときに上下2つ設置したい場合があると思います。その方法をメモメモ。

▼テンプレート「商品詳細」

<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>

▼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);
  }
}

さらにサイズやカラーなどのオプション項目も連動させる方法をメモメモ。

▼テンプレート「商品詳細」

<!--1つ目-->
<{section name=num loop=$option}>
  <div class="cell_mar">
    <select name="<{$option[num].select_name}>" onchange="option_change(<{$option[num].id}>, 1)" id="s<{$option[num].id}>1">
      <option value="">選択してください</option>
      <{html_options values=$option_value[num].id  output=$option_value[num].name selected=$key }>
    </select>
  </div>
<{/section}>

<!--2つ目-->
<{section name=num loop=$option}>
  <div class="cell_mar">
    <select name="<{$option[num].select_name}>2" onchange="option_change(<{$option[num].id}>, 2)" id="s<{$option[num].id}>2">
      <option value="">選択してください</option>
      <{html_options values=$option_value[num].id  output=$option_value[num].name selected=$key }>
    </select>
  </div>
<{/section}>

▼JavaScript

<script type="text/javascript">
<!--
function option_change(oid, p){
  if(p==1){
    var n = $("#s" + oid + "1")[0].selectedIndex;
    $("#s" + oid + "2")[0].selectedIndex=n;
  }
  else if(p==2) {
    var n = $("#s" + oid + "2")[0].selectedIndex;
    $("#s" + oid + "1")[0].selectedIndex=n;
  }
}
// -->
</script >

【参考】カートに入れるを二ヶ所につける 1 - カラーミーいじりたおし