Storyboardが運営、プロデュースする革のPCバッグmoe。ECショップはカラーミー。

オープン当初から改善したいと思いながら手付かずだった2つしか設定できない購入オプション（バリエーション）のUI改善に関するメモ。

カラーミーでは商品登録上、色やサイズ指定といったオプション（バリエーション）設定は２項目しかないのですが、運用次第で設定項目を3つ、4つという具合に対応したいと思いました。

2つしかないカラーミーのオプション設定

カラーミーは高機能で、よく出来たECカートです。カスタマイズもSmartyとHTMLやJSを駆使すればかなり高度なカスタマイズが行なえます。

moeのECカートも元のテンプレートの原形がわからないレベルまでかなり触りました（笑）

基本的な運用では不満はないのですが、オープン時より悩んでいる問題がありました。

それがショルダーやクラッチバッグで設定するオプションの設定です。

色と裏地の組わせの数で表示項目が多くなるカラーミーのオプション

moeの革のバッグはバッグ本体のカラーと裏地、そして名入れ文字の書体の組み合わせでひとつの商品を指定します。

本来なら、カラー、裏地、名入れ文字書体の3つの設定をしたいのですが、カラーミの商品登録では１つの商品につき、２つのオプションしか設定できません。

オープン時はスケジュール的にも余裕がなく、オプション1を「（バッグ本体）の色 x 裏地」、オプション2を　「名入れ書体」として設定しました。

カラーミーで設定できるオプション項目

カートに入れる際に、オプション1、オプション2の両方を設定するのですが、このままの状態だと、オプション1、オプション2それぞれの項目を全て表示することになります。

裏地の指定がなければ、オプション1のカラーで3〜4、オプション2の名入れ書体で3つなの問題ないのですが、オプション1はカラーと裏地の組み合わせ表示になるので9〜12パターンになります。

ユーザーとしては一度に12パターンの選択肢を見せられると戸惑うのと、スマートフォンでみると縦スクロールが異様に長くなってしまうので途中でやめてしまう恐れもあります。

理想としては、①カラーを選択⇒②裏地を選択⇒③名入れ書体を選択という風に3段階でそれぞれの選択項目3〜4にしたいと考えていました。

POSTされるオプションの値は、それぞれ２つ

商品ページからカートに入れる際にPOSTされるオプションですが、それぞれのオプションで２つの値が送られています。

例えば、ショルダーバッグで、オプション1の項目でカラーがキャメル、裏地が赤チェックだとPOSTされるオプション1の値は”10000001,4″といった文字列で送られます。

“10000001”は、ショルダーバッグのオプション1のオプションID（$option_value[0].option_bid）。

その次の”4″はオプション1で登録されている「キャメルx赤チェック」のインデックス番号、配列形式なので実際は5番目に登録されています。

このように、x座標、y座標のように”10000001,4″といった2つの値で送られ、サーバー側でオプション1のキャメルx赤チェックとして処理されています。

カラー、裏地、名入れ書体の3ステップの選択に変える

それぞれのオプション値が分かれば、なんとかできそうだということでやってみました。

オプション1のカラーと裏地の選択を①カラーを選択⇒②裏地を選択という風に個別に選択するようにして、名入れ書体を含めて3ステップ方式にしました。

カラー、裏地ともラジオボタン形式で項目名をそれぞれ、option_color、option_urajiと設定。

ラジオボタンの選択値（value)は0、1、2・・・と設定しました。

要は、1つのオプションは”オプションID,選択値”で、オプションIDは、カラーと裏地を選択する段階で決まっています。

なので、カラーと裏地の組わせで選択値を決定しましょうという仕組みです。

選択値を決めるのにカラーと裏地をそれぞれx、yとして2次元配列として、その組み合わせで選択値を決定し、その値を別に用意したoption1という名前のhidden項目にセットしています。

できてしまえば意外と簡単です。オプションの登録内容によってはもう少し細いオプション設定もできそうですね。

オプション1を2段階にて3ステップで選択

カラー、裏地のUIは以下

<h5>バッグのカラーを選択してください</h5>
<div class="option_list">
  <div class="option_data-box">
    <label for="color-renga" class="option_color">
      <div class="option_thumbnail option_tip option_color_renga"></div>
      <input type="radio" name="option_color" value="0" id="color-renga">レンガ
    </label>
  </div>

  <div class="option_data-box">
    <label for="color-camel" class="option_data-box option_color">
      <div class="option_thumbnail option_tip option_color_camel"></div>
      <input type="radio" name="option_color" value="1" id="color-camel">キャメル
    </label>
  </div>
  
  <div class="option_data-box">
    <label for="color-vermillion" class="option_data-box option_color">
      <div class="option_thumbnail option_tip option_color_virmillion"></div>
      <input type="radio" name="option_color" value="2" id="color-vermillion">バーミリオン
    </label>
  </div>
  
  <div class="option_data-box">
    <label for="color-charcoal" class="option_data-box option_color">
      <div class="option_thumbnail option_tip option_color_charcoal"></div>
      <input type="radio" name="option_color" value="3" id="color-charcoal">チャコールグレー
    </label>
  </div>
</div>

