發佈於

商品放入購物車時閃爍數字效果

頁頭購物車有商品加入時,例如我已買了2個商品,購物車圖案就會顯示一個醒目的數字2

作法

—————————————-
#OPENCART 2.3 商品放入購物車時閃爍數字效果
—————————————-
D:\wamp\www\o03\catalog\controller\checkout\cart.php 只有增加時才提示
394行 $json[‘vou’] = $this->cart->countProducts();//自加商品數量

common.js 4個地方
$(‘#cart > button’).html(‘<span id=”cart-total”><i class=”fa fa-shopping-cart”></i> ‘ + json[‘total’] + ‘</span>’);
$(‘#cart > button’).html(‘<span id=”cart-total”><i class=”fa fa-shopping-cart”></i><span class=”blink badge2 badge-red rounded-x”>’ + json[‘vou’] + ‘</span> ‘ + json[‘total’] + ‘</span>’);

CSS
/*購物車閃爍效果*/
span.badge2 {
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
}
span.badge2 {
top: -5px;
left: -15px;
position: absolute;
}
span.badge-red {background: #e74c3c;}
.rounded-x {border-radius: 50% !important;}
/*閃爍動畫*/
.blink {
animation-duration: 1s;
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
@-o-keyframes blink
{
0% {opacity: 1}
50% {opacity: 0.3}
100% {opacity: 1}
}
@-ms-keyframes blink
{
0% {opacity: 1}
50% {opacity: 0.3}
100% {opacity: 1}
}
@-moz-keyframes blink
{
0% {opacity: 1}
50% {opacity: 0.3}
100% {opacity: 1}
}
@-webkit-keyframes blink
{
0% {opacity: 1}
50% {opacity: 0.3}
100% {opacity: 1}
}

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *