ほしい物リストを作る 3

前回からの引き続きで、「ほしい物リストを作る」。

XMLHttpRequestを説明するまえに、今後よく見かけるであろうAjaxという用語について。
「All About-Ajaxの基本」にわかりやすい説明がありましたので、まずはご一読を。
XMLHttpRequestによる送受信の流れもわかりやすく書いてあります。

Ajaxとは、Asynchronous JavaScript + XML(非同期なJavaScriptとXML)の略。
XMLHttpRequestはAjaxの中心となる技術で、ページ遷移なしで、非同期にサーバーとデータのやりとりをすることができます。ひどく目新しい技術、ということではなく、従来のJavaScriptの延長線上にあるものと考えて差し支えありません。ただ、はじめてこれを目にすると、かなり衝撃をうけます。
（ｊQueryのライブラリを使用する方法もありますが、このサイトでは使用していません）

Ajaxの特徴
情報を取ってくるのにページ遷移不要ですので、現在表示中のページに影響をおよぼしません。
非同期なので、ブラウザがロックしません（読み込み完了しなくても、別の操作ができます）。
上記のような理由もあり気づきにくいですが、gmailやGoogleマップなどでも使用されています。

ほしい物リストを作るための、もうすこし具体的な話
1.フリーページ
・ほしい物リスト表示ページの枠を作成→HTML、CSS
・Cookieを読んで、商品IDを取得→ｊQuery、JavaScript
・Ajaxで商品詳細ページのデータ取得→XMLHttpRequest
・取得後、必要情報を切り出し→JavaScript（indexOf、substring）
・ほしい物リスト表示ページをの枠に入れていく→JavaScript（document.getElementById(id).innerHTML）
2.商品詳細ページ
・ほしい物リストに追加するボタンを設置。クリック時にCookieに商品IDを書き込み→ｊQuery

XMLHttpRequestは、おいおい解説記事を書く予定ではありますが、まずは各自自習でよろしくお願いします。
簡単なサンプルを使用して（コピペするだけでも良いので）、動くところを実際にみて確認しておくと、このあとの作業でイメージがしやすいと思います。

次回「ほしい物リストを作る 4」 では、サンプルを作ってみます。

ほしい物リストを作る 2

前回のつづき。
どうやって必要な情報を取得するかより先に、ほしい物リストに必要な情報はなにか、という点について考えなければいけません。
商品名、販売価格、画像URL、説明文、＋α。こんなところでしょうか。

前回も書きましたが、ほしい物リストを実現するためには二通りの方法が考えられます。
・Cookieに必要な情報すべてを書き込む方法
・商品IDだけ書き込んで随時商品ページから必要な情報を読み出す方法

作成するにあたり、Cookieの知識は重要ですので、まず先にその点について。

[引用] OPEN SPACE-Cookieファイルについて

