カラメル内商品検索の新システム導入？

12/19に導入されたそうですが、内容の詳細不明。
検索ワードを" "で括るのは相変わらず無理らしい。OR検索も付いていないようですし…なんの変更だろう。
試しに検索したところ、若干の変化はありました。たとえば商品名で「You'll」が「Youll」でヒットするようになっている。前からではなかったような。
告知しないということは、たいそうな話ではないのかもしれませんね。判明したら追記します。
2011/11/22 - 【リリース済】カラメル内商品検索の新システム導入につきまして 
【追記】どうやらAND検索だったようです。

ついでに、もうひとつ。
2011/12/22 - 【お願い実装】レビューの投稿データが商品詳細ページに表示できるようになりました！
「カラーミーショップのギガプラン」でのみ使えるそうです。

jQueryの基礎を学ぼう

今回はｊQueryについて。
私も使いこなしているわけでもありませんので、概要しか説明できません。
とはいえ、ｊQueryで「何ができて、何ができないのか」、概要でも頭に入れておくことは、ショップページをカスタマイズするアイデアが浮かんだときに、実現可能か（もしくは不可能か）判断することが可能になります。

当サイトでは取っ掛かり程度の内容ですが、 カラーミーショップをカスタマイズするさいの有用な知識になることは間違いありません。
初学者向けの内容になっておりますので、ｊQueryってなんぞ、という方はどうぞ。

jQuery(ジェイクエリー)は、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。

機能・特徴
1.ブラウザに依存しないオープンソースのセレクタエンジン Sizzle を使ったDOMエレメントの選択
2.DOM操作と変更
3.イベント
4.CSS操作
5.エフェクトとアニメーション
6.Ajax
7.ユーティリティ - ブラウザのバージョン取得、each関数など
8.拡張性 - jQuery プラグイン

引用元：jQuery (Nov. 15, 2011, 21:36 UTC). In Wikipedia: The Free Encyclopedia. Retrieved from Here

すこし具体的に。
カラーミーショップでショップページを作るに場合に使えそうなのは
・文字サイズを変更する、文字サイズ 小・中・大ボタン
・マウスカーソルをのせるとロールオーバーする画像、ドロップダウンするメニュー
一定の操作をきっかけに機能を実行させることを、「イベント」と呼びます。マウスの他には、キーボード操作、ブラウザのスクロール、タイマーなどのイベントがあります。こういうイベント関連も、jQueryを利用すれば簡単にできます。

「CSS操作」というのは、簡単に文字サイズや色など、CSSで設定できる項目を変更できます。イベントと組み合わせて使ったりします。

当サイトでも使った「Ajax」が簡単に利用できます。Ajaxは別次元のパワフルさがあります。カラーミーショップのカスタマイズで使うかは微妙なところですが、機会があれば、記事にしようと思っています。

「拡張性」はプラグインという形で実現されます。
・商品画像のスライドショーや見栄えのよいエフェクト
・色々な情報をCookieに保存（便利なので、よく使います）
導入方法ですが、たとえばCookieプラグインなら「jquery.cookie.js」という形で配布されており、jQuery.js同様に、ロリポップ！やヘテムルなどのレンタルサーバー上に置いて、共通ページの先頭で読み込ませます。

ざっくりとした、まとめ。
・JavaScriptで記述するよりも、より簡単・便利にしたライブラリがjQueryです。手間の有無を別にすれば、やれることはJavaScriptとおなじです。
・ブラウザで表示する、ということに関して、大体のことが実現できます。そしてありがたいことに、プラグインとして配布されていることが多いです。jQueryで到底実現できないこと（表示するデータをどこから持ってくるのか等）、すなわちもっと根っこの部分はSmartyで行いますが、カラーミーショップというレンタルカートの性質上、すべてが思い通りにいじれるわけではありません。

次回は、ImageMagickを使った画像加工を取り上げようと考えています。
商品画像のサムネイル作成、リサイズ、トリミングなど、ショップ運営には画像加工が必要不可欠。手間のかかる作業も、ImageMagickを使うと「あーら便利、あれやこれや自動でやってくれるよ」というお話。


【参考】

中身が理解しやすくなる（これが初歩として一番）
・ノンプログラマーのためのjQuery入門

何ができるか（これを見れば、ｊQueryで実現可能か分かります）
・jQuery日本語リファレンス

自分で作るために（随時追加します）
・Web制作の現場で使えるjQuery　UIデザイン入門

これも読みやすい
・CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました

「SOLDOUT表示」と、掲示板での最近の話題

「お願い!カラーミー」で要望のあった、「SOLDOUT表示」が付きました。
カラーミーショップは、売り切れ時には「カートに入れる」ボタンが非表示になるだけで、SOLDOUTの表示がされていませんでした。どういう状態なのか分からず、お客様も戸惑ってたことでしょう。
ということで、ようやく。
実装方法は下記記事を参照してください（シンプルなコードなので、色々とカスタマイズ可能です）。
【お願い実装】「SOLDOUT表示」を実装しました！ 

最近の助け合い掲示板での話題では、 これらが勉強になりました。どれも興味深い記事でした。
私はSmartyがよく分かっていないので、サンプルをみながら何ができるのか学習しています。
・オプション選択プルダウン内でのSOLD OUT表示について
・NEW等のアイコンを自作の物に変更する方法はないのでしょうか?
・金額別の表示について（1000円～3000円・3001円～5000円とか）

次回は、jQueryのお話。勉強もかねて、初心者の私がまとめてみようかと思います。
カラーミーショップのカスタマイズにも使うことができますので、ご存じない方はぜひ。

カートJS機能について

