Hướng Dẫn Tạo UX Element Gallery Tích Hợp Nút Affiliate Cho Flatsome

/**
* 1. Tạo Shortcode [ux_gallery_vip] - Cập nhật cho Affiliate Redirect
*/
add_shortcode( 'ux_gallery_vip', function( $atts ) {
$atts = shortcode_atts( array(
'ids' => '', 
), $atts );
if ( empty( $atts['ids'] ) ) {
return '<p style="text-align:center; padding: 50px 0;">Vui lòng chọn hình ảnh cho Gallery VIP.</p>';
}
$_attachments = get_posts( array(
'include' => $atts['ids'],
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image',
'order' => 'ASC',
'orderby' => 'post__in', 
'posts_per_page' => -1
) );
if ( empty( $_attachments ) ) return '';
ob_start();
?>
<div class="lux-single-gach">
<div class="sku-section">
<h4 class="lux-fw-bold lux-title-section">Bảng Mã Sản Phẩm (SKU)</h4>
<div class="lux-gallery" id="lux-gallery-wrapper">
<?php 
foreach ( $_attachments as $attachment ) : 
$sku = ! empty( $attachment->post_excerpt ) ? esc_html( $attachment->post_excerpt ) : 'Đang cập nhật';
$price = ! empty( $attachment->post_content ) ? esc_html( $attachment->post_content ) : 'Liên hệ';
$img_url = wp_get_attachment_image_url( $attachment->ID, 'large' );

/**
* Lấy Link Affiliate từ trường "Văn bản thay thế" (Alt Text)
* Trong ảnh bạn gửi, ô này được đánh dấu là "Mô tả SEO"
*/
$aff_link = get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true );
$aff_link = ! empty( $aff_link ) ? esc_url( $aff_link ) : '#';
?>
<div class="lux-image-item" data-aff-link="<?php echo $aff_link; ?>">
<div class="lux-image-wrapper">
<div class="lux-badge-sku"><?php echo $sku; ?></div>
<div class="lux-badge-price"><?php echo $price; ?></div>
<img src="<?php echo esc_url( $img_url ); ?>" alt="<?php echo esc_attr( $sku ); ?>">
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<div class="lux-preview-box" id="luxPreviewBox">
<div class="lux-preview-details">
<span class="lux-fw-bold">Mẫu <span class="current-img lux-text-gold"></span> / <span class="total-img"></span></span>
<span class="lux-close-icon" id="closeLightbox">&times;</span>
</div>
<div class="lux-image-box">
<div class="lux-badge-sku" id="lb-sku"></div>
<div class="lux-badge-price" id="lb-price"></div>
<div class="lux-slide prev">&#10094;</div>
<div class="lux-slide next">&#10095;</div>
<img src="" alt="Preview" id="lightboxImg">
</div>
<div class="lux-preview-footer">
<button class="lux-btn-gold" id="btnRedirectAff">
<span>&#10148;</span> Mua Ngay / Xem Chi Tiết
</button>
</div>
</div>
<div class="lux-lb-shadow" id="lbShadow"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const images = document.querySelectorAll("#lux-gallery-wrapper .lux-image-item");
if(!images.length) return;
const previewBox = document.getElementById("luxPreviewBox"),
previewImg = document.getElementById("lightboxImg"),
lbShadow = document.getElementById("lbShadow"),
lbSku = document.getElementById("lb-sku"),
lbPrice = document.getElementById("lb-price"),
currentImg = previewBox.querySelector(".current-img"),
totalImg = previewBox.querySelector(".total-img"),
closeLbBtn = document.getElementById("closeLightbox"),
btnAff = document.getElementById("btnRedirectAff");
let currentIndex = 0;
let isZoomed = false;
let currentAffLink = "#";
function resetZoom() {
isZoomed = false;
previewImg.classList.remove("zoomed");
previewImg.style.transformOrigin = "center center";
}
function showImage(index) {
resetZoom();
const item = images[index];
previewImg.src = item.querySelector("img").src;
lbSku.innerText = item.querySelector(".lux-badge-sku").innerText;
lbPrice.innerText = item.querySelector(".lux-badge-price").innerText;
// Cập nhật link affiliate từ data attribute
currentAffLink = item.getAttribute('data-aff-link');
currentImg.innerText = index + 1;
totalImg.innerText = images.length;
currentIndex = index;
previewBox.querySelector(".prev").style.display = index === 0 ? "none" : "flex";
previewBox.querySelector(".next").style.display = index === images.length - 1 ? "none" : "flex";
}
// Mở Lightbox
images.forEach((img, i) => {
img.onclick = () => {
showImage(i);
previewBox.classList.add("show");
lbShadow.style.display = "block";
document.body.style.overflow = "hidden";
};
});
// Đóng Lightbox
const closeLightbox = () => {
previewBox.classList.remove("show");
lbShadow.style.display = "none";
document.body.style.overflow = "auto";
resetZoom();
};
closeLbBtn.onclick = closeLightbox;
lbShadow.onclick = closeLightbox;
// Điều hướng ảnh
previewBox.querySelector(".prev").onclick = (e) => { e.stopPropagation(); showImage(currentIndex - 1); };
previewBox.querySelector(".next").onclick = (e) => { e.stopPropagation(); showImage(currentIndex + 1); };
/**
* XỬ LÝ CHUYỂN HƯỚNG AFFILIATE
*/
btnAff.onclick = function() {
if (currentAffLink && currentAffLink !== '#') {
window.open(currentAffLink, '_blank', 'noopener,noreferrer');
} else {
alert('Sản phẩm này hiện chưa có link mua hàng.');
}
};
});
</script>
<?php
return ob_get_clean();
} );
/**
* 2. Đăng ký Element vào Flatsome UX Builder
*/
add_action( 'ux_builder_setup', function() {
add_ux_builder_shortcode( 'ux_gallery_vip', array(
'name' => __( 'Gallery Trang Đơn', 'flatsome-admin' ),
'category' => __( 'Content', 'flatsome-admin' ),
'icon' => 'icon-image', 
'options' => array(
'ids' => array(
'type' => 'gallery',
'heading' => __( 'Chọn hình ảnh', 'flatsome-admin' ),
),
),
) );
} );