ショップ独自のポイント制度について 2

【追記】 公式に実装されました。以下は古い記事になります。

前回からの引き続き。今回はカラーミーショップにポイントを表示させるSmartyのサンプルです。
下記は「カラーミーショップ - 助け合い掲示板」に掲載されていたものです。

<!--ポイント支給率　100円毎に5ポイントの場合-->
<{assign var="sData" value=$product.sales|regex_replace:"[[\(]+[\S]+[\)]]":""}>
<{assign var="sData" value=$sData|replace:",":""}>
<{assign var="sData" value=$sData|replace:"円":""}>
<{math equation="floor($sData/100)" assign="sData"}>
<{math equation="round(5*$sData)" assign="uData"}>
<{$uData}>ポイント

商品詳細ページの表示させたい場所に設置してください。

ショップ独自のポイント制度について 1

カラーミーショップでは「GMOとくとくポイント」（GMOとくとくショップ、カラメル出店ショップ間で共通のポイント）とは別に、ショップ独自のポイント制度を導入することができます。
ショップ独自のポイントは、付与率を自前で決められますので、ショップに応じた値引率を設定できます。
リピーター獲得のための方策として、ネット通販にかぎらず、多くのショップで利用されています。

まず、ショップ独自のポイント制度導入にあたっての概説。
カラーミーでのポイント導入はそれほど難しくありません（ポイント制度使用設定「使用する」にするだけ）。

写真1.ポイント設定箇所
お店をつくる＞決済の設定をする＞ポイント設定

・ポイント制度使用設定（使用する/しない）
・ポイント支給タイプ（一般的な3通りの方法）
・使用可能ポイント数（最大を設定しないと使用できない。32767がMAX）。

■いくつかの問題点
写真1のように、かんたんに設定できますが、問題点もあります。

1.ポイント数を表示するための独自タグがないので、かんたんに表示できない
2.商品ごとに付与率を設定したいが、無理
3.お客様がポイントを確認しづらい

1については、JavaScriptを使用して、販売価格から計算し、表示するようにします。この問題については、解決可能です。次回にサンプル掲載いたします。
2については、シンプルな解決策は現状ありません。「商品を売る＞顧客を管理する」から、お客様のポイントを手動で増減させることも可能ですが、分かりにくさや手間を考えれば、現実的ではありません。
3については、商品購入直後に送信される自動送信メールには、付与ポイント数や保有ポイント数が表示されません。マイアカウントにログインしてもらって確認するしかありません。モバイル用では、マイアカウントにすら表示されません。

■ポイント承認について
商品購入直後は仮ポイントとして付与されます。
入金確認後や商品発送後など、各ショップのタイミングで仮ポイントの承認を行います（写真2一番右のリンクから）。承認すると、お客様は使用可能になります。より詳細は、カラーミーのマニュアル参照。
写真2
注文直後は（使用できない）仮ポイントとして加算され、マイアカウントで確認できます。

■ポイントの使用方法と確認方法

・ほしい商品をカートに入れたのち、「レジへ進む」をクリックすると、「お客様情報の入力」画面になります。その画面で現在の保有ポイント数が表示され、今回使用するポイント数が入力できます。
・モバイルのお客様の場合、保有ポイント数の確認は「お客様情報の入力」画面でしか行えません。
・PCのお客様の場合、「お客様情報の入力」画面とマイアカウントから確認できます。
・ショップ運営者は、顧客管理から確認できます。ポイントの増減もできます。

写真3
モバイルの「お客様情報の入力」画面（抜粋）です。
PCの場合もおおよそこのような感じです。

今回はポイント設定全般の必要知識と、カラーミー上の問題点についてを書きました。
次回は「ショップ独自のポイント制度について 2」 で、Smartｙで作ったのサンプルについて。

最近チェックした商品リストを作る

【追記】2012年1月31日に公式に実装されました。以下は古い記事になります。

【マニュアル】「商品グループ機能 階層化」「最近チェックした商品リスト」
カラーミーショップには、「最近チェックした商品（または最近見た商品）」がありません。
アカウント情報のひとつとして、サーバー側で持たせることが一般的ですが、現状そのような機能は搭載されていません。

ということで、クライアント様からご依頼がありましたので作成してみました。
必要な機能がシンプルなため、わりとかんたんに作られています（サンプルとしては好都合）。

ではかんたんに仕様から。
・商品詳細ページ(URLが?pid=)の場合、Cookieに書き込み
・書き込みの内容は、商品名、商品ID、商品画像URL（すべて独自タグあり）
・Cookieの読み書きはjquery.cookie.js（プラグイン）を使用

