・商品一覧ページと商品詳細ページの「カゴに入れる」ボタンをクリックしたときに適用。
・PCのみで動作。スマホ、携帯には適用されない。
・カゴの中に商品が入ると、「カゴに商品が追加されました」というポップアップメッセージが表示され、約1秒で自動的に消える。
・規格を選択しないでカートボタンをクリックすると、「規格を選択してください」というポップアップメッセージが表示され、約1秒で自動的に消える。
・ポップアップの表示はCSSで、表示時間はJavaScriptで調整する。(どちらも、list.tpl、detail.tplに記述してある)。
・PCのみで動作。スマホ、携帯には適用されない。
・カゴの中に商品が入ると、「カゴに商品が追加されました」というポップアップメッセージが表示され、約1秒で自動的に消える。
・規格を選択しないでカートボタンをクリックすると、「規格を選択してください」というポップアップメッセージが表示され、約1秒で自動的に消える。
・ポップアップの表示はCSSで、表示時間はJavaScriptで調整する。(どちらも、list.tpl、detail.tplに記述してある)。
カスタマイズを希望される方はこちらのページをご覧ください。
http://www.kaiplus.com/user_data/add_customize2.php#013
商品一覧ページ
商品に規格が設定されていて、規格を選択しないでカートボタンをクリックすると、「規格を選択してください。」というメッセージが表示されます。
規格の有無に関係なく、商品がカートに入ると「カゴに商品が追加されました。」というメッセージが表示されます。
商品詳細ページ
商品詳細ページでも同様に表示されます。
メッセージのデザイン変更
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