• このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

在庫の有無によってカートボタンを変更する

気づけば3月も半ばですね。

サポート部の本田です。
今回は、サポートの仕事をしていてよく聞かれることを解決する記事を書きます。
それは、ECサイトのカートボタンを在庫の有無によって変更する方法です。


そもそもなぜ変更するのか、それはユーザーに対して商品の情報をわかりやすく伝えるためです。

在庫がないのに、カートに入れるボタンが押せそうだと混乱しちゃいますもんね。
少しの気遣いが、よりわかりやすい使いやすいサイトに繋がるのではと思いますので
早速ご案内していきます。

下記サンプルサイトをご用意しましたので実際に見てください。

在庫が無いけど、ボタンがそのまま
在庫が無いので、ボタンを変化させる

こんな感じにです。以下実装した内容です。
CSSとJSを使っています。

ステップ1:CSSの実装

まずはCSSです。ボタンに効かせているスタイルのみ書いています。

.sysSoldOutButton {
    width: 50%;
    text-align: center;
    border: 1px solid rgba(255, 0, 0, 0.69);
    background: rgba(255, 0, 0, 0.89);
    color: white;
    margin: 0 auto;
    margin-top: 3%;
    margin-bottom: 3%;
    padding: 2%;
}

ステップ2:jQueryの実装

今回使用しているカートシステムaishipRでは、商品の在庫がない際に
カートボタンにという要素が追加されます。

という要素であれば、「SOLD OUT」という文言を追加する。
というようなコードとなっています。

<script type="text/javascript">
$( document ).ready(function( $ ) {
  // 売り切れの場合、ボタンを非表示にし売り切れ表示にする
  var soldOut = $("#sysSubmit .sysCartButton").is(':disabled');
   if ( soldOut ) {
      $(".sysCartButton").remove();
      $("#sysSubmit").html("<div class='sysSoldOutButton'>SOLD OUT</div>");
}
});
</script>

終わりに

カートシステムなどでは、ある程度制約のある中でサイト制作を行う形になります。

HTMLを見ると、何かしらの癖や気づきがあるのでそれをうまく利用することで

自由な制作が行えると思います。今後も色んな提案を行っていきます。

本田