以前、楽天のカートフォームに無茶をさせるというと記事を書きましたが、
(もう2年も前なのか!?)
今回はYahoo!ショッピングのカートフォームに無茶をさせてみましょう。
 


フォームのソース

まずは、ヤフーショッピングが出力しているコードを見てみましょう。

<form name="form2" method="post" action="https://order.shopping.yahoo.co.jp/cgi-bin/cart-form;_ylc=[セッションコード?]?[ショップID]+[セッションコード?]&ccode=Nat">
<input name="vwitem" type="hidden" value="[商品ID]">
<input name="vwcatalog" type="hidden" value="[ショップID]">
<input name="vwquantity" type="text" value="1" class="ptPrice">
<input type="image" src="http://i.yimg.jp/images/store/shp/bt/bt_003.png" alt="カートに入れる" width="142" height="36" border="0" onClick="YAHOO.JP.sc.addCart(YAHOO.JP.sc.products, YAHOO.JP.sc.prop22);">
</form>

 
こんな感じです。
[セッションコード?]はセッション用の一時コードか何かのようです。
ちょっとこの辺りは追うことができず…
[ショップID]は、Yahoo!ショッピング開店時に申請したショップのIDです。
これはショップURLからも判断出来ます。
[商品ID]は商品を登録した際に、任意で商品につけるコードです。
 


外してもOKなコードがある

上記の用なフォームを作成することで、
ヤフーショッピング用のカートフォームが
作成できることがわかりました。
 
が、そもそも、この通りに作る必要があるのか検証したところ、
どうやらその必要は無さそうです。
セッションコードと思しきコードは省略しても、
ちゃんとカートに商品が追加できることがわかりました。
 

<form name="form2" method="post" action="https://order.shopping.yahoo.co.jp/cgi-bin/cart-form?[ショップID]&ccode=Nat">
<input name="vwitem" type="hidden" value="[商品ID]">
<input name="vwcatalog" type="hidden" value="[ショップID]">
<input name="vwquantity" type="text" value="1" class="ptPrice">
<input type="image" src="http://i.yimg.jp/images/store/shp/bt/bt_003.png" alt="カートに入れる" width="142" height="36" border="0" onClick="YAHOO.JP.sc.addCart(YAHOO.JP.sc.products, YAHOO.JP.sc.prop22);">
</form>

 
フォームタグのaction属性に付けられた難解なURLは、
ここまで単純化してもちゃんとカートに入ってくれます。


オプション的な要素は?

オプション的な要素は任意のオプションを追加することができます。

<form name="form2" method="post" action="https://order.shopping.yahoo.co.jp/cgi-bin/cart-form?[ショップID]&ccode=Nat">
<input type="text" name="色" value="赤" />
<input type="text" name="サイズ" value="M" />
<input name="vwitem" type="hidden" value="[商品ID]">
<input name="vwcatalog" type="hidden" value="[ショップID]">
<input name="vwquantity" type="text" value="1" class="ptPrice">
<input type="image" src="http://i.yimg.jp/images/store/shp/bt/bt_003.png" alt="カートに入れる" width="142" height="36" border="0" onClick="YAHOO.JP.sc.addCart(YAHOO.JP.sc.products, YAHOO.JP.sc.prop22);">
</form>

このようにするとカゴの中に
色:赤
サイズ:M
として商品が追加されます。
 
このオプション値を変更することで、
カートは同じ商品でも、別の明細としてカート内に追加をする仕組みになっているようです。
逆に、カート内に以前に同じ商品IDとオプション値を持つ商品が以前に追加されている場合は、
個数が合算されて追加される仕組みになっています。
 
この法則を使うと、裏技的な使い方として、
オプション値にタイムスタンプなどを埋め込んでおけば、
能動的に明細行をカゴボタンを押すごとに分けることが可能です。
 


楽天より仕組みが簡単

楽天では、楽天側が自動発行するデータベースIDを利用して
カートに商品を入れる仕組みになっているため、
カスタマイズがわかりにくいですが、
Yahoo!ショッピングでは、ショップ側がつけたIDのみを利用するため、
カスタマイズが非常にわかりやすいです。
 
たとえば、
自分のブログに、
前述の仕組みを利用してヤフーショッピングのカートフォームを埋め込んで、
ランディングページを作ったりすることができ、
モール内に閉じがちな、プロモーション手段を少しだけ広げることができます。
 
また、ヤフーショッピングは楽天と違い、
CSVでの商品登録などはオプションではないので、
CSVを通して簡易DBを作ることが可能ですから、
無料のCSV検索CGIなどを利用して、
自社サイトにカートシステムを実現するなんてこともできなくはないです。
 


モールの特性は知っておくべき

フォームなどの特性を知っておけば、
モールの規約の範囲内で、モールの枠を少しだけ超えたプロモーションをすることができます。
私は楽天やらカラーミーショップなど、結構な数を「魔改造」していますが、
フォームを使って実験をしてみた賜物です。
(がゆえに、無茶な仕事がたまに落ちてきたりしますがw)
 
知っていることはとても重要なことです!