Các bạn đã từng sử dụng qua Elementor sẽ có các element có thể kéo một sản phẩm đến một vị trí nào đó mà bạn mong muốn. Nhưng sử dụng theme flatsome thì các bạn không thể nào kéo một sản phẩm ra ngoài một section mà có cả thumbnail.
Hôm nay mình sẽ hướng dẫn các bạn code một shortcode để có thể lấy ra một sản phẩm và chèn vào vị trí mà bạn mong muốn
Hướng dẫn code functions.php
Đặt đoạn code sau vào file functions.php
function danpham_album_shortcode($atts) {
// Lấy tham số từ shortcode
$atts = shortcode_atts(array(
'id' => 0, // Mặc định ID = 0 nếu không truyền vào
), $atts, 'danpham_album');
$product_id = intval($atts['id']);
// Kiểm tra nếu ID không hợp lệ
if ($product_id <= 0) {
return '<p>Vui lòng cung cấp ID sản phẩm hợp lệ.</p>';
}
// Lấy thông tin sản phẩm từ WooCommerce (giả sử bạn dùng WooCommerce)
$product = wc_get_product($product_id);
if (!$product) {
return '<p>Sản phẩm không tồn tại.</p>';
}
// Lấy tiêu đề, giá, và URL sản phẩm
$product_title = $product->get_name();
$product_price = $product->get_price_html();
$product_url = get_permalink($product_id);
// Lấy hình đại diện và các hình ảnh trong album (gallery)
$main_image = wp_get_attachment_image_url($product->get_image_id(), 'full');
$gallery_image_ids = $product->get_gallery_image_ids();
$gallery_images = array();
// Thêm hình đại diện chính vào danh sách gallery
if ($main_image) {
$gallery_images[] = $main_image;
}
// Thêm các hình ảnh khác từ gallery
foreach ($gallery_image_ids as $image_id) {
$image_url = wp_get_attachment_image_url($image_id, 'thumbnail');
if ($image_url) {
$gallery_images[] = $image_url;
}
}
// Kiểm tra nếu không có hình ảnh
if (empty($gallery_images)) {
return '<p>Sản phẩm không có hình ảnh.</p>';
}
// Tạo HTML cho album
ob_start();
?>
<div class="danpham-album">
<a href="<?php echo esc_url($product_url); ?>"> <h2><?php echo esc_html($product_title); ?></h2> </a>
<?php if (!empty($product_price)) : ?>
<div class="product-price">
<p>Giá: <span><?php echo $product_price; ?> </span> </p>
</div>
<?php endif; ?>
<!-- Hình đại diện chính -->
<div class="main-image">
<img src="<?php echo esc_url($gallery_images[0]); ?>" alt="<?php echo esc_attr($product_title); ?>" id="mainImage">
</div>
<!-- Các hình thumbnail bên dưới -->
<div class="thumbnail-gallery">
<?php foreach ($gallery_images as $index => $image): ?>
<img src="<?php echo esc_url($image); ?>" alt="Thumbnail <?php echo $index + 1; ?>" class="thumbnail" onclick="changeMainImage('<?php echo esc_url($image); ?>')">
<?php endforeach; ?>
</div>
<!-- Nút xem chi tiết -->
<div class="product-details">
<a href="<?php echo esc_url($product_url); ?>" class="button">Xem chi tiết</a>
</div>
</div>
<!-- JavaScript để thay đổi hình chính khi click vào thumbnail -->
<script>
function changeMainImage(imageUrl) {
document.getElementById('mainImage').src = imageUrl;
}
</script>
<!-- CSS để định dạng giao diện -->
<style>
.danpham-album .woocommerce-Price-amount.amount {
color: #ffd700;
}
.danpham-album .product-price,
.danpham-album h2 {
text-align: left;
}
.danpham-album {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.main-image img {
width: 100%;
height: auto;
border: 1px solid #ddd;
}
.thumbnail-gallery {
display: flex
;
justify-content: left;
gap: 10px;
margin: 10px 0;
}
.thumbnail {
width: 100px;
height: 100px;
object-fit: cover;
cursor: pointer;
border: 1px solid #ddd;
border-radius: 0 !important;
}
.thumbnail:hover {
border-color: #0073aa;
}
.product-price {
font-size: 18px;
margin: 10px 0;
}
.product-details .button {
display: inline-block;
padding: 10px 20px;
background-color: #0073aa;
color: #fff;
text-decoration: none;
border-radius: 5px;
}
.product-details .button:hover {
background-color: #005d87;
}
.product-details .button {
display: inline-block;
padding: 10px 20px;
background-color: #ffd700;
color: #000000;
text-decoration: none;
border-radius: 5px;
margin-top: -125px;
right: -400px;
}
</style>
<?php
return ob_get_clean();
}
// Đăng ký shortcode
add_shortcode('product_album', 'danpham_album_shortcode');Như vậy là bạn đã hoàn thiện một shortcode để lấy ra một sản phẩm.
Để có thể sử dụng đoạn code trên bạn chèn shortcode bên dưới vào nơi mà bạn muốn hiển thị
[product_album id=123]
Trong đó 123 id của sản phẩm mà bạn muốn lấy ra.
