売り切れ・SOLD OUT商品は賑わいアピールに活用しよう!!

公開日：2014/08/05 最終更新日：2021/11/30

jQuery CSS サンプルソース売り切れ

売り切れ・SOLD OUT商品は賑わいアピールに活用しよう!!ショップの売れてる雰囲気作り
少し前に書いたこちらの記事

ネットショップ運営の気になる備忘録

表TABLEの行TRやセルTDをjQueryのみでフェードさせて動かす簡単な実装方法

プラグイン等を使わずjQueryのみでTRやTDを動す方法を紹介しました。TABLEで商品情報などをレイアウトするだけで簡単に動きを付けることが出来る方法です。

最近、この方法を利用している方より「売り切れ」「SOLD OUT」を簡単に表示する方法がないですか？とコメントを頂きました。

並べた商品情報の売り切れ表示を今までに紹介した記事を組み合わせて考えてみた

モール、カート内で自動的に在庫情報と連動して表示される部分には、売り切れの情報などは自動的に表示されるようになっていることが多いですが、今回のような、自分でピックアップして並べている商品などは売り切れたら表示から削除したり、売り切れましたと表示するのではないでしょうか。

ただ、表示から削除するのってもったいない気がしませんか？
売れている感じをアピールする良い機会と考えて、目立つ感じで売り切れを表現する方法を検討してみました。

吹き出しを表示するCSSと組み合わせてみた

売り切れを表示する方法としては、色々とあるかと思いますが、最初に思いついたのは以前書いたこちらの記事

ネットショップ運営の気になる備忘録

CSSで画像に吹き出しを重ねて目立たせる方法について調べてみた

吹き出しを表示する方法は、商品を目立たせる方法としては有効かと思うので、これを使って売り切れ、SOLD OUTを表現してみます。

サンプルソース sample1.html
Css、Script部分の記述

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  timer = setInterval(function(){
    $('table.mytable tr:last').prependTo('table.mytable').hide().fadeIn(2000);
  }, 5000);
</script>
<style>
.item-box {
    position: relative;
    color: #fff;
    display: inline-block;
    padding-top: 10px;
    padding-right: 5px;
    padding-left: 5px;
    margin-top:5px;
    overflow: hidden;
}
.item-box p {
    display: inline;  
}
.arrow_box_soldout {
    position: absolute;
    background: #d50606;
    border: 1px solid #d50606;
    width:60px;
    color:#fff;
    padding:3px;
    text-align:center;
    font-weight:bold;
    font-size:12px;
    top: 0px;
    left: 0px;
}
.arrow_box_soldout:after, .arrow_box_soldout:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow_box_soldout:after{
    border-color: rgba(213, 6, 6, 0);
    border-top-color: #d50606;
    border-width: 7px;
    margin-left: -7px;
}
.arrow_box_soldout:before {
    border-color: rgba(213, 6, 6, 0);
    border-top-color: #d50606;
    border-width: 8px;
    margin-left: -8px;
}
.arrow_box_sell {
    display:none;
}
</style>

続いて、タグ部分の記述です。

<table class="mytable">
<tbody><tr style="display: table-row;">
  <td>
    <div class="item-box">
      <img src="画像URL">
      <p><span class="arrow_box_sell">売り切れ</span></p>
    </div>
  </td>
  <td>
    <div class="item-box">
      <img src="画像URL">
      <p><span class="arrow_box_sell">売り切れ</span></p>
    </div>
  </td>
  <td>
    <div class="item-box">
      <img src="画像URL">
      <p><span class="arrow_box_sell">売り切れ</span></p>
    </div> 
  </td>
  <td>
    <div class="item-box">
      <img src="画像URL">
      <p><span class="arrow_box_soldout">売り切れ</span></p>
    </div>
  </td>
  <td>
    <div class="item-box">
      <img src="画像URL">
      <p><span class="arrow_box_sell">売り切れ</span></p>
    </div>
  </td>
</tr><tr>
  <td>
    <div class="item-box">
      <img src="画像URL">
      <p><span class="arrow_box_sell">売り切れ</span></p>
    </div>
  </td>
  <td>
    <div class="item-box">
      <img src="画像URL">
      <p><span class="arrow_box_soldout">売り切れ</span></p>
    </div>
  </td>
  <td>
    <div class="item-box">
      <img src="画像URL">
      <p><span class="arrow_box_sell">売り切れ</span></p>
    </div>
  </td>
  <td>
    <div class="item-box">
      <img src="画像URL">
      <p><span class="arrow_box_sell">売り切れ</span></p>
    </div>
  </td>
  <td>
    <div class="item-box">
      <img src="画像URL">
      <p><span class="arrow_box_sell">売り切れ</span></p>
    </div>
  </td>
</tr>
  
</tbody></table>

ソースの細かい説明は過去記事を参照してください。
基本的にすべての商品情報に最初から売り切れの吹き出し情報を設定しておきます。ただし、CSSで吹き出し表示、非表示を切り替えています。

