従来ではネット通販ができないと考えられていた商品（以前なら靴や眼鏡、最近なら自転車）が、最近では気軽に購入できるようになっています。

お客さまに細かい仕様を確認する必要がある商品、特にオーダーメイドは対面の実店舗向きと考えられていましたが、最近は購入者側でも意識が変わってきているように思います。
カラーミーショップでも、オーダーメイドに近い形態をとるお店もちらほら見かけます。

今回は、オーダーメイド向けのカスタマイズ方法についてご紹介します。

カラーミーショップの名入れ機能について

カラーミーショップにあるオーダーメイド機能というと、名入れ機能（レギュラープラン以上）になります。商品詳細ページにテキスト入力欄を設置して、購入時にお客さまに何か入力してもらう場合に使います。

名入れ機能ですから、元々は購入商品に名前を入れてもらう場合に使っていましたが、もちろん名前に限らず、メッセージ、細かいサイズ指定など、ショップ側が自由に設定できます。

参考）名入れ機能 - ネットショップの作成・運営なら店舗数No.1のカラーミーショップ

カラーミーショップの名入れ機能は（基本的に）テキスト入力欄一つです。しかし、一つでは足りない場合もあります。

プラチナプランの場合は増やしてもらえるそうです（たまに見かけます）。
とはいえ、プラチナプランは費用面で敷居が高すぎますので、現実的ではないでしょう。

決済画面の備考欄にお客さまに入力いただく形で対応しているショップも多いようですが、お客さまの手間を考えると、できれば改善したいポイントです。

既存の名入れ機能を活用して、オーダーメイド向けショップのカスタマイズを考えてみます。

既存の名入れ機能のコードについて

商品ごとに、名入れ機能を利用するか選択できます。

商品編集ページで「名入れ機能を利用する」とした場合は、名入れのテキスト入力欄は商品詳細ページの販売価格のそば表示されることが多いです。

下は、テンプレート（商品詳細HTML）内の名入れのテキスト入力欄周りの抜粋になります。
機能としては、カートに入れるボタンを押すと、指定したページに移動し、入力した項目を送信するという流れです（送信する項目は、<form>～</form>のあいだにinput要素で書きます）。

<form name="product_form" method="post" action="https://cart.shop-pro.jp/proxy/basket/items/add">
 （省略）
  <{if $product.product_text_titles}>
    <{foreach from=$product.product_text_titles key=key item=val}>
      <tr class="product_order_form">
        <th><{$val|escape}></th>
        <td>
          <input type="text" name="product_text[<{$key|escape}>]" value="" class="text-titles-list__detail-text" />
        </td>
      </tr>
    <{/foreach}>
  <{/if}>
 （省略）
  <input class="product_cart_btn product_addcart_btn" type="submit" value=" カートに入れる" />
 （省略）
</form>

コードを読むと、名入れのテキスト入力欄がSmartyの繰り返し文（foreach）の内側で表示するようになっています。
これはプラチナプランで名入れ機能を拡張してテキスト入力欄を複数表示する場合を考慮しているのだと思います（たぶん）。

上コードはSmarty構文を含むHTMLになっています（テンプレート内ですし）。
実際に商品詳細ページをブラウザで表示した際のソースコードを見ると、名入れのテキスト入力欄はおおむねこんな風になっています。

<input name="product_text[1]" value="" type="text">

どうやって複数項目を送信するのか

もしかしたら、product_text[1]の数字部分が[2]、[3]…とカウントアップするのかもしれないと推測できますが、product_text[2]に値をセットして送信しても、効果はありません。

送信先のプログラムで、product_text[2]のvalueを取り込んで処理していないからです。
product_text[2]を使うのなら、送信先のプログラム側にあらかじめ用意が必要というわけです。

反対に、product_text[1]にvalueをセットして送信したものは、決済画面に移った際に処理されます。
処理の具体例としては、決済画面上に表示したり、メール送信する際に本文に含めてくれたりです。

以上のことから実現可能な方法を検討すると、
お客さまに複数項目を入力してもらい、カートボタンを押してサーバーに情報を送信する際に、入力されたものを一つにまとめて、product_text[1]のvalueにセットしてやれば良いという話です。

カラーミーショップ内のコーディング

jQuery部分

$(function(){
  $('.product_cart_btn').click(function(){
    var st1 = $("input[type='text'][name=size1]").attr("id");
    var sv1 = $("input[type='text'][name=size1]").val();
    var st2 = $("input[type='text'][name=size2]").attr("id");
    var sv2 = $("input[type='text'][name=size2]").val();
    var pt = st1 + ':' + sv1 + '/' + st2 + ':' + sv2;
    $("input.product_text1").val(pt);
  });
});

テンプレート内のHTML編集（form要素内の任意の場所に設置）

<form>
  (省略)
  <input id="Height" name="size1" value="" type="text" />
  <input id="Width" name="size2" value="" type="text" />
  (省略)
  <input class="product_text1" style="display:none;" type="text" name="product_text[1]" value=""/>
  <input class="product_cart_btn" type="submit" value=" カートに入れる" />
  (省略)
</form>

product_text[1]と決め打ちしても動きますし、既存のテンプレートにあるように繰り返し文（foreach）の内側に入れてもよいでしょう。

テキスト入力欄のid属性値をラベル代わりに使っていますので、id属性値にはわかりやすい項目名を付けます。
今回の例では、お客さまに商品の縦横サイズを入力してもらうようなイメージになっています。

商品ごとの条件分岐（必須）

<{$val|escape}>に名入れ項目名が入っているので、入力項目Aのときはあっち、入力項目Bのときはこっち、それ以外のときはデフォルトという風に条件分岐をさせると良いでしょう。

条件分岐が数パターンくらいなら問題ありませんが、あまりに多いと作業が煩雑になりすぎて、現実的ではないです。

名入れの複数送信のまとめ

product_text[1]は、255文字以内の制限があります（全角・半角区別なく同じ文字数のようです）。

テキスト入力欄以外にも、工夫すればラジオボタンなどにも使えます。

繋げて一つの文字列にしますので、お客さま側もお店側もオーダーメイドの内容について読み取りにくくなります。

名入れ欄を使う場合は、在庫数の設定ができませんので、在庫管理しない場合のみ使えます。

A商品には〇〇、B商品には××、C商品には□□を入力してもらうような場合は、複雑な条件分岐が必要になりますので、あまり向いていません。

プラチナプランよりは、最初から他のショッピングカートを借りたほうがいいように思います（MakeShopは最大10個対応しているって書いてました）。
入力項目が複雑な場合も同様で、カラーミーショップ向きではありません。

すでにカラーミーショップをお使いでしたら、これを試してみてください。

追記（2020年11月）

カラーミーショップでアプリ化されました。機能的にはアプリの方が導入が簡単で多機能です。

月額料金をかけたくない場合や、比較的シンプルな条件の場合は、サンプルコードを参考に、自分でコーディングしてもよいのではないでしょうか。

執筆者

えいじ@naeco.jp　この記事を書いた人

メーカー系情報システム部門出身の個人事業主。
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。

ご相談・お問い合わせはこちら