📌STEP ONE: Click button mua hàng.
💨HTML****:💨
<div class="viewall">
<a href="#" class="buy-fast" data-pid="7" data-soluong="1">
<span MUA NGAY</span>
</a>
</div>
💨Javascript****:💨
$(".buy-fast").click(function() {
var $btn = $(this);
var pid = $btn.attr("data-pid");
var soluong = $btn.attr("data-soluong");
$btn.addClass("loading");
$.ajax({
url: '/modules.php',
type: 'POST',
dataType: 'html',
data: {name:'Shoping',op:'add_basket_ajax',pid:pid,soluong:soluong},
})
.done(function(data) {
load__soluong__sanpham();
load__giohang();
$(".vnt-bg-over").addClass("active");
$(".vhpopcartFix").addClass("active");
$(".lstProductCart").html(data);
})
.always(function() {
$btn.removeClass("loading");
});
});
💨 DIV show giỏ hàng bên phải:💨
function popup__shopcart(){
global $db,$prefix,$site_live,$currentlang,$ThemeSel;
?>
<style type="text/css">
.vnt-bg-over {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #000000;
opacity: 0;
z-index: 5;
pointer-events: none;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.vnt-bg-over.active {
opacity: 0.3;
z-index: 1110;
pointer-events: auto;
}
.vhpopcartFix {
position: fixed;
pointer-events: auto;
top: 0;
bottom: 0;
right: 0;
max-width: 360px;
width: 100%;
background-color: #fff;
z-index: 11111;
transform: translateX(100%);
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
opacity: 0;
visibility: hidden;
}
.vhpopcartFix.active {
transform: inherit;
opacity: 1;
visibility: inherit;
}
.vhpopcartFix .btnClosePop {
position: absolute;
width: 30px;
height: 30px;
top: 10px;
right: 10px;
}
.vhpopcartFix .btnClosePop a {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: center;
width: 100%;
height: 100%;
}
.vhpopcartFix .titlePopCart {
padding: 15px 60px 15px 15px;
}
.vhpopcartFix .titlePopCart h2 {
font-size: 18px;
line-height: 27px;
font-weight: 700;
text-transform: uppercase;
}
.vhpopcartFix .lstProductCart {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-top: 1px solid rgba(0, 0, 0, 0.1);
background-color: #fff;
height: calc(100vh - 136px);
overflow: hidden;
overflow-y: auto;
}
.lstProductCart .itemCart {
padding: 15px;
display: flex;
flex-wrap: wrap;
align-content: center;
align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
position: relative;
}
.itemCart .thumbPro {
width: 90px;
text-align: center;
}
.itemCart .decsPro {
width: calc(100% - 90px);
padding-left: 10px;
}
.itemCart .pptitle {
font-size: 13px;
line-height: 21px;
max-height: 42px;
overflow: hidden;
margin-bottom: 5px;
}
.itemCart .pptitle a {
color: #000000;
display: block;
}
.itemCart .pptool {
display: flex;
flex-wrap: wrap;
align-content: center;
font-size: 12px;
line-height: 20px;
margin-bottom: 5px;
}
.itemCart .pptool .p-price {
display: flex;
align-content: center;
align-items: center;
}
.itemCart .pptool > div {
margin-bottom: 5px;
}
.itemCart .deletePro {
width: 20px;
height: 20px;
position: absolute;
right: 15px;
bottom: 25px;
pointer-events: auto;
}
.itemCart .deletePro a {
display: block;
}
.vhpopcartFix .infoTotalCart {
padding: 20px 15px;
}
.vhpopcartFix .btnTTCart {
text-align: center;
}
.vhpopcartFix .btnTTCart a {
display: block;
border: 1px solid #0f5ba9;
background-color: #0f5ba9;
color: #fff;
font-size: 13px;
line-height: 21px;
text-transform: uppercase;
padding: 8px 20px;
border-radius: 25px;
}
.deletePro{
cursor: pointer;
}
/**********/
.buy-fast.loading {
position: relative;
opacity: 0.6;
pointer-events: none;
}
.buy-fast.loading::after {
content: "";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
border: 2px solid #fff;
border-top: 2px solid transparent;
border-radius: 50%;
animation: spin 0.6s linear infinite;
z-index: 2;
}
@keyframes spin {
0% { transform: translateY(-50%) rotate(0deg); }
100% { transform: translateY(-50%) rotate(360deg); }
}
</style>
<?php
echo'<div class="vntpopalll">
<div class="vnt-bg-over">🌴<!--ajax-here-->🌴</div>
<div class="vhpopcartFix" id="vhpopcartFix">🌴<!--ajax-here-->🌴
<div class="btnClosePop">
<a href="javascript:(0);" rel="nofollow"><img src="'.$site_live.'themes/'.$ThemeSel.'/images/closet.png" alt="closet"></a>
</div>
<div class="titlePopCart">
<h2>'.Vihan_language::_t("Giỏ hàng").'</h2>
</div>
<div class="contentPopCart">
<div class="lstProductCart">
🌴<!--load content ajax-->🌴
</div>
<div class="infoTotalCart">
<div class="btnTTCart">
<a href="/gio-hang" rel="nofollow">
'.Vihan_language::_t("Xem giỏ hàng").'
</a>
</div>
</div>
</div>
</div>
</div>
';
}
☂Function Ajax☂:
💥function add_basket_ajax() {
global $db, $prefix, $cur, $currentlang, $site_live;
$client = base64_decode(set_session());
if (!isset($client) || $client == '') {
header("Location: modules.php?name=$module_name");
exit();
}
// Xoá dữ liệu giỏ hàng cũ hơn 14 ngày
$past_time = time() - (14 * 86400);
$db->sql_query("DELETE FROM ".$prefix."_shop_usercat WHERE g_date < '$past_time'");
$pid = isset($_POST['pid']) ? intval($_POST['pid']) : 0;
if ($pid == 0) return;
$langid = get_lang_id();
// Lấy thông tin sản phẩm
$sql = "SELECT * FROM ".$prefix."_shop a
JOIN ".$prefix."_shop_lang b ON a.pid = b.pid
WHERE b.lang_id = $langid AND a.pid = '$pid'";
$result = $db->sql_query($sql);
if ($db->sql_numrows($result) != 1) {
header("Location: modules.php?name=$module_name");
exit();
}
$product = $db->sql_fetchrow($result);
// Xác định giá (ưu tiên saleoff nếu có)
if (isset($product['saleoff_price']) && $product['saleoff_price'] != 0) {
$price = $product['saleoff_price'];
} else {
$price = $product['price'];
}
// Số lượng mua
$quantity = isset($_POST['soluong']) ? intval($_POST['soluong']) : 1;
// Kiểm tra sản phẩm đã có trong giỏ chưa
$sql_check = "SELECT * FROM ".$prefix."_shop_usercat
WHERE g_uname = '$client' AND g_pid = '".$product['pid']."'";
$res_check = $db->sql_query($sql_check);
if ($db->sql_numrows($res_check) == 0) {
// Thêm mới vào giỏ hàng
$db->sql_query("INSERT INTO ".$prefix."_shop_usercat
(gid, g_uname, g_pid, g_title, g_price, g_count, g_date)
VALUES (NULL, '$client', '".$product['pid']."', '".$product['title']."', '$price', '$quantity', '".time()."')");
} else {
// Cập nhật số lượng sản phẩm đã có
$cart = $db->sql_fetchrow($res_check);
$new_count = intval($cart['g_count']) + $quantity;
$db->sql_query("UPDATE ".$prefix."_shop_usercat
SET g_count = '$new_count'
WHERE gid = '".$cart['gid']."'");
}
}
