たったの1行！ヤフーでもお買物カゴを外部化！複数のカゴボタンを設置する方法。

今回は前回の記事、楽天お買物カゴを外部化！複数のカゴボタンを設置する方法。
のヤフー版、ヤフーショッピングでお買物カゴの外部化について書こうと思います。
ヤフーは楽天とは違い、システム面での規制が強いので、
あまりこういったことを効果的に運用している店舗は少ないように思います。

商品ページで関連商品のついで買いを促してみたり、
商品を大量に並べたセールページ内にボタン設置する、
なんていうのもユーザーの画面遷移を減らす有効な手段だと思います！
とくに消耗品など低単価商品を取り扱う店舗では、
複数購入を目的としたユーザーのアクションを軽減できるため、
非常に魅力的な機能だと思います。

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

最近またIEにやられました。
iframeとiframeをインクルードしている要素にhoverが効かない…

まじか…

hoverですよ、hover。

そんなん、hoverとかめっちゃ使うやん。
なんでなん、なんでなんIEさん…

さて！

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

• 1. たったの1行でお買物カゴ表示。
• 2. デザインを当ててみよう（サンプルあります）

※一言
必須ではありませんが、
ヤフートリプル(月額3000円～)と契約しているほうが便利ですよ。

すべてに共通してリセット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. たったの1行でお買物カゴ表示。

今回はズバっ！と
簡単に実装できる方法をご紹介します。
在庫数や項目選択肢などの細かい部分には対応していませんので、
そのあたりは各店舗様でフォームを表示してあげてください。

<a href="https://order.shopping.yahoo.co.jp/cgi-bin/cart-form?list-catalog=店舗URL&catalog=店舗URL&vwitem=商品コード"><img src="お買物カゴボタンの画像URL"></a>

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

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

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

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

<ul class="ad_cart">
<li>
<a href="http://store.shopping.yahoo.co.jp/everydaycarry/3.html">
<p class="item_name">デスクマット＆トレイセット</p>
<img src="http://item.shopping.c.yimg.jp/i/j/everydaycarry_3">
<p class="item_price">6,800円</p>
</a>
<a href="https://order.shopping.yahoo.co.jp/cgi-bin/cart-form?list-catalog=everydaycarry&catalog=everydaycarry&vwitem=3"><img src="btn_ad_cart.png"></a>
</li>
</ul>

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

続いて追加した要素に以下のCSSでデザインを加えます。

ul.ad_cart {
 width:750px;
 margin:30px auto;
 width:360px;
}

ul.ad_cart li {
 border:1px solid #ccc;
 width:360px;
 padding:30px;
 box-sizing:border-box;
 margin-bottom:30px;
}

ul.ad_cart li a {
 text-align:center;
 text-decoration:none;
 color:#333;
}

.item_name {
 line-height:20px;
 font-size:14px;
 border-bottom:2px solid #ccc;
}

.item_price {
 font-size:18px;
 font-weight:bold;
 color:#F66;
 line-height:28px;
}

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

あとはこれを様々な商品で量産し、セールページに設置するもよし
商品ページ内でついで買いを促すもよし、

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

最後に

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

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

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

こちらの記事もどうぞ

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

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

注目のキッズファッション！楽天の参考デザインまとめ、子供服サイト10選。

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

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

Follow @BILLIONPLAN_JP

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