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

同一ページ内で購買を完結、様々な場面で応用できるお買い物カゴの外部化。

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

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

Sponsored Link

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

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

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

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

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

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

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

さて!

今回は以下の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;
}

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

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

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

最後に

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

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

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

ショップ運営でお悩みの方へ。

BILLIONPLAN JAPAN Co, Ltd

ネット通販やウェブ制作、ECサポート事業を行っている(株)ビリオンプラン・ジャパンが運営しています。楽天やYahoo!ショッピングなど各モールへの出店サポートや、商品撮影からページ制作までの運用提案、海外ローカライズ作業も行っています。

ショップ運営のお悩み、ご相談ください。

ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。

または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
 10:00 - 19:00(土日祝休み)

06-6271-7761

ABOUT ME

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

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

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

follow us in feedly

8 Comments(Trackback)

しんご

いつも記事を参考にさせていただいてます。

この外部の買い物かごを一緒に並べるを実践しようとして、商品が項目選択肢別の場合、
サイズやカラーを指定しないとかごへ入らないエラーが出ますが、
選択項目の部分も持ってくる方法はありますか?
レディースファッションのお店ですので、このようなテクニックを応用してセット売りなど試みたいと思っています。

ぜぇれさん

しんごさんこんにちは、コメントありがとうございます!

項目選択肢は今回ご紹介しておりませんが、もちろん導入可能ですよ。

例えばこちらのページですと、
http://item.rakuten.co.jp/msb-bann/bn-p0016/

1318行目から1364行目をすべてコピーし、
情報の整理やデザインを施すことで実現可能かと思われます!

しんご

ぜぇれさん、ご回答ありがとうございます!
実践してみます!

うさこ

ぜぇれさんこんにちは!
いつも記事を参考にさせて頂いており
本当に助かってます!
ありがとうございます!
お買物カゴの外部化ですが
HTML上では成功して
http://www.rakuten.ne.jp/gold/sunnyside/cart_misuji.html
クリックしたら自分の買い物カゴに入ったのですが
RMSの商品ページに貼りつけると
「form」タグが使えないとエラーになりました。

「iframe」タグを使うと買い物カゴは表示されたのですが
http://item.rakuten.co.jp/sunnyside/roastbeefmisuji500-20160510/
chromeは反応せず
IEでは「このコンテンツはフレーム内で表示できません」との
エラーメッセージのため買い物カゴに入りませんでした。

どのように使うのか教えて頂けないでしょうか?
何卒、宜しくお願いいたします。

ぜぇれさん

うさこさま
こんにちは、コメントありがとうございます!
記事を活用していただいて嬉しい限りです。

「form」タグの中に
「target=”_blank”」を追記し確認してみて下さい。
宜しくお願い致します!

うさこ

ぜぇれさん、早々のお返事助かりました!
「form」タグの中に
「target=”_blank”」を追記しまして
「iframe」タグで商品ページに記載しましたら
買い物カゴに入りました!!!
教えて頂き感謝いたします。

記事もいつもいつもガン見しておりまして
また楽しみにしております!
宜しくお願いいたします。

ぜぇれさん

うさこさん、ガン見されてしまい恥ずかしい限りです…
素敵な商品画像の綺麗な店舗ですね!

リニューアルやスマホ対応など、
何かございましたらコメントいただけると嬉しいです!

うさこ

ぜぇれさんのお陰様で売上げ好調です!
サイト全面リニューアルの際はぜひお力をお貸しください(._.)
予算がガッツリ出るよう頑張ります(笑

この記事へのコメントは締め切られています。