2015年6月20日

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

もう5年前になりますが、「カートに入れるを二ヶ所につける」という記事を書きました。
この記事、(今風のコーディングではないですが)地味に好評だったようです。
ということで、今回はときおり話題に挙がっていた、複数カートで「オプション項目も連動する」を作ってみました。
そういえば、カラーミーショップのオプションって、もともとはプルダウン形式のみでしたっけね。


1. コード

1.1 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.2 商品詳細ページ(ひとつめ)

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

1.3 商品詳細ページ(ふたつめ)

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

2. 簡単な解説


商品詳細ページは古めのテンプレ・ウッドがベースのため、プルダウンメニューです。
オレンジマーカー部は追加箇所。select nameのあとにonchangeとidを追加。
onchageイベントは、オプションを変更したときに関数を呼び出します。
カートとオプションごとに固有のidを振っています。
記事幅の都合で勝手に改行が入っていますが不要です。

$("#id")[0].selectedIndex でプルダウンメニューの何番目を選んだかがわかりますので、変更したほうから変更していないほうへ代入しています。

【関連記事】
カートに入れるを二ヶ所につける