ポイントとしては、
＜span class=”arrow_box_sell”＞売り切れ＜/span＞ → 吹き出し非表示状態
＜span class=”arrow_box_soldout”＞売り切れ＜/span＞ → 吹き出しを表示状態

通常時と売り切れ時の切り替えは arrow_box_sell、arrow_box_soldout部分で行っており、通常時は、arrow_box_sellとしておき、売り切れたらarrow_box_soldoutにクラス名を変更します。

吹き出しで売り切れを表現する動作サンプル

さらに売り切れた商品画像を白黒（モノクロ）にするjQueryプラグインと組み合わせてみた

頂いたコメントに、売り切れたら商品画像を白黒にするのはどうかという、アイデアも頂いたので、その方法も試してみましょう。

ネットショップ運営の気になる備忘録

マウスオーバー時に画像の白黒・カラーを切り替える「jQuery.BlackAndWhite」

サンプルソース sample1.html
Css、Script部分の記述

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.BlackAndWhite.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
    $(".item-box_soldout").BlackAndWhite({
        hoverEffect : false,
    });
});
</script>
<script type="text/javascript">
timer = setInterval(function(){
    $('table.mytable2 tr:last').prependTo('table.mytable2').hide().fadeIn(2000);   
}, 5000);
</script>
<style>
.item-box,.item-box_soldout {
    position: relative;
    color: #fff;
    display: inline-block;
    padding-top: 10px;
    padding-right: 5px;
    padding-left: 5px;
    margin-top:5px;
    overflow: hidden;
}
.item-box p ,.item-box_soldout p{
    display: inline;  
}
.arrow_box {
    position: absolute;
    background: #d50606;
    border: 1px solid #d50606;
    width:60px;
    color:#fff;
    padding:3px;
    text-align:center;
    font-weight:bold;
    font-size:12px;
    top: 0px;
    left: 0px;
}
.arrow_box:after, .arrow_box:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow_box:after{
    border-color: rgba(213, 6, 6, 0);
    border-top-color: #d50606;
    border-width: 7px;
    margin-left: -7px;
}
.arrow_box:before {
    border-color: rgba(213, 6, 6, 0);
    border-top-color: #d50606;
    border-width: 8px;
    margin-left: -8px;
}
.item-box .arrow_box {
    display:none;
}
</style>

タグの記述

<table class="mytable2">
<tbody><tr style="display: table-row; opacity: 0.944788;">
  <td>
    <div class="item-box">
      <img src="画像URL">
      <p><span class="arrow_box">売り切れ</span></p>
    </div>
  </td>
  <td>
    <div class="item-box">
      <img src="画像URL">
      <p><span class="arrow_box">売り切れ</span></p>
    </div>
  </td>
  <td>
    <div class="item-box">
      <img src="画像URL">
      <p><span class="arrow_box">売り切れ</span></p>
    </div> 
  </td>
  <td>
    <div class="item-box_soldout">
      <img src="画像URL">
      <p><span class="arrow_box">売り切れ</span></p>
    </div>
  </td>
  <td>
    <div class="item-box_soldout">
      <img src="画像URL">
      <p><span class="arrow_box">売り切れ</span></p>
    </div>
  </td>
</tr><tr>
  <td>
    <div class="item-box_soldout">
      <img src="画像URL">
      <p><span class="arrow_box">売り切れ</span></p>
    </div>
  </td>
  <td>
    <div class="item-box_soldout">
      <img src="画像URL">
      <p><span class="arrow_box">売り切れ</span></p>
    </div>
  </td>
  <td>
    <div class="item-box">
      <img src="画像URL">
      <p><span class="arrow_box">売り切れ</span></p>
    </div> 
  </td>
  <td>
    <div class="item-box">
      <img src="画像URL">
      <p><span class="arrow_box">売り切れ</span></p>
    </div>
  </td>
  <td>
    <div class="item-box">
      <img src="画像URL">
      <p><span class="arrow_box">売り切れ</span></p>
    </div>
  </td>
</tr>
<tr>
  <td>
    <div class="item-box">
      <img src="画像URL">
      <p><span class="arrow_box">売り切れ</span></p>
    </div>
  </td>
  <td>
    <div class="item-box">
      <img src="画像URL">
      <p><span class="arrow_box">売り切れ</span></p>
    </div>
  </td>
  <td>
    <div class="item-box_soldout">
      <img src="画像URL">
      <p><span class="arrow_box">売り切れ</span></p>
    </div> 
  </td>
  <td>
    <div class="item-box">
      <img src="画像URL">
      <p><span class="arrow_box">売り切れ</span></p>
    </div>
  </td>
  <td>
    <div class="item-box">
      <img src="画像URL">
      <p><span class="arrow_box">売り切れ</span></p>
    </div>
  </td>
</tr>
</tbody></table>