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

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

売り切れ・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>

細かい、ソースの説明については、過去記事を参照してみてください。

こちらも、通常時、売り切れ時とクラス名を変更する使い方になります。
各商品情報を囲っている＜div class=”item-box”＞のクラス名を
通常時は、 item-box
売り切れた場合は、item-box_soldout
と変更するだけで売り切れ状態の吹き出しと商品画像白黒が適用されます。

売り切れた商品画像を白黒（モノクロ）動作サンプル

いかがでしょうか。「吹き出し」＋「画像をモノクロにする」という方法を組み合わせて商品の売り切れ、SOLDOUTを表現してみました。




Your Message

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

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

PREV：
ECサイト・ネットショップのデザイン集サイト10個以上まとめてみた
NEXT：
楽天の注文状況、新着商品、ランキング、レビューなどのにぎわいツール５つが無料！？
Home > jQuery > 売り切れ・SOLD OUT商品は賑わいアピールに活用しよう!!
スポンサードリンク

最新記事

今すぐ使える！英単語学習アプリをChatGptと相談しながら作ってみた
今すぐ使える！英単語学習アプリをChatGptと相談しながら作ってみた
HTML秒数指定で別ページへリダイレクトさせる方法
HTML秒数指定で別ページへリダイレクトさせる方法
越境ECにShopify無料ツール(QRコード/バーコード/ロゴ作成)が便利
越境ECにShopify無料ツール(QRコード/バーコード/ロゴ作成)が便利
ブラウザ操作自動化できるiMacrosを使ってメルカリの出品作業を時短する方法
ブラウザ操作自動化できるiMacrosを使ってメルカリの出品作業を時短する方法
越境ECに強い海外発のShopifyでネットショップ開業
越境ECに強い海外発のShopifyでネットショップ開業

記事が気に入ったらシェアお願いします

PAGE TOP ↑