staana-blog

staana-studio 近況報告 ★ staana-shopがオープンしました!
 

WP e-commerceカスタマイズメモ -4 2008/1/31 木曜日

Filed under: デジタルな仕事, 仕事のメモ, WordPress — staana @ 11:42:am

追記:3/14にshopオープンしました! →shopへ行く

引き続き「カスタマイズメモ-1」でリストアップしたカスタマイズ部分のラフな詳細(?)です。

●カスタマイズ内容:

3. 支払い方法として、「クレジットカードのみ」(ただし、クレジットカードはPayPal、Google Checkoutなど(gold cartにアップグレードした場合。標準ではPayPalのみ)日本ではあまりおなじみではない方法のみ)or 「クレジットカード+manual payment option」の2種類しか選べなかったのを「銀行振込 or 郵便振替」、にカスタマイズ。

4. 上記の支払い方法でどちらが選択されたのか、購入履歴リストに表示されるように、カスタマイズ。

●現象:

  • 支払い方法を選択する際、「クレジットカード(PayPal)」のみか、「クレジットカード(PayPal)+ Manual Payment」の2つしかデフォルトの選択肢にない。
  • WP e-commerceの管理画面で注文No.が表示されない。
  • WP e-commerceの管理画面で支払方法の詳細(銀行振込か郵便振替か)までは表示されない。

●対策:

staana-shopではクレジットカードでの支払いは近い将来に実現するとして、まずは銀行振込と郵便振替のどちらかでお支払いいただくことに決めました。デフォルトでは必ず「クレジットカード」が選択肢に入ってきてしまいますのでこれをなんとかしなければと思いカスタマイズを試みました。

支払い方法の選択はWP e-commerceの管理画面の「Checkout Form Fields」ページで行います。このページでは他にお客様情報入力の際の入力エリアの表示順、必須項目の設定も行えます。
ページ下部にある「Payment Options」で上記2つの選択肢が並んでいます。ここで選んだものがcheckout.phpにより処理され、checkoutページでフォームとなって現れます。また「Checkout Form Fields」ページのフォームから送信された内容(name=’payment_method’ value=’1′ or ‘2′)はWordPressのoptionテーブルに格納されます。

具体的なカスタマイズはここからです。checkout.phpの最後のあたり、支払い方法のラジオボタンを表示させているところに手を加えます。

クレジットカードのラジオボタンの<li><input 〜 /></li>部分(name=’payment_method’ value=’1′)をコメントアウトにし、銀行振込用ラジオボタン(name=’payment_method’ value=’2′)と、新たに郵便振替用のラジオボタン(name=’payment_method’ value=’3‘)を加えます。もちろん<label 〜>も「銀行振込」と「郵便振替」という日本語を定義し表示するように設定します。これで見かけの上では支払い方法の選択で選択肢が 「銀行振込」と「郵便振替」の2つになりました。

さらに、 「銀行振込」と「郵便振替」のどちらが選択されたのかをWP e-commerce管理画面の「Purchase Log」ページに表示されるように変更を加えます。

まずWordPressのテーブル「wp**_purchase_logs」に「bankcheck」という名前のフィールドを手動で1つ追加し、ここに支払い方法として’1′(クレジットカード)、’2′(銀行振込)、’3′(郵便振替)のどれが選択されたかを格納します。

実際に格納するのはsubmit_checkout_function.phpの中です。submit_checkout_function.phpは全体がfunction nzshpcrt_submit_checkout() という1つの大きな関数定義になっていて「お客様情報」のフォームが送信された際の処理を行っています。
function nzshpcrt_submit_checkout()内で必須項目のチェックをした後、入力漏れがなければフォームの内容を「wp**_purchase_logs」テーブルへINSERTしています。ここで先ほどの支払い方法を「bankcheck」に格納するようにクエリに追加します。

さて、今度はWP e-commerce管理画面の「Purchase Log」ページに表示させなくてはなりません。「Purchase Log」ページの処理はdisplay-log.phpで行われています。ここではsubmit_checkout_function.php内でINSERTしたwp**_purchase_logsのデータを読み込んで表示させ、さらにUPDATEを処理します。

めでたくお客様からの注文が入るとこのページに注文内容が1行追加されますが、その中に支払い方法として何が選択されたのかを表示させます。

display-log.phpの275行目あたりに
if(get_option(’payment_method’) == 2)
というif文が現れます。ここでクレジットカードのgateway名(PayPalなど)または「Manual Payment」のどちらかが出力されるようになっています。これが 「Manual Payment」だった場合には「銀行振込」または「郵便振替」と表示させるようにswitchを追加しました。

また「Purchase Log」ページにはオーダーNo.は表示されないのでついでにこれも表示させるように追加しました。

最後に。 「Purchase Log」ページに表示項目を追加させる場合は<table>のカラム数を変更するのを忘れずに…表示が崩れてしまいます。
105行目あたりで計算させています。


 
 

