Trần VươngDesign

Hôm nay mình chia sẽ cách làm nút download cho phép gắn 2 link để tải, chờ và nhảy sang link aff. Đây là một đoạn code nhỏ Trần Vương mong chia sẽ đến cộng đồng. Giúp anh em có thể dễ dàng kiếm tiền bằng AFF.

Nếu bạn muốn hợp tác phát triển Aff thì liên hệ với Vương nha.

Demo: https://taphoathongtin.com/theme-flatsome-ban-quyen-sach-update-thuong-xuyen/

Bước 1: Mở Function và chèn đoạn vcode này

function add_download_popup_assets() {
wp_enqueue_script('download-popup-script', get_template_directory_uri() . '/js/download-popup.js', array('jquery'), null, true);
wp_enqueue_style('download-popup-style', get_template_directory_uri() . '/css/download-popup.css');
}
add_action('wp_enqueue_scripts', 'add_download_popup_assets');

function download_popup_shortcode($atts) {
// Thiết lập URL của file tải về và tên nút
$atts = shortcode_atts(array(
'file_url' => '',
'button_text' => 'Tải về',
'open_url' => '',
'wait_seconds' => 30
), $atts);

// HTML cho popup
ob_start(); ?>
<div id="downloadPopupOverlay" style="display: none;"></div>
<div id="downloadPopup" style="display: none;">
<p>File của bạn đã sẵn sàng để tải về.</p>
<a id="downloadButton" href="<?php echo esc_url($atts['file_url']); ?>" target="_blank"><?php echo esc_html($atts['button_text']); ?></a>
<button id="closePopup">Đóng</button>
</div>
<button id="initialDownloadButton" data-url="<?php echo esc_url($atts['open_url']); ?>" data-wait-seconds="<?php echo esc_attr($atts['wait_seconds']); ?>"><?php echo esc_html($atts['button_text']); ?></button>
<div id="countdownMessage" style="display: none;">
Đang chờ... <span id="countdownTimer"></span> giây.
</div>
<?php
return ob_get_clean();
}
add_shortcode('download_popup', 'download_popup_shortcode');

Bước 2: Tạo JS và CSS

jQuery(document).ready(function($) {
$('#initialDownloadButton').click(function(e) {
e.preventDefault();
var downloadURL = $(this).data('url');
var waitSeconds = $(this).data('wait-seconds');
var countdown = waitSeconds;
var countdownInterval;

// Hiển thị đếm ngược
$('#initialDownloadButton').hide();
$('#countdownMessage').show();
$('#countdownTimer').text(countdown);

// Mở tab mới với link tải về
var newTab = window.open(downloadURL, '_blank');

// Đóng tab mới sau 5 giây
setTimeout(function() {
if (newTab) {
newTab.close();
}
}, 5000);

// Bắt đầu đếm ngược
countdownInterval = setInterval(function() {
countdown--;
$('#countdownTimer').text(countdown);

if (countdown <= 0) {
clearInterval(countdownInterval);

// Hiển thị popup sau khi thời gian đếm ngược kết thúc
$('#downloadPopupOverlay, #downloadPopup').fadeIn();
}
}, 1000); // Đếm ngược mỗi giây
});

// Khi nhấn vào nút tải về trong popup, tải file và đóng popup
$('#downloadButton').click(function() {
$('#downloadPopupOverlay, #downloadPopup').fadeOut();
});

// Khi nhấn vào nút đóng popup
$('#closePopup').click(function() {
$('#downloadPopupOverlay, #downloadPopup').fadeOut();
});
});

và CSS

#downloadPopupOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}

#downloadPopup {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
}

#downloadButton, #closePopup, #initialDownloadButton {
display: inline-block;
margin-top: 10px;
padding: 10px 20px;
background: #0073aa;
color: #fff;
text-decoration: none;
border: none;
cursor: pointer;
}

#closePopup {
background: #a00;
}

#countdownMessage {
margin-top: 10px;
font-size: 16px;
color: #0073aa;
}

Chúc bạn thành công!
Nếu cần hỗ trợ thì đừng ngại liên hệ với vương!

Có thắc mắc hãy comment bên dưới nha!