Thủ thuật wordpress

Sharecode slider sản phẩm đã xem wordpress

Đăng vào Tháng 12 27, 2024 bởi admin

admin

27/12/2024

3 Phút đọc

155 Lượt xem

Đánh giá

Tại sao nên thêm slider sản phẩm đã xem?

1. Tăng thời gian người dùng ở lại website

Khi khách truy cập thấy lại những sản phẩm họ đã xem trước đó, họ sẽ có xu hướng quay lại, khám phá thêm hoặc hoàn tất mua hàng.

2. Cải thiện trải nghiệm mua sắm

Slider sản phẩm đã xem giúp khách hàng dễ dàng tiếp cận lại các sản phẩm yêu thích mà không cần phải tìm kiếm từ đầu.

Hướng dẫn tích hợp slider sản phẩm đã xem

Sharecode slider sản phẩm đã xem wordpress

Thêm code vào file functions.php

Để bắt đầu, thêm đoạn code dưới đây vào file functions.php trong theme WordPress của bạn.

// Bắt đầu session để sử dụng session cho lưu trữ dữ liệu
if (!session_id()) {
    session_start();
}

// Shortcode for Viewed Products Slider
function viewed_products_slider_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'limit' => 10, // Number of products to show
        ),
        $atts,
        'viewed_products_slider'
    );

    // Kiểm tra nếu có session lưu trữ các sản phẩm đã xem
    $viewed_products = isset($_SESSION['viewed_products']) ? $_SESSION['viewed_products'] : array();

    if (empty($viewed_products)) {
        return '<p>Bạn chưa xem sản phẩm nào.</p>';
    }

    // Lấy sản phẩm từ database dựa trên danh sách các sản phẩm đã xem
    $args = array(
        'post_type' => 'product',
        'posts_per_page' => intval($atts['limit']),
        'post__in' => $viewed_products,
        'orderby' => 'post__in',
    );

    $viewed_query = new WP_Query($args);
    if (!$viewed_query->have_posts()) return '<p>Bạn chưa xem sản phẩm nào.</p>';

    ob_start(); ?>
        <style>