WP e-commerceカスタマイズメモ -3 2008/1/24 木曜日

Filed under: デジタルな仕事, 仕事のメモ, WordPress — staana @ 11:03:am

追記:3/14にshopオープンしました! →shopへ行く

引き続き「カスタマイズメモ-1」でリストアップしたカスタマイズ部分のラフな詳細(?)です。

●カスタマイズ内容:

2. WP e-commerce の日本語化ファイルが文字化けで使えなかった、のを(少し)カスタマイズ。

●現象:

  • ~/plugins/wp-shopping-cart/language/JP_jp.php が文字化け状態で使えない。

●対策:

これはカスタマイズ、というか何と言うか… ;-)

WP e-commerceの新しいバージョンでは残念ながら日本語化したファイルが文字化けしてしまって使えません。そこでWP e-commerceの古いバージョン(確か3beta1あたり…)をダウンロードしてみたところこの時点ではまだ文字化けしていませんでしたのでこれをVer3.5.1 にコピーしてみたところ、そのまま使えました。

ver3.1あたりから日本語化は進んでいないようです。しかも、この3.1のものも全てが日本語化されているわけではなく、一部は「誰か訳しといて!」状態に鳴っています。さらに訳されている部分も機械的な訳が多く、on Manualを「任意の場所に手動で(関数を)設置」というような意味で使われているところが「説明書」と訳されていたりします。最初は日本語が使えてラッキー!と日本語で表示させていたのですが、結局別のblogに英語版をインストールして比べてみながら作業→後に→英語の方がまだわかる、となり、ほとんどの作業を英語版で行いました。

ただし本番では日本語にしておかないと英語のお店になってしまいますので「英語と日本語をカスタマイズ」しているところです。


 
 

WP e-commerceカスタマイズメモ -2 2008/1/22 火曜日

Filed under: デジタルな仕事, 仕事のメモ, WordPress — staana @ 4:27:pm

追記:3/14にshopオープンしました! →shopへ行く

今回から「カスタマイズメモ-1」でリストアップしたカスタマイズ部分のラフな詳細(?)です。

●カスタマイズ内容:

  1. プラグインインストール時に商品ページ([products-page])、ショッピングカート([shoppingcart])、お客様情報の入力ペー ジ ([checkout])+あと2ページがに自動的に作成(投稿)されますが、その際、WPのバージョンが2.1以上の場合は通常の投稿ではなく、 「ページ」として作成(投稿)されなければならないのに「ページ」ではなく通常投稿で作成されてしまい、その結果管理ページにログインしてい るユーザーにしか商品ページが表示されない、のをカスタマイズ。

●現象:

  • 商品を登録してあるにもかかわらず、商品ページに商品が表示されない。
  • WordPress管理画面にログインしているときだけ、しかもログインユーザ本人のセッションでしか商品が表示されない。

●対策:

WP e-commerceではプラグインインストール時にプラグインで使用するMySQLデータベースのテーブルを生成し、同時に商品表示とショッピングカート機能に必要な5ページ(製品リスト、ショッピングカート、お勘定、取引詳細、ユーザアカウント用)を生成します。
この際にWordPressのバージョンが2.1 以上であれば「必要な5ページ」を「ページ作成」し、それ以外なら通常の「投稿」となるようになっています。

私の使用した環境は WordPress ME2.2.3 /WP e-commerce (WP shopping cart) 3.5.1  ですから本来なら「ページ」が5ページ分生成されていなければなりません。しかしこれが通常の「投稿ページ」で生成されてしまい、その結果WordPress管理画面にログインしている場合しか商品ページに登録してある商品が表示されない、という現象が起こっていました。

そこでソースを追ってみたところ、wp-shopping-cart.phpの765行目あたりのif分でWordPressのバージョンを条件にした分岐があり、ここの条件に当てはまっていないことがわかりました。

if($wp_version >= 2.1) とありますが、MultiligualEditionを使っている場合バージョンは「ME2.2.3」のように表現されるからです。

ここを修正し、WP e-commerceを再インストール(再有効化ではダメです)して、この問題は解消しました。


 
 

WP e-commerceカスタマイズメモ -1 2008/1/16 水曜日

Filed under: デジタルな仕事, 仕事のメモ, WordPress — staana @ 6:36:pm

追記:3/14にshopオープンしました! →shopへ行く

ここ2ヶ月ほど、WordPressでショッピングカートを使うためのプラグイン「WP e-comerce」と格闘してきましたが、成せば成るものです。phpはほとんど初めてでしたがソースを追いまくってやっと自分が作りたいように「お買い物の流れ」をカスタマイズすることができました。

