楽天GOLDにオリジナルの買い物かごを設置する方法

楽天GOLDにオリジナルの買い物かごを設置する方法

楽天GOLDにオリジナルの買い物かごを設置したい方向け。

楽天GOLDに作成した特集ページなどに買い物かごを設置することで購入経路が増え、売上UPの効果が見込めます。

それでは詳しく解説していきます。

デザインの一例としてサンプルデモもご用意しましたので参考にしてください。

参考にした買い物かご

PayPayモールアプリ版のカート

Android版PayPayモールのカート

こちらのカートデザインを参考に楽天仕様の買い物かごを作成しました。

スポンサーリンク

個数の増減ボタン

本記事で実装する買い物かごの一番の特徴は個数の増減ボタンです。

操作性の高い増減ボタンの設置は購入手続きをスムーズにします。

特にスマホでの増減ボタンは必須といえるでしょう。お客様の操作ストレスを減らしページ離脱防止の効果も見込めます。

買い物かごを実装する

HTML

<form method="post" action="https://basket.step.rakuten.co.jp/rms/mall/bs/cartadd/set" target="_blank" class="cart">
  <input value="店舗id" type="hidden" name="shop_bid">
  <input value="商品id" type="hidden" name="item_id">
  <label for="units">個数</label>
  <div class="input_area">
    <input type="number" class="counter1" aria-label="個数" aria-describedby="units" value="1" maxlength="3" min="1" max="999" data-min="1" data-max="999" pattern="d*" name="units" id="units">
    <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"><svg class="svg-icon" viewBox="0 0 20 20">
      <path
        d="M14.613,10c0,0.23-0.188,0.419-0.419,0.419H10.42v3.774c0,0.23-0.189,0.42-0.42,0.42s-0.419-0.189-0.419-0.42v-3.774H5.806c-0.23,0-0.419-0.189-0.419-0.419s0.189-0.419,0.419-0.419h3.775V5.806c0-0.23,0.189-0.419,0.419-0.419s0.42,0.189,0.42,0.419v3.775h3.774C14.425,9.581,14.613,9.77,14.613,10 M17.969,10c0,4.401-3.567,7.969-7.969,7.969c-4.402,0-7.969-3.567-7.969-7.969c0-4.402,3.567-7.969,7.969-7.969C14.401,2.031,17.969,5.598,17.969,10 M17.13,10c0-3.932-3.198-7.13-7.13-7.13S2.87,6.068,2.87,10c0,3.933,3.198,7.13,7.13,7.13S17.13,13.933,17.13,10">
      </path>
    </svg>商品をかごに追加</button>
</form>

上が全てのHTMLです。それでは各項目の解説をしていきます。

隠しデータ

<input value="店舗id" type="hidden" name="shop_bid">
<input value="商品id" type="hidden" name="item_id">

type="hidden"はページに表示されない隠しデータを表します。

各店舗の「店舗id」、買い物かごを設置したい商品の「商品id」を入力します。

個数入力欄

<input type="number" class="counter1" aria-label="個数" aria-describedby="units" value="1" maxlength="3" min="1" max="999" data-min="1" data-max="999" pattern="d*" name="units" id="units">

この部分は変更する必要はありません。コピペで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"><svg class="svg-icon" viewBox="0 0 20 20">
    <path
      d="M14.613,10c0,0.23-0.188,0.419-0.419,0.419H10.42v3.774c0,0.23-0.189,0.42-0.42,0.42s-0.419-0.189-0.419-0.42v-3.774H5.806c-0.23,0-0.419-0.189-0.419-0.419s0.189-0.419,0.419-0.419h3.775V5.806c0-0.23,0.189-0.419,0.419-0.419s0.42,0.189,0.42,0.419v3.775h3.774C14.425,9.581,14.613,9.77,14.613,10 M17.969,10c0,4.401-3.567,7.969-7.969,7.969c-4.402,0-7.969-3.567-7.969-7.969c0-4.402,3.567-7.969,7.969-7.969C14.401,2.031,17.969,5.598,17.969,10 M17.13,10c0-3.932-3.198-7.13-7.13-7.13S2.87,6.068,2.87,10c0,3.933,3.198,7.13,7.13,7.13S17.13,13.933,17.13,10">
    </path>
  </svg>商品をかごに追加</button>

かごに追加ボタンも変更なしでOKです。

プラスアイコンはSVGアイコンを使用しました。

CSS

/* ラベル */
.cart label {
  font-size: .8rem;
  letter-spacing: .12em;
  display: inline-block;
  margin-bottom: .5rem;
}

.input_area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.8rem;
}

/* 個数入力エリア */
.input_area input {
  font-size: 1rem;
  padding: .6rem;
  background-color: #f5f5f5;
  border: none;
  box-shadow: 0 2px 0 0 #808080;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  font-size: 1.2rem;
}

.input_area input:focus {
  outline: 0;
}

/* 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;
}

/* 個数増減ボタン */
.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(191, 0, 0);
  color: white;
  border: none;
  letter-spacing: .12em;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
}

button[type="submit"]:hover {
  background-color: rgba(191, 0, 0, .95);
}

button[type="submit"]:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, .5);
}

/* SVGアイコン */
.svg-icon {
  width: 1.4em;
  height: 1.4em;
  margin-right: .3em;
  vertical-align: text-bottom
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #fff
}

.svg-icon circle {
  stroke: #fff;
  stroke-width: 1
}

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 楽天GOLDにオリジナルの買い物かごを設置する方法 by ざきひー (@zakihiii) on CodePen.light

さあ、増減ボタンつき買い物かごを実装しよう

買い物かごの特徴

スマホでの操作性に優れた数量の増減ボタン付き

お客様の使いやすさを追求することはページ離脱を防ぎ、商品購入を促進します。

ぜひ楽天市場のGOLDページや外部サイトに買い物かごを設置して購入機会を増やしてください。

コメント

タイトルとURLをコピーしました