<h5>バッグの裏地を選択してください</h5>
<div class="option_list">
    <label for="uraji-0" class="option_data-box option_uraji">
        <div class="option_thumbnail">
            <img src="https://moe-bag.jp/shop_data/images/item/lining/dot_blue_220x120.jpg" alt="【紺色の無地】シンプルな紺色の無地です"  class="option_img">
        </div>
    <input type="radio" name="option_uraji" value="0" id="uraji-0">【紺色の無地】
         <div class="option_detail-wrap">
            <p class="option_description">シンプルな紺色の無地です</p>
        </div>
    </label>
  
    <label for="uraji-1" class="option_data-box option_uraji">
        <div class="option_thumbnail">
            <img src="https://moe-bag.jp/shop_data/images/item/lining/azuki_check_220x120.jpg" alt="【紺赤チェック】ピンクに近い赤色で薄いブルーと白のチェック柄" class="option_img">
        </div>
    <input type="radio" name="option_uraji" value="1" id="uraji-1">【紺赤チェック】
         <div class="option_detail-wrap">
            <p class="option_description">紺、赤、緑、小豆色が混ざりあったチェック柄</p>
        </div>
    </label>
  
    <label for="uraji-2" class="option_data-box option_uraji">
        <div class="option_thumbnail">
            <img src="https://moe-bag.jp/shop_data/images/item/lining/check_red_220x120.jpg" alt="【赤チェック】ピンクに近い赤色で薄いブルーと白のチェック柄" class="option_img">
        </div>
    <input type="radio" name="option_uraji" value="2" id="uraji-2">【赤チェック】
         <div class="option_detail-wrap">
            <p class="option_description">ピンクに近い赤色で薄いブルーと白のチェック柄</p>
        </div>
    </label>

</div>

JSとUIの連携部分はこちら

<input type="hidden" name="option1" value="" id="option1"> <!--POSTされるオプション1--> 
<script>
  <{assign var="option_id" value=$option_value[0].option_bid}>
  var option_id = '<{$option_id}>'; //例：001
  var bag_optons = []; //POSTされるオプションの値（オプションID,登録されている要素番号）　例："123456,1"
  var color_count = $('.option_color').length //メッセンジャーカラー（例：レンガ、キャメル、バーミリオン、チャコールグレー）
  var uraji_count =  $('.option_uraji').length; //バッグの裏地（例：紺の無地、紺赤チェック、赤チェック）
  var count = 0; //要素番号
  var color_uraji_list = []; //商品ページUIでのカラーと裏地の組み合わせ
  for(var i = 0; i < color_count; i++) {
    color_uraji_list[i] = []; //カラー毎に配列をつくる
    for(var j = 0; j < uraji_count; j++) {//作ったカラーの配列に裏地のリストをセット
      color_uraji_list[i][j] = count; // 例キャメルの赤チェック color_uraji_list[1][2] = 4
      bag_optons[count] = option_id + ',' + count.toString(); //bag_optons[4] = "10000001,4"
      count++;
    }
  }
  //本体色の選択
  var sel_color='';
  $("[name='option_color']").on('click',function(){
    sel_color = $("input[name='option_color']:checked").val();
    setBaOption1();
  });
  //裏地の選択
  var sel_uraji='';
  $("[name='option_uraji']").on('click',function(){
    sel_uraji = $("input[name='option_uraji']:checked").val();
    setBaOption1();
  });
  //登録されているオプション値をhiddenにセット
  function setBaOption1(){
    if(sel_color !== '' && sel_uraji !== ''){
      var sel_option1 = color_uraji_list[sel_color][sel_uraji];
      $('#option1').val(bag_optons[sel_option1]);
    }
  }
</script>

ダンプしてオプション値の確認

これを実装するにあたり、注意しなければ行けないのが、オプションIDとその選択値と、選択値が実際に操作したものとマッチングしているかということを確認しないといけません。

確認するには商品ページでオプション内容をダンプする必要があります。

カラーミーはSmartyに独自のAPIを付与したものですが以下のようにすれば確認できると思います。

//商品ページで出力
<{$option_value|@debug_print_var}>

///////出力内容
Array (4)
option_bid => "10000001" //オプション1のID
option_name => "色と裏地" //オプション1の登録名

//idとname、それぞれ共通のインデックスでidの値とラベルを紐付けている
id => Array (12)
  0 => "10000001,0"
  1 => "10000001,1"
  2 => "10000001,2"
  3 => "10000001,3"
  4 => "10000001,4"
  5 => "10000001,5"
  6 => "10000001,6"
  7 => "10000001,7"
  8 => "10000001,8"
  9 => "10000001,9"
  10 => "10000001,10"
  11 => "10000001,11"
name => Array (12)
  0 => "レンガ×紺の無地"
  1 => "レンガ×紺赤チェック"
  2 => "レンガ×赤チェック"
  3 => "キャメル×紺の無地"
  4 => "キャメル×紺赤チェック"
  5 => "キャメル×赤チェック"
  6 => "バーミリオン×紺の無地"
  7 => "バーミリオン×紺赤チェック"
  8 => "バーミリオン×赤チェック"
  9 => "チャコールグレー×紺の無地"
  10 => "チャコールグレー×紺赤チェック"
  11 => "チャコールグレー×赤チェック"