EC-CUBE:購入ボタンクリック時にカゴの中に遷移しないようにする

・商品一覧ページと商品詳細ページの「カゴに入れる」ボタンをクリックしたときに適用。
・PCのみで動作。スマホ、携帯には適用されない。
・カゴの中に商品が入ると、「カゴに商品が追加されました」というポップアップメッセージが表示され、約1秒で自動的に消える。
・規格を選択しないでカートボタンをクリックすると、「規格を選択してください」というポップアップメッセージが表示され、約1秒で自動的に消える。
・ポップアップの表示はCSSで、表示時間はJavaScriptで調整する。(どちらも、list.tpl、detail.tplに記述してある)。

 

カスタマイズを希望される方はこちらのページをご覧ください。
http://www.kaiplus.com/user_data/add_customize2.php#013

この記事のインデックス

商品一覧ページ

商品に規格が設定されていて、規格を選択しないでカートボタンをクリックすると、「規格を選択してください。」というメッセージが表示されます。

001

規格の有無に関係なく、商品がカートに入ると「カゴに商品が追加されました。」というメッセージが表示されます。

002

商品詳細ページ

商品詳細ページでも同様に表示されます。

003

004

 

メッセージのデザイン変更

list.tpl、detail.tplの上部に記述しているCSS部分を修正します。


<style type="text/css">
#alert{
 position:absolute;
 z-index:10000;
 top:0;
 left:0;
 border:solid 3px #333;
 background:#f5f5f5;
 color:#333;
 display:block;
 width:300px;
 height:100px;
 padding:20px;
 line-height:100px;
 text-align:center;
 font-size:18px;
 font-weight:bold;
}
</style>

表示時間・メッセージ(文言)の変更

list.tpl、detail.tplの上部に記述しているJavaScript部分を修正します。


<script>
 $(function(){
 $("body").append('<div id="alert" class="grad">カゴに商品が追加されました。</div>');
 var $ah = $("#alert").height();
 var $aw = $("#alert").width();
 var $top = $(window).height()/2-$ah/2;
 var $left = $(window).width()/2-$aw/2;
 $("#alert").css({"top":$top,"left":$left,"opacity":0}).animate({"opacity":1},500);
 setTimeout(function(){
 $("#alert").delay(1000).animate({"opacity":0},1500,function(){
 $(this).remove();
 $("body").css("overflow","auto");
 });
 },1000); //停止時間 1000=1秒
 })
 $(document).click(function(event) {
 if (!$.contains($("#alert")[0], event.target)) {
 $("#alert").slideUp(100);
 }
 });
 </script>

それぞれのメッセージのCSSとJavaScript

カゴに商品が追加されました。

<!–{if $tpl_cartin == true}–>~<!–{/if}–>の記述部分

規格を選択してください。

<!–{if $tpl_class_none == true}–>~<!–{/if}–>の記述文

カスタマイズを希望される方はこちらのページをご覧ください。
http://www.kaiplus.com/user_data/add_customize2.php#013