JS + CSS Giỏ Hàng

 

## 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">&times;</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()">&times;</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