楽天で良く見かけるリアルタイム受注状況の小窓(こんなやつ)ですが、ショップサーブにはその機能はありません(泣)。
現在、機能追加の準備中なのか追加対象外なのか、はっきりしないのがもどかしい。
でも、ショップサーブは、その辺のカスタマイズ(HTMLやCGI、PHPまで使えるのだ)が無料でガンガンできるので、「必要なら自分でやってくれ!」ということなんでしょう。
ええ、わかりました。やりますよ!
まず、ショップサーブのカスタマ言うにはFTPアカウントがつきもの。
管理画面からアカウントを作って、FTPを使えるようになる必要があります。
FTPアカウントの作り方やサーバーへのアクセス方法については、マニュアルがあるので、それをよく読んでやってください。
リアルタイム注文状況の小窓を導入する手順を書いておきます。最初は難しく感じるのですが、いったん実装してしまえば、後は、注文状況ファイルの更新だけで済むので、がんばって導入してみてください。
導入手順(FTP設定後)
1. CGIをFTPで適当なディレクトリにアップロード
(パーミッションを705に変更)
2.管理画面から注文情報をCSVファイル形式でダウンロード
3.ダウンロードしたCSVファイルのファイル名を変えてアップロード
4.表示させる場所にiframeのタグを挿入します。
CSVファイルHTML書き出し用CGI
#!/usr/local/bin/perl
use CGI;
my $datapath = ‘realtime.csv’;
my $q = new CGI;
print $q->header(-type =>’text/html’,-charset=>’shiftjis’);
print ‘<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>’;
print ‘<html lang=”ja”><head><meta http-equiv=”content-style-type” content=”text/css”></head><body>’;
print ‘<table border=”0″ style=”border-collapse:collapse;font-size:9pt;”>’;
open my $FH,$datapath;
while(my $line=<$FH>){
(my $date,my $area,my $price) = split /,/,$line;
print ‘<tr style=”border-bottom:1px dashed #ccc;”><td>’.$date.'</td>’;
print ‘<td>’.$area.'</td>’;
print ‘<td>’.$price.'</td></tr>’;
}
close $FH;
print ‘</table>’;
print “</body></html>”;
コードをコピペしてテキストファイルにペーストします
そしてファイル名を「realtime.cgi」に変更します。「拡張子を変えると、ファイルが使えなくなる可能性があります。変更しますか?」というアラートが出ますが、「はい」で閉じます。
2. 管理画面から、例えば「注文日|都道府県|金額」というデータだけを抽出します。「受注データのダウンロード」という箇所で、ダウンロードする形式パターンを作れます。
3. DL(ダウンロード)できたCSVファイルのファイル名を「realtime.csv」に変更します。ここでも「拡張子を・・・」のアラートがでますが、「はい」で閉じます。このファイルを「realtime.cgi」と同じディレクトにアップロードします。
4.iframeで適当なところにCGIを呼び出して表示します。今回のサンプルは再度バー用のサイズにしていますので、センターエリアに設置する場合はCSSを変更してください。
最新100件の注文状況
スクロールなしの基本形です。これをスクロールさせる場合は、jqueryという仕組みを使います。
ショップサーブは、当然javascriptもjqueryもバンバン使えます。スクロールの応用系はまたの機会に。