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

公開日:  最終更新日:2015/12/16

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

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

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

スポンサードリンク

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

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

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

吹き出しを表示する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プラグインと組み合わせてみた

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

サンプルソース 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を表現してみました。




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

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

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

スポンサードリンク

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

PAGE TOP ↑