WP e-commerceはニュージーランドの方が作ったプラグインです。
一部日本語化もされていますが、英語の語句を日本語に置き換えてある、金額の表示には¥マークが表示される、と言った程度でstaana-shopの 「お買い物の流れ」には合わないところがいくつかありました。(とはいえ、無料でこれだけのことができるプラグインが提供されているのはとてもすばらしいことです!)

staana-shop開店時は以下のようなミニマムな機能でスタートし、順次アップグレードを重ねていく予定です。

  • お支払い方法は最初は「銀行振込」と「郵便振替」のみ
  • お買い物の流れ:
    商品ページより商品をショッピングカートに追加

    ショッピングカートの中身を確認&都道府県により異なる送料を決定/確認

    お客様情報の入力/お支払い方法の選択

    名前、メールアドレスなど、入力必須項目のチェック

    入力内容、注文内容の最終確認

    注文確定フォームを送信

    Thankyou画面の表示、お客様へ確認メール、ログ用アドレスへ控メールを送信

    購入履歴管理画面へ表示
  • 今後のバージョンアップ予定:
    支払い方法にクレジットカードを追加(PayPal経由)
    配送方法(現ヤマトのみ)にゆうパックを追加

そこで今後、どこをカスタマイズしたのかすぐ振り返ることができるよう、仕事のメモとして少しずつ残しておこうと思います。

今日はいったいどこをどのようにカスタマイズしたのか、まずその一覧を書いておきます。
(各バージョンは、WordPress ME2.2.3 /WP e-commerce (WP shopping cart) 3.5.1 です)

  1. プラグインインストール時に商品ページ([products-page])、ショッピングカート([shoppingcart])、お客様情報の入力ページ ([checkout])+あと2ページがに自動的に作成(投稿)されますが、その際、WPのバージョンが2.1以上の場合は通常の投稿ではなく、「ページ」として作成(投稿)されなければならないのに「ページ」ではなく通常投稿で作成されてしまい、その結果管理ページにログインしているユーザーにしか商品ページが表示されない、のをカスタマイズ。
  2. WP e-commerce の日本語化ファイルが文字化けで使えなかった、のを(少し)カスタマイズ。
  3. 支払い方法として、「クレジットカードのみ」(ただし、クレジットカードはPayPal、Google Checkoutなど日本ではあまりおなじみではない方法のみ)or 「クレジットカード+manual payment option」の2種類しか選べなかったのを「銀行振込 or 郵便振替」、にカスタマイズ。
  4. 上記の支払い方法でどちらが選択されたのか、購入履歴リストに表示されるように、カスタマイズ。
  5. 同じく購入履歴リストとログ用注文控メールのタイトル部分に注文No.が表示されるように、カスタマイズ。
  6. お客様情報を入力後確認画面が出ずにすぐにthank youページへ移動してしまう仕様になっていたのを、入力フォームの必須項目チェック後に確認画面を出すように、カスタマイズ。
  7. オリジナルではなぜかお客様のメールアドレスとこちらのログ用アドレスに確認メール&控メールがいかなかったのを、カスタマイズ。
  8. 送料の設定が、自国内と海外の2種類しか設定できなかったのを、ヤマト運輸の運賃表に基づいて、都道府県ごとに送料を設定し、ショッピングカート内でリアルタイムに計算するよう、カスタマイズ。
  9. 上記で、送料が不当に安く設定されることのないよう、送料設定で選択した都道府県が次のページ(お客様情報入力画面)で自動で表示されるように、カスタマイズ。
  10. 上記6の確認画面でショッピングカートの内容のうち必要項目だけ表示されるよう、カスタマイズ。

といったところでしょうか。並べてみると、けっこう頑張った感があります。


 
 

マウスパッドを作ってみました 2008/1/10 木曜日

Filed under: 商品開発, デジタル系の仕事の道具, 手づくり — staana @ 12:00:pm

片面は麻布で片面は革でクールにstaana-studio特製マウスパッドを作ってみました。

片面は麻布にstaana-studioのロゴをあしらったプリント仕様、もう片面は全面革でお約束の刻印つき仕様のリバーシブルマウスパッドです。

これまでマウスパッドは「光学マウスでも大丈夫!」という薄いプラスチックのものを使っていましたが、この手のマウスパッドはなぜか汚れてしまいがち… :cry:
消しゴムのカスをこすりつけたようなグレーな物体がいつの間にかこびりついていて、どうにかならないかなと思っていたのです。

そこで近日オープン予定のstaana-shopのテーマである、「布、革、紙をつかった」マウスパッドを作ってみようと思ったわけです。(今回「紙」は使いませんでしたが…)

制作に入った時は「マウスの滑り具合はどうだろうか…」とか「光学マウスがきちんと動くかな…」など、恐る恐るでしたが、できてみたら問題なく動いています!
今のところまだヨゴレはついていません。
麻布の面は、この時期冷えがちな手元に「少し」布の暖かみが伝わります。

ところで、麻布の風合いやら色を写真でうまく出すのは難しいですねー ;-)