今回の機能ですが、以前作成した「ほしい物リスト」と、おおまかにいうと同じ考え方です。
Cookieを使用して情報を読み書きし、表示させる。jQuery、JavaScriptの使い方も同じです。
もっとも異なる点はAjaxを使用しない点です。
そのおかげで、実にシンプルかつスマート。

それでは、今回のサンプルを。

0.jQueryと自作関数を読み込み

<script type="text/javascript" src="http://～/jquery.js"></script>
<script type="text/javascript" src="http://～/jquery.cookie.js"></script>
<script type="text/javascript" src="http://～/recent.js"></script>

1.商品詳細ページの任意の場所に設置
商品名には、先頭に画像タグがつく場合があるので、strip_tagsで除去。
商品名に含む「”」などはトラブルのもと。エスケープしておく。

<{assign var="proname" value=$product.name|strip_tags|escape}>

<script type="text/javascript">
<!--
  set_recent_cookie("<{$product.id}>","<{$proname}>","<{$product.img_url}>",1);
// -->
</script>

2.表示したい任意の場所に設置

<div id="recent_item"></div>

<script type="text/javascript">
<!--
  load_recentlist();
// -->
</script>

3.JavaScript-recent.js

//Cookieセット
function set_recent_cookie(pid,name,img_url,i) {
  // 1書き込み　0消去
  if(i==1) {
    strCookie=$.cookie('recent');
    if(strCookie==null) {
      strCookie="";
    }
    else{
      loop=strCookie.match(/`/g)
      if(loop!=null && loop.length/4 >= 6){//6個保存
        //古い方から消す
        loc=strCookie.indexOf("`", strCookie.indexOf("`", strCookie.indexOf("`", strCookie.indexOf("`")+1)+1)+1);
        strCookie=strCookie.slice(loc+1);
        $.cookie('recent', strCookie ,{expires:365});
      }
    }
    strURL="`"+pid+"`"+name+"`"+img_url+"`";
    if(strCookie==null || strCookie=="") {
      strCookie=strURL;
      $.cookie('recent', strCookie,{expires:365});
    }
    else {
      strCookie=strCookie+strURL;
      $.cookie('recent', strCookie,{expires:365});
    }
  }
  else {
    $.cookie('recent','',{expires:-1});
    document.getElementById("recent_item").style.display='none';
  }
}

//最近チェックした商品リスト表示
function load_recentlist() {
  loc = new Array();

  //Cookie読み込み
  strCookie=$.cookie('recent');
  if(strCookie==null) {
    strCookie="";
  }
  loop=strCookie.match(/`/g);

  if(loop!=null){
    if(loop.length/4>6){
      n=6;
    }else{
      n=loop.length/4;
    }
  }
  else {
    n=0;
  }

  if(n !=0 ){
    loc[0]=strCookie.indexOf("`");
    loc[1]=strCookie.indexOf("`",loc[0]+1);
    loc[2]=strCookie.indexOf("`",loc[1]+1);
    loc[3]=strCookie.indexOf("`",loc[2]+1);
    str1=strCookie.substring(loc[0]+1,loc[1]);//商品ID
    str2=strCookie.substring(loc[1]+1,loc[2]);//商品名
    str3=strCookie.substring(loc[2]+1,loc[3]);//商品画像URL
    //この下の行は表示部分なので各自
    strOut="<div style='height:43px;overflow:hidden;margin-bottom:8px;width:100%;'><div style='height:43px;width:47px;float:left;'><a href='./?pid="+str1+"'><img style='width:43px;' src='"+str3+"'></a></div><div style='height:43px;'><a href='./?pid="+str1+"'>"+str2+"</a></div></div><div style='clear:both;height:1px;'><img src='http://img.shop-pro.jp/tmpl_img/11/sp.gif'></div>";
  }
  for(i=1;i<n;i++){
    loc[i*4]=strCookie.indexOf("`",loc[i*4-1]+1);
    loc[i*4+1]=strCookie.indexOf("`",loc[i*4]+1);
    loc[i*4+2]=strCookie.indexOf("`",loc[i*4+1]+1);
    loc[i*4+3]=strCookie.indexOf("`",loc[i*4+2]+1);
    str1=strCookie.substring(loc[i*4]+1,loc[i*4+1]);//商品ID
    str2=strCookie.substring(loc[i*4+1]+1,loc[i*4+2]);//商品名
    str3=strCookie.substring(loc[i*4+2]+1,loc[i*4+3]);//商品画像URL
    //この下の行は表示部分なので各自
    strOut="<div style='height:43px;overflow:hidden;margin-bottom:8px;width:100%;'><div style='height:43px;width:47px;float:left;'><a href='./?pid="+str1+"'><img style='width:43px;' src='"+str3+"'></a></div><div style='height:43px;'><a href='./?pid="+str1+"'>"+str2+"</a></div></div><div style='clear:both;height:1px;'><img src='http://img.shop-pro.jp/tmpl_img/11/sp.gif'></div>"+strOut;
  }
  if(n !=0 ){
    document.getElementById("recent_item").innerHTML=strOut;
  }
}

補足
・Cookieに書き込む情報は、`で囲む形式にしています。`は区切り文字として使用（ex. `商品ID`商品名`商品画像URL``商品ID２`商品名２`商品画像URL２`……）。使わない文字ならなんでもOKです。
・表示数（サンプルでは6）、表示用のHTMLタグは各自でいじってください。
・区切り方は（個人的には）もうすこし分かりやすく作れるなぁと思います。問題なく動きますので、細かいことは目をつぶることにします。
・このサンプルをすこしいじれば、かんたんな「ほしい物リスト」が作れます。
・販売済みや在庫0の場合、表示をどうするか。Cookieに追加しない、画像を販売済みに差し替えるなど。ショップごとに検討して、改良してください。


【関連記事】
・ほしい物リストを作る 1

商品詳細の説明欄と、JavaScript

カラーミーショップの商品説明欄にJavaScriptを埋め込む方法について。

商品登録時の説明欄は、説明文以外にもHTMLやJavaScriptを埋め込むこともできます。
ただし、カラーミーの環境設定で「自動改行する」にしている場合は、改行時に自動的に<br />タグが埋め込まれます。
説明文を書く場合には便利ですが、HTMLやJavaScriptを埋め込む場合は注意が必要です。

通常、JavaScriptを使用する場合は、<script>タグ内に記述しますが、改行時に<br />タグが自動で挿入されて、下のような感じになります。

<script type="text/javascript"><br />
<!--<br />
sample_func();<br />
// --><br />
</script><br />

Firefox3.6では問題ありませんでしたが、IE7（ほかのバージョンも該当するかも）では、構文エラーになり、関数がうまく動作しないことがあります。
おまけに改行も入るために意図しない空白も生じます。

ということで。
オレンジ部分のように、文の最後をコメントにすると良いです。<br />を自動的に挿入されても、コメントにして無効化することができます。

<script type="text/javascript"><!--
sample_func();//
// --></script>

【関連記事】
・カラーミーのフリーエリア考察

カラーミーは本当に875円なの？ 2

「カラーミーは本当に875円なの？ 1」から引き続き。
前回はカラーミーショップの費用面でのメリットを中心にまとめました。
今回はカラーミーショップの費用面に非常に関係が深い集客サービスについてです。

「カラーミーでショップ運営をはじめよう 2（2011年3月版）」でも書きましたが、カラーミーショップには「カラメル」というショッピングモールがあります。
ショッピングモールと呼んでいますが、ショッピングモール機能以外の部分（付随するサービス）も多いです。
網羅的かつ詳細な説明はカラーミー公式でご確認いただくとして、ここでは集客部分と費用面にポイントを絞って列挙していきます。

1.カラメル出店は出店自体は無料だが、販売手数料3.5%がかかる（発生要件は過去記事を参照）
2.カラメル出店「GMOとくとくポイント」共通ヘッダーが表示される（必須）
3.「GMOとくとくポイント」にログインして購入された場合は、販売手数料1.5%（正確にはカラーミー公式で）
4.カラメル出店者は、カラメル以外の商品掲載サービスを利用可能で、 販売手数料は別途
5.とくとくペイメントが利用でき、クレジットカード決済の手数料が安くなる

1は直接的な成果でなくても発生しますし、2・3にいたってはGMO（ペパボの親会社）の都合のような印象を受けました。カラメル出店しているショップ運営者様からは評判良くない印象。
4は任意。色々とプロモーションしてくれる有料サービスがあります。
5はメリットです。

重要なのはカラメル出店は任意で、自分で判断すれば良いという点。
「カラメルの集客力は？」というと、、、これまた議論のあるところです。
口コミを参考にするなら「カラーミーショップ - 助け合い掲示板」で検索して、各ショップ運営者様の意見を探していただければと思います。
出店しないことのデメリットもそれほどないと、個人的には考えています。


さて、二回にわたってカラーミーショップは本当に月額875円なのか検討してきました。
有料サービスやカラメル出店はそれほど必要とは思いませんし、実際に月額875円で運営されている方もいらっしゃいます。運営スタート時点は費用的にもお手軽にということが十分可能です。

次回は「ショップ独自のポイント制度について」です。
ひさしぶりにカラーミーの機能説明と実践的・具体的な話になる予定です。おたのしみに。


【関連記事】
・カラメルと販売手数料について 1
・カラメルと販売手数料について 2
・カラメルとGMOとくとくポイント共通ヘッダー