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

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

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

こちらのトップページにサンプルとして2商品のカートを設置しております。
サンプルページ

サンプルではトップページにて露出を行っておりますが、
商品ページ内にて関連商品のついで買いを促す機能や、
大量に商品を並べたセールページ内で実装する、なんていうのも
ユーザーにとって不要な画面遷移を減らせるため有効だと思います!
とくに消耗品など低単価商品を取り扱う店舗では、
複数購入を目的としたユーザーのアクションを軽減できるため、
非常に魅力的な機能だと思います。

Sponsored Link

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

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

まじか…

hoverですよ、hover

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

ダークソウルクリアしたら次はスターオーシャンを買います。

さて!

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

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

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

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

最後に

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

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

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

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

BILLIONPLAN JAPAN Co, Ltd

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

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

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

または、お電話でも承ります。
 10:00 - 19:00(土日祝休み)

06-6271-7761

ABOUT ME

ぜぇれさんデザイナーTwitter:@zeelesan
加古川在住WEBデザイナー。楽天/ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事した後、ビリオンプラン立ち上げに参加。時計・雑貨のFLOAT運営担当。ご相談はこちらより。グランブルーファンタジーやりましょ!! →記事一覧
Sponsored Link

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

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

follow us in feedly

4 Comments(Trackback)

いっしゃん

個別商品コードを持っている場合、どうしたらいいのでしょう

Reply
ぜぇれさん

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

個別商品コードと言いますとどういうことでしょうか?
項目選択肢の商品、ということですかね?

Reply
いっしゃん

早々のご返信ありがとうございます!
商品コードとは別に「オプション入力」で在庫にチェックを入れた際に「個別商品コード」を入力できるようになると思うんですけど、そこにコードを入れて管理している場合、
うまくカートに入らずに「現在この商品はご注文いただけません。」の表記が出てしまいます。

Reply
ぜぇれさん

ふむふむ、ファッションなどでよくある
色やサイズを選べる仕様のカートのことですね。

そちらは確かに1行のコードでは不可能でしょうね…
少し複雑な記載が必要になってくるのですが

<form name="form" method="post" action="https://order.shopping.yahoo.co.jp/cgi-bin/cart-form"&gt;
<input name="vwitem" type="hidden" value="2">
<input name="vwcatalog" type="hidden" value="everydaycarry">
<input name=".autodone" type="hidden" value="http://store.shopping.yahoo.co.jp/everydaycarry/2.html"&gt;
<input name="vwquantity" type="text" value="1" maxlength="3" onclick="this.select(0, this.value.length);">個
<input type="image" src="common/img/btn_ad_cart.png">
</form>

このような形でお買物カゴフォームを作成し、
こちらのフォームの中に選択肢のセレクトボックスやチェックボックスを追加する形になるかと思います。

なかなか手ごわい相手かも知れませんが、商品ページのソースコードとにらめっこすれば
キット解決できますよ!

Reply

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です