[WP] Code sản phẩm đã xem sử dụng cookie

Nay mình chia sẽ code sản phẩm đã xem sử dụng cookie của trình duyệt, cho nên khi khách hàng có thoát web ra và tắt trình duyệt đi thì vẫn sẽ lưu lại sản phẩm đã xem của lần trước.
Mình Style tạm, bạn nào có nhu cầu thêm thì cứ style lại nha.
Bạn chỉ cần copy code bỏ vào file functions.php của theme thì sẽ hoạt động được.

Mặc định 5 product gần nhất.

<?php
function script_viewed_product() {
    ?>
        <script>
            // Lấy product ID từ cookie (nếu tồn tại)
            var currentProductIds = getCookieViewed("productViewedIds");
            var isSingle = <?php echo is_single(); ?> || '';
            var getPostType = '<?php echo get_post_type(); ?>' || '';
            var productId = (<?php echo get_the_ID(); ?>).toString() || '';
            // Kiểm tra xem product ID đã tồn tại chưa
            if (isSingle && getPostType === 'product' && productId ) {
                if (currentProductIds) {
                    var productIdsArray = currentProductIds.split(",");
                    if (!productIdsArray.includes(productId)) {
                        productIdsArray.unshift(productId);
                        if (productIdsArray.length > 5) {
                            productIdsArray.splice(5);
                        }
                    }
                } else {
                    var productIdsArray = [productId];
                }
            }
            let uniqueArray = [...new Set(productIdsArray)];
            // Cập nhật cookie với danh sách product IDs mới
            setCookieViewed("productViewedIds", uniqueArray.join(","));

            // Hàm lấy giá trị của cookie
            function getCookieViewed(cookieName) {
                var name = cookieName + "=";
                var decodedCookie = decodeURIComponent(document.cookie);
                var cookieArray = decodedCookie.split(";");
                for (var i = 0; i < cookieArray.length; i++) {
                    var cookie = cookieArray[i];
                    while (cookie.charAt(0) == " ") {
                        cookie = cookie.substring(1);
                    }
                    if (cookie.indexOf(name) == 0) {
                        return cookie.substring(name.length, cookie.length);
                    }
                }
                return "";
            }

            // Hàm thiết lập giá trị cho cookie
            function setCookieViewed(cookieName, cookieValue) {
                var d = new Date();
                d.setTime(d.getTime() + (365 * 24 * 60 * 60 * 1000)); // Thời gian hết hạn của cookie (ở đây là 1 năm)
                var expires = "expires=" + d.toUTCString();
                document.cookie = cookieName + "=" + cookieValue + ";" + expires + ";path=/";
            }
        </script>
        <style>
            #viewed-product {
                position: fixed;
                top: 30%;
                right: -5px;
                box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
                padding: 20px;
                border: 1px dashed gray;
                border-radius: 8px;
                overflow: hidden;
                transition: all 1s ease;
                cursor: pointer;
                z-index: 999999;
            }
            #viewed-product:hover #product-list{
                display: block;
                transition: all 1s ease;
                cursor: pointer;
                width: 300px;
            }
            #product-list {
                transition: width 1s;
                display: none;
                width: 50px;
            }
            #viewed-product .viewed-product-title {
                color: #000000;
                margin-bottom: 0px;
                overflow: hidden;
            }
            #viewed-product .product-item {
                display: flex;
                align-items: center;
                margin-bottom:20px;
                margin-top: 20px;
                border-bottom: 1px dashed gray;
                padding-bottom: 15px;
            }
            #viewed-product .product-item:hover .product-text a{
                color: #e85d00;
            }
            #viewed-product .product-item:last-child {
                margin-bottom: 0;
                border-bottom: none;
                padding-bottom: 0px;
            }
            #viewed-product .product-item .product-thumb a {
                width: 80px;
                height: 100px;
                border-radius: 4px;
                overflow: hidden;
                display: block;
            }
            #viewed-product .product-item .product-thumb a img{
                object-fit: contain;
                display: block;
                width: 100%;
                height: 100%;
            }
            #viewed-product .product-text a{
                font-size: 14px;
                padding-left: 10px;
                color: black;
                line-height: 1.3em;
                font-weight: 400;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        </style>
        <div id="viewed-product">
            <p class="viewed-product-title">Sản phẩm đã xem</p>
            <div id="product-list">
                <?php
                    $productIds = $_COOKIE['productViewedIds'];
                    if (isset($productIds)) {
                        $productIds = explode(",", $productIds);
                        foreach ($productIds as $productId) {
                            echo '<div class="product-item">';
                                echo '<div class="product-thumb">';
                                    echo '<a href="'.get_the_permalink($productId).'"><img src="'.get_the_post_thumbnail_url($productId).'"></a>';
                                echo '</div>';
                                echo '<div class="product-text">';
                                    echo '<a href="'.get_the_permalink($productId).'">'.get_the_title($productId).'</a>';
                                echo '</div>';
                        
                            echo '</div>';
                        }
                    }
                ?>
            </div>
        </div>
    <?php
}

add_action('wp_footer', 'script_viewed_product');

Disclaimer: Bài viết của chỉ nhằm mục đích cung cấp thông tin, kiến thức và bài viết này.

• Facebook:
• Website: