楽天お買物カゴを外部化！複数のカゴボタンを設置する方法。

今回は楽天お買物カゴの外部化について書こうと思います。
これでひとつのページに複数のカゴボタンを設置することができます！
この方法は数年前から利用されていたもので、目新しいものではありませんが、
自身のおさらいと再確認の意味も込めてまとめてみます！

この方法は関連商品のついで買いを促す機能としても最適なんですが、
大量に商品を並べたセールページ内で設置するなんていうのも、
ユーザーの手間となる画面遷移を減らせるため有効だと思います！
とくに低単価商品を取り扱う店舗様！

こんにちはこんにちは、知ってる人はこんにちは、知らない人は初めまして。ぜぇれさんです。
ECサイトでのデザインを担当してます。よろしくお願いします。ぜぇれさんです。

通常業務にかまけて2か月ぶりぐらいの記事になってしまいました…。
どうぞよろしくお願いいたします、ぜぇれさんです。

さてさて、2か月ぶりの話題は勿論決まっています。

そう、ダークソウルⅢです。
いやぁ面白いです。

ぜぇれさんぶっちゃけそれほど上手くはないですが、
侵入が楽しすぎてやめられません！

攻略中に突然侵入してきた僕に、ネットの向こうのユーザーが
手汗出まくってると考えると、よだれが止まりません。

倒した暁には舌を引き抜いてコレクションしています。
いま40枚くらいたまってます。

DARK SOULS III 【数量限定特典】「特製マップ＆オリジナルサウンドトラック」付

さて！

今回は以下の2つのステップで進めてまいります。短い！

• 1. まずは抜き出したい商品のカートを抽出しよう。
• 2. デザインを当ててみよう（サンプルあります）

※一言
楽天GOLD(無料)と契約している必要があります。

すべてに共通してリセットCSSを使用しています。
こちらのCSSを使用してください。

@charset "utf-8";
/* CSS Document */

