File: /home/dkhp464/public_html/wp-content/themes/DaKhoaHongPhat/blocks/zalo-chat.php
<div class="show-for-small d-lg-none">
<div
id="custom-zalo-popup"
style="
position: fixed;
top: -120px;
left: 50%;
transform: translateX(-50%);
max-width: 800px;
width: 100%;
background-color: rgba(45, 45, 45, 0.9);
color: rgb(235, 235, 235);
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 12px;
z-index: 99999;
visibility: hidden;
opacity: 0;
cursor: pointer;
transition: top 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
opacity 0.5s ease-in-out, visibility 0s linear 0.7s;
"
>
<div
class="popup-inner-container"
style="
display: flex;
align-items: center;
padding: 12px 15px;
position: relative;
"
>
<img
width="1240"
height="1260"
src="<?= get_template_directory_uri() ?>/image/logo-zalo.png"
alt="Zalo Icon"
style="
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 12px;
flex-shrink: 0;
"
data-lazy-src="<?= get_template_directory_uri() ?>/image/logo-zalo.png"
data-ll-status="loaded"
class="entered lazyloaded"
/><noscript
><img
width="1240"
height="1260"
src="<?= get_template_directory_uri() ?>/image/logo-zalo.png"
alt="Zalo Icon"
style="
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 12px;
flex-shrink: 0;
"
/></noscript>
<div
class="text-content-wrapper"
style="flex-grow: 1; margin-right: 25px; text-align: start"
>
<span
style="
font-weight: bold;
font-size: 15px;
color: rgb(255, 255, 255);
line-height: 1.2;
display: block;
"
>Zalo</span
>
<p
style="
margin: 4px 0 0 0;
font-size: 14px;
line-height: 1.3;
color: rgb(240, 240, 240);
"
>
Bạn có tin nhắn mới.
</p>
</div>
<span
class="popup-close"
onclick="event.stopPropagation(); closeCustomPopup(true);"
onmouseover="this.style.color='rgb(255,255,255)';"
onmouseout="this.style.color='rgb(190,190,190)';"
style="
position: absolute;
top: 8px;
right: 10px;
cursor: pointer;
font-size: 22px;
font-weight: normal;
color: rgb(190, 190, 190);
line-height: 1;
"
>
×
</span>
</div>
<audio
id="popup-sound"
src="<?= get_template_directory_uri() ?>/image/chuongZalo.mp3"
preload="auto"
></audio>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const popup = document.getElementById("custom-zalo-popup");
if (!popup) {
console.error(
"Popup Zalo: Không tìm thấy phần tử #custom-zalo-popup."
);
return;
}
const sound = document.getElementById("popup-sound");
function prepareSoundPermission() {
if (sound) {
sound.play().then(() => {
sound.pause(); // Ngừng phát
sound.currentTime = 0; // Reset
console.log("Popup Zalo: Âm thanh đã được trình duyệt cho phép.");
}).catch((error) => {
console.warn("Popup Zalo: Không thể mồi âm thanh.", error);
});
}
document.removeEventListener("click", prepareSoundPermission);
document.removeEventListener("touchstart", prepareSoundPermission);
}
document.addEventListener("click", prepareSoundPermission);
document.addEventListener("touchstart", prepareSoundPermission);
const messageElement = popup.querySelector(
".text-content-wrapper p"
);
// --- CẤU HÌNH ---
// QUAN TRỌNG: Giờ đây mỗi mục là một đối tượng (object) chứa 'message' và 'link'
// Bạn có thể tùy chỉnh nội dung và link cho từng popup tại đây.
const popupItems = [
{
message: "Bạn có tin nhắn mới.",
link: "<?=LIVE_CHAT?>", // <-- Link cho tin nhắn 1
},
{
message: "Em cần hỗ trợ hay tư vấn không?",
link: "<?=LIVE_CHAT?>", // <-- Link cho tin nhắn 2
},
{
message: "Alo?",
link: "<?=LIVE_CHAT?>", // <-- Link cho tin nhắn 3
},
{
message: "Em còn đó không?",
link: "<?=LIVE_CHAT?>", // <-- Link cho tin nhắn 4
},
{
message: "Hãy chat trực tiếp với chúng tôi nhé!",
link: "<?=LIVE_CHAT?>", // <-- Link cho tin nhắn 5
},
];
const DELAY_TO_SHOW_FIRST_TIME = 12000; // 12 giây
const DELAY_TO_AUTOCLOSE = 10000; // 10 giây
const DELAY_TO_REPEAT_SHOW = 15000; // 15 giây
const POPUP_HIDDEN_TOP = "-120px";
// const ZALO_LINK = '...'; // Biến này không còn cần thiết vì mỗi popup có link riêng
// --- KẾT THÚC CẤU HÌNH ---
let autoCloseTimer = null;
let repeatShowTimer = null;
let currentItemIndex = 0;
// Hàm xóa timer tự động đóng
function clearAutoCloseTimer() {
if (autoCloseTimer) clearTimeout(autoCloseTimer);
autoCloseTimer = null;
}
// Hàm xóa timer lặp lại
function clearRepeatShowTimer() {
if (repeatShowTimer) clearTimeout(repeatShowTimer);
repeatShowTimer = null;
}
// Hàm lên lịch hiển thị popup tiếp theo
function scheduleShowPopup(delay) {
clearRepeatShowTimer();
repeatShowTimer = setTimeout(showCustomPopup, delay);
}
// Hàm chính: Hiển thị popup
function showCustomPopup() {
if (!popup || !messageElement) return;
clearAutoCloseTimer();
clearRepeatShowTimer();
// Cập nhật nội dung cho popup từ thuộc tính 'message' của object
messageElement.textContent = popupItems[currentItemIndex].message;
// Hiển thị popup với hiệu ứng
popup.style.visibility = "visible";
popup.style.opacity = "1";
popup.style.top = "0px";
popup.style.transition =
"top 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.5s ease-in-out, visibility 0s linear 0s";
// Phát âm thanh
if (sound) {
sound
.play()
.catch((error) =>
console.warn(
"Popup Zalo: Lỗi tự động phát âm thanh.",
error
)
);
}
console.log(
`Popup Zalo: Đang hiển thị item #${currentItemIndex}: "${popupItems[currentItemIndex].message}"`
);
// Tự động đóng sau một khoảng thời gian
autoCloseTimer = setTimeout(() => {
if (popup.style.opacity === "1") {
closeCustomPopup(false);
}
}, DELAY_TO_AUTOCLOSE);
}
// Hàm đóng popup
window.closeCustomPopup = function (isManuallyClosed = false) {
clearAutoCloseTimer();
if (!popup) return;
popup.style.opacity = "0";
popup.style.top = POPUP_HIDDEN_TOP;
popup.style.transition =
"top 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.5s ease-in-out, visibility 0s linear 0.7s";
setTimeout(() => {
if (popup.style.opacity === "0")
popup.style.visibility = "hidden";
}, 700);
if (isManuallyClosed) {
console.log("Popup Zalo: Người dùng đã đóng.");
}
// Chuyển sang item tiếp theo, quay vòng lại nếu hết mảng
currentItemIndex = (currentItemIndex + 1) % popupItems.length;
// Lên lịch hiển thị lại popup tiếp theo
scheduleShowPopup(DELAY_TO_REPEAT_SHOW);
};
// --- XỬ LÝ SỰ KIỆN CLICK ---
popup.addEventListener("click", function (event) {
if (event.target.classList.contains("popup-close")) {
return;
}
console.log(`Popup Zalo: Click vào item #${currentItemIndex}.`);
// Gửi yêu cầu AJAX để đếm lượt click (nếu cần)
// Lưu ý: zaloPopupData.nonce và zaloPopupData.ajax_url cần được định nghĩa đúng cách từ PHP
if (typeof zaloPopupData !== "undefined") {
const formData = new FormData();
formData.append("action", "track_zalo_popup_click");
formData.append("nonce", zaloPopupData.nonce);
formData.append("item_index", currentItemIndex);
fetch(zaloPopupData.ajax_url, {
method: "POST",
body: formData,
})
.then((response) => response.json())
.then((data) => {
if (data.success) {
console.log(
"Popup Zalo: Ghi nhận lượt click thành công."
);
} else {
console.error(
"Popup Zalo: Lỗi khi ghi nhận lượt click.",
data.data.message
);
}
})
.catch((error) =>
console.error("Popup Zalo: Lỗi AJAX.", error)
);
}
// Lấy link tương ứng với popup đang hiển thị
const currentLink = popupItems[currentItemIndex].link;
// Mở link trong tab mới
window.open(currentLink, "_blank");
// Đóng popup sau khi click
closeCustomPopup(true);
});
// Bắt đầu chu trình
console.log(
`Popup Zalo: Chờ ${
DELAY_TO_SHOW_FIRST_TIME / 1000
} giây để hiển thị lần đầu...`
);
setTimeout(showCustomPopup, DELAY_TO_SHOW_FIRST_TIME);
});
</script>
<style>
.show-for-small{
display: none;
}
@media (max-width: 768px) {
.show-for-small {
display: block;
}
}
</style>
</div>