Yahooショッピングのトリプルページや外部サイトにYahooショッピングのカートを設置したい方向け。
カートを外部化して設置することで購入経路が増え、売上UPの効果が見込めます。
それでは詳しく解説していきます。Android版PayPayモール風デザインのサンプルもご用意しましたので参考にしてください。
参考にしたカート
Android版PayPayモールのカート
こちらのカートデザインを参考に作成しました。
数量の増減ボタン
本記事で実装するカートの一番の特徴は数量の増減ボタンです。
操作性の高い増減ボタンの設置は購入手続きをスムーズにします。
特にスマホでの増減ボタンは必須といえるでしょう。お客様の操作ストレスを減らしページ離脱防止の効果も見込めます。
カートを実装する
HTML
<form method="post" name="addCart" action="https://order.shopping.yahoo.co.jp/cgi-bin/cart-form" target="_blank" class="cart" accept-charset="EUC-JP">
<input name="vwcatalog" value="ストアID" type="hidden">
<input name="vwitem" value="商品ID" type="hidden">
<label for="vwquantity">数量</label>
<div class="input_area">
<input name="vwquantity" class="counter1" value="1" maxlength="3" onclick="this.select(0, this.value.length);" type="number" data-min="1" data-max="999" pattern="d*" aria-label="数量" aria-describedby="vwquantity" id="vwquantity">
<button type="button" class="btnspinner" data-cal="-1" data-target=".counter1" style="margin-left: auto;">－</button>
<button type="button" class="btnspinner" data-cal="1" data-target=".counter1" style="margin-left: 7px;">＋</button>
</div>
<button type="submit" class="btn btn-danger" onclick="YAHOO.JP.sc.addCart(YAHOO.JP.sc.products, YAHOO.JP.sc.prop22);">カートに入れる</button>
</form>上が全てのHTMLです。それでは各項目の解説をしていきます。
隠しデータ
<input name="vwcatalog" value="ストアID" type="hidden">
<input name="vwitem" value="商品ID" type="hidden">type="hidden"はページに表示されない隠しデータを表します。
各店舗の「ストアID」、カートを設置したい商品の「商品ID」を入力します。
例えばhttps://paypaymall.yahoo.co.jp/store/078-652-1318/item/mix-nuts-001/のカートを作りたいとします。
この場合のストアIDは「078-652-1318」、商品IDは「mix-nuts-001」です。
数量入力欄
<input name="vwquantity" class="counter1" value="1" maxlength="3" onclick="this.select(0, this.value.length);" type="number" data-min="1" data-max="999" pattern="d*" aria-label="数量" aria-describedby="vwquantity" id="vwquantity">この部分は変更する必要はありません。コピペでOKです。
変更するとすればdata-min="1"の入力可能最小値、data-max="999"の入力可能最大値くらいでしょうか。こちらは必要があれば変更してください。
増減ボタン
<button type="button" class="btnspinner" data-cal="-1" data-target=".counter1" style="margin-left: auto;">－</button>
<button type="button" class="btnspinner" data-cal="1" data-target=".counter1" style="margin-left: 7px;">＋</button>増減ボタンも基本的に変更せずに使います。
targetの値が数量入力欄のclass名と同じになっているか確認してください。
ページ内に複数のカートを設置する場合はtargetの値はカートごとに個別の値にしてください。
カートに入れるボタン
<button type="submit" class="btn btn-danger" onclick="YAHOO.JP.sc.addCart(YAHOO.JP.sc.products, YAHOO.JP.sc.prop22);">カートに入れる</button>カートに入れるボタンも変更なしでOKです。
CSS
.cart label {
font-size: .8rem;
letter-spacing: .12em;
display: inline-block;
margin-bottom: .5rem;
}
.cart .input_area {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.8rem;
}
.input_area input[type="number"] {
font-size: 1.2rem;
max-width: 5em;
padding: .6rem;
background-color: #f5f5f5;
border: none;
box-shadow: 0 2px 0 0 #808080;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
/* FireFox，IEのデフォルトのスピナーを消す */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Chrome、Safariのデフォルトのスピナーを消す */
input[type="number"] {
-moz-appearance: textfield;
}
input[type="number"]:focus {
outline: 0;
}
.btnspinner {
background-color: white;
padding: .6rem .85rem;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
/* テキストを選択できないようにする */
-ms-user-select: none;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.btnspinner:hover {
background-color: #f8f9fa;
}
.btnspinner:focus {
outline: 0;
border-color: #6c757d;
box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, .5);
}
button[type="submit"] {
width: 100%;
padding: .9em .5em;
border-radius: 4px;
background-color: rgb(228, 39, 1);
color: white;
border: none;
letter-spacing: .12em;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: rgba(228, 39, 1, .95);
}
button[type="submit"]:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, .5);
}CSSで一番重要なポイントはデフォルトの増減ボタンを非表示にすることです。
ブラウザ別に記述法が異なります。
/* FireFox，IEのデフォルトのスピナーを消す */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Chrome、Safariのデフォルトのスピナーを消す */
input[type="number"] {
-moz-appearance: textfield;
}JavaScript
増減ボタンの動きはjQueryで制御します。
jQuery本体の読みこみが必須です。
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script><script>
$(function() {
var arySpinnerCtrl = [];
var spin_speed = 20; //変動スピード
//長押し押下時
$('.btnspinner').on('touchstart mousedown click', function(e) {
if (arySpinnerCtrl['interval']) return false;
var target = $(this).data('target');
arySpinnerCtrl['target'] = target;
arySpinnerCtrl['timestamp'] = e.timeStamp;
arySpinnerCtrl['cal'] = Number($(this).data('cal'));
//クリックは単一の処理に留める
if (e.type == 'click') {
spinnerCal();
arySpinnerCtrl = [];
return false;
}
//長押し時の処理
setTimeout(function() {
//インターバル未実行中 + 長押しのイベントタイプスタンプ一致時に計算処理
if (!arySpinnerCtrl['interval'] && arySpinnerCtrl['timestamp'] == e.timeStamp) {
arySpinnerCtrl['interval'] = setInterval(spinnerCal, spin_speed);
}
}, 500);
});
//長押し解除時 画面スクロールも解除に含む
$(document).on('touchend mouseup scroll', function(e) {
if (arySpinnerCtrl['interval']) {
clearInterval(arySpinnerCtrl['interval']);
arySpinnerCtrl = [];
}
});
//変動計算関数
function spinnerCal() {
var target = $(arySpinnerCtrl['target']);
var num = Number(target.val());
num = num + arySpinnerCtrl['cal'];
if (num > Number(target.data('max'))) {
target.val(Number(target.data('max')));
} else if (Number(target.data('min')) > num) {
target.val(Number(target.data('min')));
} else {
target.val(num);
}
}
});
</script>JavaScriptのコードはhttps://kinocolog.com/spinner_btn/からお借りしました。
デモ
See the Pen Yahooショッピングのカートを外部化する方法 by ざきひー (@zakihiii) on CodePen.light
さあ、増減ボタンつきカートを実装しよう
カートの特徴
スマホでの操作性に優れた数量の増減ボタン付き
お客様の使いやすさを追求することはページ離脱を防ぎ、商品購入を促進します。
ぜひYahooショッピングのトリプルページや外部サイトにカートを設置して購入機会を増やしてください。
コメント