## JS
<script>
function load__giohang(callback) {
var $container = $('.cart-drawer-body');
// Thêm hiệu ứng xoay/mờ khi đang tải dữ liệu
$container.css('opacity', '0.5');
$.ajax({
url: '/modules.php',
type: 'POST',
dataType: 'html',
data: {
name: 'Shoping',
op: 'load_cart_drawer_ajax'
},
success: function(response) {
$container.html(response).css('opacity', '1');
if (typeof callback === 'function') callback();
},
error: function(xhr, status, error) {
console.error("Lỗi nạp giỏ hàng:", error);
$container.css('opacity', '1').html('<p style="text-align:center; padding: 20px; color: #888;">Không thể tải danh sách giỏ hàng.</p>');
}
});
}
$(document).on("click", ".buy-fast", function(e) {
e.preventDefault();
var pid = $(this).attr("data-pid");
var soluong = $(this).attr("data-soluong") || 1;
$.ajax({
url: '/modules.php',
type: 'POST',
dataType: 'html',
data: { name: 'Shoping', op: 'add_basket_ajax', pid: pid, soluong: soluong },
})
.done(function(data) {
// Nạp dữ liệu mới vào .cart-drawer-body, hoàn tất mới mở Drawer
load__giohang(function() {
$("#cart-drawer-overlay").addClass("active");
$("#cart-drawer").addClass("open");
});
load__tien__muasp();
load__soluong__sanpham();
})
.fail(function(err) {
console.error("Lỗi thêm giỏ hàng:", err);
});
});
</script>
## Module - Shoping
function add_basket_ajax(){
global $db, $prefix,$module_name, $cur,$currentlang,$site_live;
$client = base64_decode(set_session());
if(empty($client)){
Header("Location: modules.php?name=$module_name"); exit();
}
$hle2 = 14 * 86400;
$langid = get_lang_id();
$past_time = time() - $hle2;
$db->sql_query("DELETE FROM ".$prefix."_shop_usercat WHERE g_date < '$past_time'");
$pid = (int)$_POST['pid'];
if($pid != 0){
$gresult = $db->sql_query("SELECT * FROM ".$prefix."_shop a ,".$prefix."_shop_lang b WHERE a.pid=b.pid and b.lang_id=".$langid." and a.pid='$pid'");
$goods = $db->sql_fetchrow($gresult);
$testg = $db->sql_numrows($gresult);
if ($testg != 1){
Header("Location: modules.php?name=$module_name"); exit();
}
$gnnn = $db->sql_query("SELECT * FROM ".$prefix."_shop_usercat WHERE g_uname='$client' AND g_pid='$goods[pid]'");
$g2nnn = $db->sql_fetchrow($gnnn);
$nnn = $db->sql_numrows($gnnn);
if ($nnn == 0) {
if($goods["saleoff_price"]==0 ){
$price = $goods['price'];
}else{
$price = $goods['saleoff_price'];
}
$xdate = time();
if(isset($_POST["soluong"])){
$counter=$_POST["soluong"];
}else{
$counter=1;
}
if($db->sql_query("INSERT INTO ".$prefix."_shop_usercat (gid, g_uname, g_pid, g_title, g_price,g_count, g_date) VALUES (NULL, '$client', '$goods[pid]', '$goods[title]', '$price', '$counter', '$xdate')"))
echo 1;
}else{
$gidnnn = $g2nnn[gid];
$gcountnnn = $g2nnn[g_count];
// $gcountnnn = $gcountnnn+1;
$gcountnnn = $gcountnnn + $_POST["soluong"];
if($db->sql_query("UPDATE ".$prefix."_shop_usercat SET g_count='$gcountnnn' WHERE gid='$gidnnn'"))
echo 1;
}
}
}
function load__giohang__sanpham(){
global $db, $prefix, $site_live;
$client = base64_decode(set_session());
$data = admin__data__ShopOrders($client);
if(empty($data)){
echo '<div class="cart-empty">Giỏ hàng của bạn đang trống!</div>';
return;
}
$sum = 0;
$total_items = count($data);
// Thêm class 'cart-scroll' nếu danh sách vượt quá 5 sản phẩm
$scroll_class = ($total_items > 5) ? ' cart-scroll' : '';
echo '<div class="card-global-out'.$scroll_class.'">';
foreach ($data as $key => $value) {
$price = (float)$value['g_price'];
$gid = $value['gid'];
$title = $value['g_title'];
$count = (int)$value['g_count'];
$total = $count * $price;
$sum += $total;
$dataimg = admin__shopimages($value["g_pid"]);
echo '<div class="card-items" id="cart-item-'.$gid.'">
<div class="items-pic">
<a href="javascript:void(0);">
<img src="'.$site_live.'uploads/shop/pic/'.$dataimg.'" alt="'.htmlspecialchars($title).'">
</a>
</div>
<div class="items-info">
<div class="items-title">'.$title.'</div>
<div class="items-price">'.format_price($price).'₫</div>
<!-- Khung điều chỉnh số lượng -->
<div class="cart-qty-box">
<button type="button" class="qty-btn" onclick="updateCartQty('.$gid.', '.($count - 1).')">-</button>
<input type="number" class="qty-input" value="'.$count.'" min="1" onchange="updateCartQty('.$gid.', this.value)">
<button type="button" class="qty-btn" onclick="updateCartQty('.$gid.', '.($count + 1).')">+</button>
</div>
</div>
<div class="items-right-box">
<div class="items-delete" onclick="deleteCartItem('.$gid.')" title="Xóa">×</div>
<div class="items-total">'.format_price($total).'₫</div>
</div>
</div>';
}
echo '</div>';
echo '<div class="cart-sum-box">
<p>Tổng tiền thanh toán</p>
<span class="sum-price">'.format_price($sum).'₫</span>
</div>';
?>
<style type="text/css">
/* Khung chứa danh sách sản phẩm */
.card-global-out {
display: flex;
flex-direction: column;
gap: 12px;
}
/* CSS Cuộn tự động khi giỏ hàng có trên 5 sản phẩm */
.card-global-out.cart-scroll {
max-height: 430px; /* Giới hạn chiều cao cho 5 sản phẩm */
overflow-y: auto;
padding-right: 5px;
}
/* Tùy chỉnh thanh cuộn đẹp mắt */
.card-global-out.cart-scroll::-webkit-scrollbar {
width: 5px;
}
.card-global-out.cart-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.card-global-out.cart-scroll::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 4px;
}
.card-global-out.cart-scroll::-webkit-scrollbar-thumb:hover {
background: #999;
}
/* Item giỏ hàng */
.card-items {
display: flex;
align-items: center;
padding: 10px;
background: #fff;
border: 1px solid #eee;
border-radius: 8px;
gap: 10px;
}
.items-pic {
width: 55px;
height: 55px;
flex-shrink: 0;
border-radius: 6px;
overflow: hidden;
border: 1px solid #eee;
}
.items-pic img {
width: 100%;
height: 100%;
object-fit: cover;
}
.items-info {
flex: 1;
min-width: 0;
}
.items-title {
font-size: 13px;
font-weight: 600;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.items-price {
font-size: 12px;
color: #777;
margin: 2px 0 4px;
}
/* Bố cục bộ tăng giảm số lượng */
.cart-qty-box {
display: inline-flex;
align-items: center;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
height: 24px;
}
.qty-btn {
width: 24px;
height: 100%;
background: #f5f5f5;
border: none;
cursor: pointer;
font-weight: bold;
font-size: 14px;
line-height: 1;
color: #333;
}
.qty-btn:hover {
background: #e0e0e0;
}
.qty-input {
width: 32px;
height: 100%;
border: none;
text-align: center;
font-size: 12px;
font-weight: bold;
-moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Cột bên phải (Thành tiền & Xóa) */
.items-right-box {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
height: 55px;
}
.items-delete {
color: #bbb;
font-size: 18px;
cursor: pointer;
line-height: 1;
}
.items-delete:hover {
color: #da1111;
}
.items-total {
font-size: 13px;
font-weight: bold;
color: #da1111;
}
/* Khung tổng tiền bên dưới */
.cart-sum-box {
margin-top: 15px;
padding-top: 12px;
border-top: 2px dashed #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-sum-box p {
margin: 0;
font-weight: 500;
}
.cart-sum-box .sum-price {
font-size: 16px;
font-weight: bold;
color: #da1111;
}
</style>
<?php
}
case "load_cart_drawer_ajax":
load__giohang__sanpham();
break;
function popup__giohang(){
echo'
<div id="cart-drawer-overlay" onclick="closeCartDrawer()"></div>
<div id="cart-drawer" class="cart-drawer">
<div class="cart-drawer-header">
<h3>Giỏ hàng của bạn</h3>
<button type="button" class="cart-drawer-close" onclick="closeCartDrawer()">×</button>
</div>
<div class="cart-drawer-body">';
// load__giohang(); tai day
echo'<div id="fadein_fadeout"></div>
</div>
<div class="cart-drawer-footer">
<a href="/mua-hang" class="btn-checkout">Tiến hành thanh toán</a>
</div>
</div>';
?>
<style type="text/css">
#xgiohang{
cursor: pointer;
}
#cart-drawer-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 99998;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
#cart-drawer-overlay.active {
opacity: 1;
visibility: visible;
}
/* Khung Drawer Giỏ hàng góc phải */
.cart-drawer {
position: fixed;
top: 0;
right: -320px; /* Ẩn sang lề phải */
width: 300px;
height: 100%;
background: #fff;
z-index: 9999999999;
box-shadow: -4px 0 15px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Khi mở giỏ hàng */
.cart-drawer.open {
right: 0;
}
/* Header giỏ hàng */
.cart-drawer-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
border-bottom: 1px solid #eee;
background: #f8f9fa;
}
.cart-drawer-header h3 {
margin: 0;
font-size: 16px;
font-weight: bold;
color: #333;
}
.cart-drawer-close {
background: none;
border: none;
font-size: 24px;
line-height: 1;
color: #888;
cursor: pointer;
padding: 0 5px;
}
.cart-drawer-close:hover {
color: #da1111;
}
/* Nội dung giỏ hàng */
.cart-drawer-body {
flex: 1;
padding: 15px;
overflow-y: auto;
}
/* Footer nút thanh toán */
.cart-drawer-footer {
padding: 15px;
border-top: 1px solid #eee;
background: #fff;
}
.btn-checkout {
display: block;
text-align: center;
background: #da1111;
color: #fff;
padding: 10px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background 0.2s;
}
.btn-checkout:hover {
background: #b50e0e;
color: #fff;
}
</style>
<script type="text/javascript">
function toggleCartDrawer() {
var drawer = document.getElementById('cart-drawer');
var overlay = document.getElementById('cart-drawer-overlay');
if (drawer && overlay) {
drawer.classList.toggle('open');
overlay.classList.toggle('active');
}
}
// Hàm đóng giỏ hàng (dùng cho nút x và overlay)
function closeCartDrawer() {
var drawer = document.getElementById('cart-drawer');
var overlay = document.getElementById('cart-drawer-overlay');
if (drawer && overlay) {
drawer.classList.remove('open');
overlay.classList.remove('active');
}
}
document.addEventListener('DOMContentLoaded', function() {
var xgiohangBtn = document.getElementById('xgiohang');
if (xgiohangBtn) {
xgiohangBtn.addEventListener('click', function(e) {
e.preventDefault();
toggleCartDrawer();
});
}
});
</script>
<?php
}
## theme.php
chứa hàm popup__giohang