【仕事サイトにカートJS関連記事を書きました】
 カラーミーショップのどこでもカラーミーについて実践的に学ぶ


 カラーミーショップで７月末にリリースされた新機能「カートJS機能」について。
ごく簡単に紹介すると、「カートに入れる」ボタンを好きなところに貼れるjavascriptソースを作成してくれる機能です。マニュアルはこちら。
ブログに商品紹介とカートに入れるボタン貼ることを想定していると思われます。

写真1.カートJS機能の画面　
もっともシンプルな表示の場合

カートJS機能で作成したJSコードを貼り付けるだけ。

<script type='text/javascript' src='http://www.hogehoge.com/?mode=cartjs&pid=1234567&style=basic&name=n&img=n&expl=n&stock=n&price=n&inq=n'></script>

URLの中身を見ると下記のようになっています（注：オリジナルのソースには改行は入っていません）。JavaScriptでHTMLを書いているという仕組みです。

以前「カートに入れるボタンを商品詳細ページ以外に設置する」で紹介した方法（この記事の元ネタは「カラーミーショップ - 助け合い掲示板」） とやっていることは変わりませんが、在庫なしの場合は表示しない分だけ、今回のカートJS機能の方が高級です（その他、売り切れ時の商品表示や掲載設定の条件などで表示・非表示の作り込みはされている）。

document.write("<!--cartjs basic-->
<div style=\"width:94%;margin:0 auto;padding:0;\">
<div class=\"cartjs_box\" style=\"margin:0;padding:0;\">
<form name=\"product_form\" method=\"post\" action=\"http://secure.shop-pro.jp/?mode=cart_inn\" class=\"cartjs_product_form\" style=\"width:100%;margin:0px;padding:0;\">
<div class=\"cartjs_product_table\">
<table style=\"border-top:1px solid #ccc;border-right:1px solid #ccc;border-collapse: collapse;width:50%;margin:0 auto 15px;\">
<!-- 売切れ時・休止時・ログイン限定購入商品は表示しない  -->
<tr>
<th style=\"border-left:1px solid #ccc;border-bottom:1px solid #ccc;\">購入数</th>
<td style=\"padding: 0px 5px 0 10px;border-left:1px solid #ccc;border-bottom:1px solid #ccc;\">
<input type=\"text\" name=\"product_num\" value=\"1\" class=\"cartjs_product_input_txt\" style=\"width: 50px;\" />
</td>
</tr>
<!--オプション情報-->
</table>
</div>
<!-- 売切れ時・休止時・ログイン限定購入商品は表示しない  -->
<div class=\"cartjs_cart_in\" style=\"margin-bottom:10px;text-align:center;\">
<input type=\"submit\" value=\"カートに入れる\" />
</div>
<!-- 特定商取引法リンク -->
<div class=\"cartjs_sk_link_other\"><a href=\"http://www.hogehoge.com/?mode=sk\">&raquo;& nbsp;特定商取引法に基づく表記 (返品など)</a></div>
<!--// 特定商取引法リンク -->
<div class=\"cartjs_product_info\">
<input type=\"hidden\" name=\"user_hash\" value=\"11223344e1f22aｂｃ1122334455de1a22\">
<input type=\"hidden\" name=\"members_hash\" value=\"11223344e1f22aｂｃ1122334455de1a22\">
<input type=\"hidden\" name=\"shop_id\" value=\"PA01234567\">
<input type=\"hidden\" name=\"product_id\" value=\"1234567\">
<input type=\"hidden\" name=\"members_id\" value=\"\">
<input type=\"hidden\" name=\"back_url\" value=\"http://www.hogehoge.com/?pid=1234567\">
</div>
</form>
<div style=\"display:block;text-align:right;font-size:10px;margin-top:10px;\">
<a href=\"http://shop-pro.jp/\" target=\"_blank\">powered by カラーミーショップ</a>
</div>
</div>
</div>
<!--//cartjs-->");

ブログに貼る分には「特定商取引法に基づく表記」と「powered by カラーミーショップ」の表記が必要かもしれませんが、ショップページに貼る場合には、サイトデザインの点で邪魔に思います。
 Ajaxで「<script type='text/javascript' src="～」のURLを読み込んで、文字列操作して消すことも可能でしょうが、手間のわりにやっていることが地味で現実的ではないように思います。

【追記】
8/31の公式記事によると、評判の良くなかった上述の表示は選択制にしたとのこと。

「お願い!カラーミー」にて受け付けたご要望を元に、カートJS機能を利用した際に表示されていた「powered by カラーミーショップ」の削除および「特定商取引法に基づく表記」のリンクを選択可能にしました。

テンプレート共通部分を表示させない方法

【仕事サイトにSmartyの関連記事を書きました】
カラーミーショップのカスタマイズに便利なSmartyを学ぶ (1/2) 
カラーミーショップのカスタマイズに便利なSmartyを学ぶ (2/2)

カラーミーショップで、こんなことができたんですね。今まで気づきませんでした。
それもこれもSmartyを理解していなかったからで、「助け合い掲示板」にはいつも勉強させてもらっています。

<{if $file_name == "file:★/free☆.tpl"}>

<{include file = $file_name}>

<{else}>

ヘッダフッタ含む共通部分ソース

<{/if}>

ネタ元は助け合い掲示板のこちらの記事。
需要がありそうですので、私も備忘録としてリンクさせていただきました。
実際に試してみましたが、問題なかったです。
<{include file = $file_name}>がキモです（知っていれば、どうってこともないのでしょうが）。
記事のサンプル例は フリーページですが、もちろん、トップページをそうすることも可能。

それとは別に、「お願い！カラーミー」のほうも徐々に進展が見え始めています。
早速、ショップの検索がAND検索になってます（過去記事の修正をしました）。


【参考】
・Smarty includeの解説