/*
YUI 3.14.1 (build 63049cb)
Copyright 2013 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote {margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

それではやってみましょう。

1. まずは抜き出したい商品のカートを抽出しよう。

まずは当店の商品ページからお買物カゴのソースを抜き出します。
以下のページのソースコードを見てみましょう

サンプルページ
798行目から開始しているフォームがあるかと思います。（2016年4月時点）
こちらがお買物カゴのHTMLソースですね

<form method="post" data-timesale-id="10000204" action="https://basket.step.rakuten.co.jp/rms/mall/bs/cartadd/set">
<tr>
<td><font size="3" color="#FF0000">3～4営業日以内に発送予定</font></td>
</tr>
<tr>
<td><span class="unit">個数&nbsp;
</span><input value="1" type="text" size="4" name="units" id="units" class="rItemUnits"><input value="買い物かごに入れる" type="submit" id="" data-timesale-id="" class="rCartBtn">
<div id="offerNotificationCart"></div>
<input value="ES01_003_001" type="hidden" name="__event"><input value="311213" type="hidden" name="shop_bid"><input value="10000204" type="hidden" name="item_id"><input value="1" type="hidden" name="inventory_flag"></td>
</tr>
</form>

お買物機能には必要のない不要なタグを掃除してきれいにします。

<form method="post" data-timesale-id="10000204" action="https://basket.step.rakuten.co.jp/rms/mall/bs/cartadd/set">
個数<input value="1" type="text" size="4" name="units" id="units" class="rItemUnits">
<input value="買い物かごに入れる" type="submit" id="" data-timesale-id="" class="rCartBtn">
<input value="ES01_003_001" type="hidden" name="__event">
<input value="311213" type="hidden" name="shop_bid">
<input value="10000204" type="hidden" name="item_id">
<input value="1" type="hidden" name="inventory_flag">
</form>

こちらをGOLDにアップロードして確認してみましょう。
お買物カゴの外部化に成功しました。
サンプルページ
あとはこちらにデザインの肉付けを行ってゆく、という流れになります！

2. デザインを当ててみよう（サンプルあります）

ではでは早速、簡単ではありますがデザインを施してゆきましょう。
CSSとテキスト、楽天にアップロードしている商品画像のみで実装できる形を
ご用意しましたので、この記事をご覧の皆様の店舗でもすぐに実現可能ですよ。

ではまずは先ほど抽出したソースコードに少し加筆します。

<div class="wrapper">
<p class="item_name">モンディーン A990.CLOCK.11SBC</p>
<div class="img"><a href="http://item.rakuten.co.jp/float/1037/" target="_top"><img src="http://thumbnail.image.rakuten.co.jp/@0_mall/float/cabinet/img1001-2000-1/1037-1.jpg?_ex=220x220"></a></div>
<p class="price">25,600円</p>

<form method="post" data-timesale-id="10000204" action="https://basket.step.rakuten.co.jp/rms/mall/bs/cartadd/set">

<div class="cart_btns">
<input value="1" type="text" size="4" name="units">　個　<!--注文個数-->
<input value="購入する" type="submit" data-timesale-id=""><!--カゴボタン-->
</div>

<!--隠されている数値-->
<input value="ES01_003_001" type="hidden" name="__event">
<input value="311213" type="hidden" name="shop_bid"><!--店舗ID-->
<input value="10000204" type="hidden" name="item_id"><!--商品個別ID-->
<input value="1" type="hidden" name="inventory_flag">

</form>
</div>

商品名エリア
商品画像エリア（楽天にアップロードしたものをそのまま使用）
価格エリア
を追加しています

続いて追加した要素や元あったフォームに以下のCSSでデザインを加えます。

.wrapper {
 width:260px;
 padding:20px;
 border:1px solid #ccc;
 box-sizing:border-box;
 text-align:center;
}

.item_name {
 line-height:14px;
 font-size:10px;
 font-weight:bold;
}

img {
 -webkit-transition: all .5s;
 transition: all .5s;
}

img:hover {
 opacity:0.6;
}

.price {
 line-height:18px;
 font-size:14px;
 font-weight:bold;
 color:#C00;
}

.cart_btns {
 font-size:12px;
 height:34px;
 line-height:34px;
 margin-top:10px;
}

input[name="units"] {
 border:4px solid #ccc;
 border-radius:4px;
 height:26px;
 width:26px;
 font-size:12px;
 text-align:center;
 -webkit-transition: all .5s;
 transition: all .5s;
}

input[type="submit"] {
 width:140px;
 border:4px solid #F36;
 border-radius:4px;
 height:34px;
 font-size:12px;
 text-indent:5px;
 background-color:#F66;
 color:#fff;
 -webkit-transition: all .5s;
 transition: all .5s;
}

input[name="units"]:hover, input[type="submit"]:hover {
 border-radius:0;
}

するとこのような形で、お買物カゴの外部化に成功しました。
サンプル

あとはこれを様々な商品で量産し、セールページに設置するもよし
最初にお見せしたページのように、ついで買いを促すもよし。

活用方法は店舗様によって様々かと思われます！

最後に

いかがでしたでしょうか。
今回はお買物カゴの外部化についてお伝えしました。
単純についで買いを促す以外にも、商品を同時購入でお値引きなど、
様々な販促で役立つ機能かと思います。ぜひ利用してみてください。
少しでもユーザーの手間となるページ遷移を減らしてゆきたいですね！

拙い文章ではありますが、皆さんのサイトのクオリティアップの手助けになれば幸いです。
ララバイ！！

楽天の限界を超える！様々な指定が可能なユーザビリティの高い検索フォームの実装方法。

こちらの記事もどうぞ

ABOUT ME

ぜぇれさん外部デザイナーTwitter:@zeelesan

兵庫在住WEBデザイナー。楽天／ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事、その後はECに特化した受託制作を手がけている。グランブルーファンタジーが大好き。 →記事一覧

Recent Posts

• 2016.04.18ECたったの1行！ヤフーでもお買物カゴを外部化！複数のカゴボタンを設置する方法。
• 2016.04.13EC楽天お買物カゴを外部化！複数のカゴボタンを設置する方法。
• 2016.02.04EC独自カートで差別化！Yahoo!ストアのカート周りをCSSでデザインする方法。
• 2016.01.14ECデフォルト表示をデザイン！Yahoo!ストアのヘッダーをCSSでスッキリさせる方法。

Tweet

海外販売の良事例！楽天グローバルマーケット参考ページ14選。

レディース最強説！楽天の参考デザインまとめ、女性ファッションの素敵サイト16選。

新着記事を配信しています

FacebookやGoogle+で新着記事を配信しています。よろしければ「いいね！」や「フォロー」をお願いします。

Follow @BILLIONPLAN_JP

ビリオンプラン・ジャパン