ITOBEN STYLE > EC-CUBE:購入ボタンクリック時にカゴの中に遷移しないようにする
2015年7月5日カテゴリー:未分類

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部分を修正します。

[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>

[/css]

表示時間・メッセージ（文言）の変更

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

[php]

<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>

[/php]

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

カゴに商品が追加されました。
↓
<!–{if $tpl_cartin == true}–>～<!–{/if}–>の記述部分

規格を選択してください。
↓
<!–{if $tpl_class_none == true}–>～<!–{/if}–>の記述文

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