■Cookieファイルの制限
cookieファイルは１行単位で処理され、ファイルの最大サイズは4KB (4096文字）、エントリーの合計は300、サーバーまたはドメインで最大20となっています。この制限を越えた場合使用されていないものから削除されていきます。

まず文字数制限があること。
ほしい物リストの必要情報すべてをCookieに書き込むとしたら、一商品あたりどれくらいの文字数が必要でしょうか。登録する商品点数は？　ファイルサイズは足りますか？　Cookieが二個以上必要になりますか？
いくつか制限はあるものの、なんとか切り抜けられそうなことが想像できます。

それでもここでは、もう一方の商品IDだけを書き込む方法を採用しています。かんたんな仕様は前回書いたとおりですが、あらためて以下に示します。
・「ほしい物リストに追加する」ボタンをクリックすると、Cookieに商品IDを書き込む
・ほしい物リスト一覧ページをフリーページで作成し、ページデザインをする
・商品ID以外にも表示に必要な情報を取得
・「ほしい物リストから削除する」ボタンをつくる

なぜ手間のかかる方を採用したか。
私がほしい物リスト機能を設置したショップの取り扱い商品は、基本的に一点もの（売れると表示されない）、という事情がありました。ほしい物リストに追加したはいいが、見たさいに在庫がないという状況は容易に想像できます。
ということで、「ほしい物リストページを表示したさいに、在庫のないものは消す」と設計をしました（お客様に手動で消してもらうのは手間で、申し訳なかったから）。
在庫の有無をCookieに書き込むことは無理ですし（情報が反映されない）、soldout_flgのような在庫の独自タグを参照できればよいのですが、フリーページからではそれもままなりません。
ほしい物リストの表示のたびに商品詳細ページに在庫の有無を確認しに行く必要があった訳です。
ということで、結局このような手間のかかる方法を採用することになりました。

そのほかにも細かい点で気になることがあります。
必要な情報内容が変更されたら？　たとえば、価格改定が行われたら？
一度Cookieに書き込んでしまうと、修正するタイミングがありません。
ほしい物リストページに必要な情報を追加したくなったら？
Cookieに必要情報をすべて書き込む方法は柔軟性の面で、少し弱点がありました。

次回「ほしい物リストを作る 3」は、どうやって必要情報を取ってくるのか（XMLHttpRequestという機能を使用します）についてと、そのほか機能実現のための手段について。


【参照リンク】
・OPEN SPACE-Ajaxを勉強しよう

ほしい物リストを作る 1

【追記】2013年10月以降は、カラーミーＡＰＩでデータを引っ張ってくるのが素直。

カラーミーショップ!プロのカートシステムは機能面で少々物足りなく感じることがあります。
大手通販サイトでは、「ほしい物リスト（お気に入り、ウィッシュリストと呼ばれたりもします）」がついていることがよくあります。サーバー側で機能を持たせることが普通ですが、これは私たちからはいじることができません。私たち側からやれることで、実現できないのでしょうか。

方法としては。
・Cookieに必要な情報すべてを書き込む方法→「最近チェックした商品リストを作る」を参照
・商品IDだけ書き込んで随時商品ページから必要な情報を読み出す→ここではこちらを採用

仕様は以下のとおり。
・「ほしい物リストに追加する」ボタンをクリックすると、Cookieに商品IDを書き込む
・ほしい物リスト一覧ページをフリーページで作成し、ページデザインをする
・商品ID以外にも表示に必要な情報を取得してくる
・「ほしい物リストから削除する」ボタンをつくる

問題は、必要な情報をどうやって取得するかです。

「ほしい物リストを作る 2」につづく。


【関連記事】
・最近チェックした商品リストを作る

【追記】
各ページの内容を見直しました。

カートに入れるボタンを商品詳細ページ以外に設置する

以前、「Color Me Shop! pro - 助け合い掲示板」 に興味深い記事がありましたので、ちょこっと修正してサンプルのご紹介を。橙色部分は各自修正。
内容は表題どおり、「カートに入れるボタンを商品詳細ページ以外に設置する」。

<form name="product_form" method="post" action="http://secure.shop-pro.jp/?mode=cart_inn">
  購入数：<input type="text" name="product_num" value="1" />
  <input type="submit" value="カートに入れる" />
  <input type="hidden" name="product_id" value="12345678" />
  <input type="hidden" name="user_hash" value="<{$smarty.request.PHPSESSID}>" />
  <input type="hidden" name="members_hash" value="<{$smarty.request.PHPSESSID}>" />
  <input type="hidden" name="shop_id" value="PA01234567" />
  <input type="hidden" name="members_id" value="<{$smarty.session.PA01234567.MembersInfo.customer_id}>" />
  <input type="hidden" name="back_url" value="/" />
</form>

・product_numは、購入数。valueは初期購入数。商品詳細ページ内では独自タグ<{$product.init_num}>が使用可能ですが、他のページでは使用できませんので、直接数字を入れます。
・product_idは、商品詳細ページURLに表示されているとおり、「pid=」以下の数字。
・user_hash、members_hashは、そのままでOK。サーバーがユーザーを認識するための一連のやりとり、というくらいのイメージで。
・shop_idは、カラーミーショップ!プロのメニュー「オーナー情報」内にある「アカウントＩＤ」。

実際に試してみると、たしかに機能してそうです。
商品一覧ページに「カートに入れる」ボタンがあると便利よさそうと、思っていたので、これはつかえるかもしれません。それにしても、こんなことができるとは……勉強になりました。


【追記】 input type="hidden"としてサーバに送っているパラメータは、formタグ内の <{$product.info}> を展開したもの。 それゆえに、この独自タグがないと、カートが動かないのです。
【追記】オプションがある場合について、匿名さんが下にコメントを残してくれています。商品詳細ページに飛ばすという方法がシンプルでよいと思います。
カラーミー以外では、モーダルウィンドウで入力させる画面を表示している、カートもあります。

【関連記事】
・カラーミーにできること、できないこと

Twitterでつぶやく

ありとあらゆる方面で流行中のTwitterですが、カラーミーショップ!プロを使っているクライアント様から、つぶやきボタンをつけてほしいと依頼がありました。
Twitter機能自体をそれほど詳しくない（そもそもほとんど使ったことがなかった）ので、どんな使われ方がされて、どんなことができるか要調査が必要かもしれません。もうしばらくはオンラインショップでも重要なツールとして使われるかもしれませんので。
ではさっそく、サンプルから。

<a href="http://twitter.com/home?status=http://www.hogehoge.com/?pid=<{$product.id}>" target="_blank"><img src="http://twitter-badges.s3.amazonaws.com/t_mini-b.png" alt="Twitterでつぶやく"></a>

Twitterボタンは、サンプルとして公式から参照しています。

現在閲覧中の商品ページのURLを貼ればOKという依頼でしたので、これで終了。さほど大層なものではありません。product.idの部分は、JavaScriptのlocation.hrefを使用しても良いかもしれません。
ただ、 これにプラスして、商品名もつけてほしいといわれると状況は変わるようです。

「Color Me Shop! pro - 助け合い掲示板」をみると、全角文字が文字化けするそうです。
 Escape Codec Library:ecl.jp のライブラリで、EUC-JP→UTF-8変換が必要とのこと。

変換なしで試してみると、「Invalid Unicode value in one or more parameters」とエラーメッセージ。Webページのソースをのぞいてみると、たしかに、TwitterがUTF-8で、カラーミーショップ!プロがEUC-JPでした。
設置方法の詳細は上記リンクにありますので、そちらをご参照下さい。


【参照リンク】
・「かぐや東京」さまのWebサイト（Twitterボタンが搭載されている家具屋さん）

【追記】
古い記事になりましたので、「ツイートする 2」 で情報更新しました。