/* Styles for the viewed products slider */
.viewed-products-slider .product-slide {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border: 1px solid #eee;
    background: #fff;
    text-align: center;
    margin: 3px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.viewed-products-slider .product-slide:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Add a similar badge for "Sản phẩm đã xem" */
.viewed-products-slider .viewed-label {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ff0000; /* Red background */
    color: #fff;
    padding: 5px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 5px;
}

/* Other viewed products styles */
.viewed-products-slider .box-image {
    height: 300px; /* Fixed height to match flash-sale slider */
    overflow: hidden;
}

.viewed-products-slider .box-image img {
    width: 100%;
    transition: transform 5s ease; /* Image slide effect */
}

.viewed-products-slider .box-image:hover img {
    transform: translateY(-50%); /* Image slides up */
}

.viewed-products-slider h3 {
    font-size: 16px;
    height: 40px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.viewed-products-slider .price {
    margin-top: auto;
    font-size: 18px;
    color: #333;
}

.viewed-products-slider .thongtin {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.viewed-products-slider .nut {
    background-color: #ffa800;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.viewed-products-slider .nut:hover {
    background-color: #005a87;
}

/* Responsive design */
@media (max-width: 1024px) {
    .viewed-products-slider .product-slide {
        width: 100%; /* Ensure product occupies full width */
    }
}

@media (max-width: 768px) {
    .viewed-products-slider .product-slide {
        width: 45%; /* Adjust width for smaller screens */
    }
}

@media (max-width: 480px) {
    .viewed-products-slider .product-slide {
        width: 100%; /* Ensure product occupies full width on very small screens */
    }
}
/* Label for "Sản phẩm đã xem" */
.viewed-products-slider .viewed-label {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ff0000; /* Red background for the label */
    color: #fff;
    padding: 5px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 5px;
    z-index: 2; /* Ensure label is above the product */
}

    </style>

    <div class="viewed-products-slider">
        <?php while ($viewed_query->have_posts()) : $viewed_query->the_post(); global $product; ?>
            <div class="product-slide">
                <div class="viewed-label">Sản phẩm đã xem</div>
                <a href="<?php the_permalink(); ?>">
                    <div class="box-image"><?php echo woocommerce_get_product_thumbnail(); ?></div>
                    <h3><?php the_title(); ?></h3>
                    <div class="price"><?php echo $product->get_price_html(); ?></div>
                </a>
                <div class="thongtin">
                    <a class="xemdemo nut" href="<?php the_permalink(); ?>">Xem Demo</a>
                    <a class="xemchitiet nut" href="<?php the_permalink(); ?>">Xem chi tiết</a>
                </div>
            </div>
        <?php endwhile; ?>
    </div>

    <script>
        jQuery(document).ready(function($) {
            // Initialize the slider for viewed products
            $('.viewed-products-slider').slick({
                slidesToShow: 4,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 2000,
                arrows: true,
                dots: true,
                responsive: [
                    { breakpoint: 768, settings: { slidesToShow: 2, slidesToScroll: 1, dots: false } },
                    { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1, dots: false } }
                ]
            });
        });
    </script>

    <?php wp_reset_postdata(); ?>
    <?php return ob_get_clean();
}

add_shortcode('viewed_products_slider', 'viewed_products_slider_shortcode');

// Hàm để thêm sản phẩm vào danh sách sản phẩm đã xem trong session
function add_product_to_viewed() {
    if (is_product()) {
        // Lấy ID sản phẩm hiện tại
        $product_id = get_the_ID();

        // Lấy danh sách sản phẩm đã xem từ session
        if (!isset($_SESSION['viewed_products'])) {
            $_SESSION['viewed_products'] = array();
        }

        // Thêm sản phẩm vào danh sách nếu chưa có
        if (!in_array($product_id, $_SESSION['viewed_products'])) {
            $_SESSION['viewed_products'][] = $product_id;
        }
    }
}
add_action('template_redirect', 'add_product_to_viewed');

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

// Bắt đầu session để sử dụng session cho lưu trữ dữ liệu

if (!session_id()) {

session_start();

}

// Shortcode for Viewed Products Slider

function viewed_products_slider_shortcode($atts) {

$atts = shortcode_atts(

array(

'limit' => 10, // Number of products to show

$atts,

'viewed_products_slider'

);

// Kiểm tra nếu có session lưu trữ các sản phẩm đã xem

$viewed_products = isset($_SESSION['viewed_products']) ? $_SESSION['viewed_products'] : array();

if (empty($viewed_products)) {

return '<p>Bạn chưa xem sản phẩm nào.</p>';

}

// Lấy sản phẩm từ database dựa trên danh sách các sản phẩm đã xem

$args = array(

'post_type' => 'product',

'posts_per_page' => intval($atts['limit']),

'post__in' => $viewed_products,

'orderby' => 'post__in',

);

$viewed_query = new WP_Query($args);

if (!$viewed_query->have_posts()) return '<p>Bạn chưa xem sản phẩm nào.</p>';

ob_start(); ?>

<style>

/* Styles for the viewed products slider */

.viewed-products-slider .product-slide {

display: flex;

flex-direction: column;

justify-content: space-between;

align-items: center;

padding: 10px;

border: 1px solid #eee;

background: #fff;

text-align: center;

margin: 3px;

overflow: hidden;

border-radius: 10px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

transition: transform 0.3s ease, box-shadow 0.3s ease;

position: relative;

}

.viewed-products-slider .product-slide:hover {

transform: translateY(-5px);

box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

}

/* Add a similar badge for "Sản phẩm đã xem" */

.viewed-products-slider .viewed-label {

position: absolute;

top: 10px;

left: 10px;

background: #ff0000; /* Red background */

color: #fff;

padding: 5px;

font-size: 12px;

font-weight: bold;

border-radius: 5px;

}

/* Other viewed products styles */

.viewed-products-slider .box-image {

height: 300px; /* Fixed height to match flash-sale slider */

overflow: hidden;

}

.viewed-products-slider .box-image img {

width: 100%;

transition: transform 5s ease; /* Image slide effect */

}

.viewed-products-slider .box-image:hover img {

transform: translateY(-50%); /* Image slides up */

}

.viewed-products-slider h3 {

font-size: 16px;

height: 40px;

overflow: hidden;

-webkit-line-clamp: 2;

display: -webkit-box;

-webkit-box-orient: vertical;

}

.viewed-products-slider .price {

margin-top: auto;

font-size: 18px;

color: #333;

}

.viewed-products-slider .thongtin {

display: flex;

justify-content: center;

gap: 10px;

}

.viewed-products-slider .nut {

background-color: #ffa800;

color: #fff;

border-radius: 5px;

text-decoration: none;

transition: background-color 0.3s;

}

.viewed-products-slider .nut:hover {

background-color: #005a87;

}

/* Responsive design */

@media (max-width: 1024px) {

.viewed-products-slider .product-slide {

width: 100%; /* Ensure product occupies full width */

}

@media (max-width: 768px) {

.viewed-products-slider .product-slide {

width: 45%; /* Adjust width for smaller screens */

}

@media (max-width: 480px) {

.viewed-products-slider .product-slide {

width: 100%; /* Ensure product occupies full width on very small screens */

}

/* Label for "Sản phẩm đã xem" */

.viewed-products-slider .viewed-label {

position: absolute;

top: 10px;

left: 10px;

background: #ff0000; /* Red background for the label */

color: #fff;

padding: 5px;

font-size: 12px;

font-weight: bold;

border-radius: 5px;

z-index: 2; /* Ensure label is above the product */

}

</style>

<?php while ($viewed_query->have_posts()) : $viewed_query->the_post(); global $product; ?>

<div class="price"><?php echo $product->get_price_html(); ?></div>

</a>

</div>

<?php endwhile; ?>

</div>

jQuery(document).ready(function($) {

// Initialize the slider for viewed products

$('.viewed-products-slider').slick({

slidesToShow: 4,

slidesToScroll: 1,

autoplay: true,

autoplaySpeed: 2000,

arrows: true,

dots: true,

responsive: [

{ breakpoint: 768, settings: { slidesToShow: 2, slidesToScroll: 1, dots: false } },

{ breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1, dots: false } }

]

});

</script>

<?php wp_reset_postdata(); ?>

<?php return ob_get_clean();

}

add_shortcode('viewed_products_slider', 'viewed_products_slider_shortcode');

// Hàm để thêm sản phẩm vào danh sách sản phẩm đã xem trong session

function add_product_to_viewed() {

if (is_product()) {

// Lấy ID sản phẩm hiện tại

$product_id = get_the_ID();

// Lấy danh sách sản phẩm đã xem từ session

if (!isset($_SESSION['viewed_products'])) {

$_SESSION['viewed_products'] = array();

}

// Thêm sản phẩm vào danh sách nếu chưa có

if (!in_array($product_id, $_SESSION['viewed_products'])) {

$_SESSION['viewed_products'][] = $product_id;

}

add_action('template_redirect', 'add_product_to_viewed');

Lưu ý khi sử dụng

Kiểm tra khả năng tương thích

Đảm bảo kiểm tra chức năng slider trên các thiết bị khác nhau như điện thoại, máy tính bảng và máy tính bàn để mang lại trải nghiệm tốt nhất.

Sử dụng caching hợp lý

Để tránh ảnh hưởng đến tốc độ tải trang, bạn nên tối ưu hóa caching khi lưu trữ thông tin sản phẩm đã xem.

Kết luận

Tính năng slider sản phẩm đã xem không chỉ nâng cao trải nghiệm người dùng mà còn giúp tăng tỷ lệ chuyển đổi cho website. Với hướng dẫn chi tiết trên, bạn có thể dễ dàng tích hợp tính năng này vào WordPress. Thử ngay và cảm nhận sự khác biệt!

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Cách tạo trang hàng loạt tự động không cần plugin 2025

Trong quá trình phát triển website WordPress, việc cần tạo nhiều trang dịch vụ hoặc trang sản phẩm tương tự nhau là điều phổ biến....
Bật tính năng đánh giá sản phẩm WooCommerce chỉ với vài dòng code

Nếu bạn đang sử dụng WooCommerce để xây dựng website bán hàng và muốn bật tính năng đánh giá sản phẩm cho tất cả sản...
🔥 TOP 10+ ĐOẠN CODE FLATSOME CỰC HAY GIÚP WEBSITE MƯỢT, NHẸ, CHUẨN SEO

Bạn đang sử dụng theme Flatsome cho website WordPress? Bạn muốn tối ưu hiệu năng, giao diện và trải nghiệm người dùng mà không cần...
Sharecode chức năng quảng cáo bài viết wordpress

Bạn đang tìm kiếm giải pháp quảng bá bài viết hiệu quả ngay trên chính website WordPress của mình? Hãy khám phá ngay plugin MTWPGR...
Hướng Dẫn Tạo Gallery Video Highlight Chuyên Nghiệp Cho WordPress (Chuẩn YouTube, Chuẩn SEO)

Bạn muốn website WordPress của mình có một khu vực video nổi bật (Video Highlight) đẹp mắt, hiện đại, chuyên nghiệp như YouTube? Bài viết...
Sharecode tạo uxbuider element đẹp wordpress

Để tạo một section khí thế, mãnh liệt, mạnh mẽ, đẹp và cực kỳ bắt mắt cho UX Builder/Flatsome, bạn cần kết hợp các yếu...
Code hệ thống điểm danh và affilate

Bạn đang muốn thêm tính năng điểm danh hàng ngày để tăng tương tác người dùng trên website WordPress? Bài viết này sẽ hướng dẫn...
Hướng Dẫn Cách Làm Menu Chính và Submenu trong WordPress Admin Với License Key

Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách tạo một menu chính trong WordPress với tên “Mua Theme WP Giá Rẻ”, di...
Tự Động Xoá Tất Cả Admin Khác Được Tạo Ra Trái Phép WordPress

Mục LụcTại sao nên thêm slider sản phẩm đã xem?1. Tăng thời gian người dùng ở lại website2. Cải thiện trải nghiệm mua sắmHướng dẫn...
Cách Chống Brute Force và Cảnh Báo Đăng Nhập Cho WordPress (Phần 2)

Bảo mật trang web WordPress của bạn là một yếu tố quan trọng để đảm bảo dữ liệu và thông tin cá nhân của người...
Chia Sẻ Code Tự Động Thêm Giá Và Thanh Toán Cho Bài Viết WordPress

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo một hệ thống thanh toán cho các bài viết trong WordPress, giúp bạn...
Cách chèn nhạc vào website wordpress

Để chèn nhạc vào website WordPress thông qua tệp functions.php, bạn có thể sử dụng một số phương pháp tùy thuộc vào cách bạn muốn...
Code chức năng kiểm tra link nội bộ trong bài viết wordpress

Mục LụcTại sao nên thêm slider sản phẩm đã xem?1. Tăng thời gian người dùng ở lại website2. Cải thiện trải nghiệm mua sắmHướng dẫn...
Code tự in kích thước lên ảnh khi upload ảnh lên website wordpress

Khi upload hình ảnh lên website WordPress, đôi khi bạn muốn tự động in kích thước của ảnh lên chính bức ảnh đó. Điều này...
Code Tự động Cập Nhật Giá Khi Tăng Giảm Số Lượng Trong WooCommerce

Mục LụcTại sao nên thêm slider sản phẩm đã xem?1. Tăng thời gian người dùng ở lại website2. Cải thiện trải nghiệm mua sắmHướng dẫn...
Code chức năng xem thêm và thu gọn cho nội dung sản phẩm WordPress

Mục đích: Đoạn mã dưới đây được thiết kế để tạo ra một nút “Xem thêm” giúp người dùng có thể mở rộng nội dung...