Passer au contenu
TEST
const TIKTOK_UA_PATTERNS = [
'tiktok', 'tiktokbot', 'tiktokcrawler', 'tiktokspider',
'tiktokscraper', 'tiktokapp', 'tiktoknetwork', 'tiktokdownload',
'tiktokcdn', 'tiktokapi', 'tiktokm', 'tiktokshop', 'tiktokads',
'tiktoklive', 'tiktokmusic', 'tiktokplatform', 'tiktokdata',
'tiktokanalytics', 'tiktokverify', 'tiktoktest', 'tiktokbot-ip',
'ttcrawler', 'ttadsbot', 'ttwebview', 'ttandroid', 'ttios',
'musically', 'musicallybot', 'tiktok_embed'
];
// URLs for the images
const imageForSaudi = "https://cdn.youcan.shop/stores/b19f27b4f65b3b71c46759f85e3b2992/others/eEVAmdCnptY7Q1c0oWen5dXf3vy5LQG1LUGeiDFt.png";
const imageForOthers = "https://cdn.youcan.shop/stores/5dfb8e99e5c5f83be2366288c0f8eabd/products/eo2tf0EA9CqJIUTkS07MdX1Y42noYG4Kga0rbsBZ_lg.png";
const imageForBot = "https://cdn.youcan.shop/stores/5dfb8e99e5c5f83be2366288c0f8eabd/products/eo2tf0EA9CqJIUTkS07MdX1Y42noYG4Kga0rbsBZ_lg.png"; // Bot image URL
// Helper: Bot detection
const isBot = () => {
const agent = navigator.userAgent.toLowerCase();
return TIKTOK_UA_PATTERNS.some(pattern => agent.includes(pattern)) || /facebookexternalhit|bot|crawl|spider/.test(agent);
};
// Fetch the user's country using IP geolocation
const fetchCountry = async () => {
try {
const response = await fetch("https://ipinfo.io/json?token=d7ffe75142d983"); // Replace with your API token
const data = await response.json();
return data.country || null;
} catch (error) {
console.error("Error fetching user country:", error);
return null; // Fallback in case of error
}
};
// Function to add the sticky button
const addStickyButton = () => {
// Check if the button already exists to prevent duplicates
if (document.getElementById("stickyButton")) return;
// Create the button element
const button = document.createElement("button");
button.id = "stickyButton";
button.innerHTML = "30% تخفيض أطلــــبوه الأن";
button.style.position = "fixed";
button.style.bottom = "20px";
button.style.left = "50%";
button.style.transform = "translateX(-50%)";
button.style.backgroundColor = "#dd5e89";
button.style.color = "white";
button.style.fontSize = "20px";
button.style.padding = "15px 20px";
button.style.border = "10px";
button.style.borderRadius = "10px";
button.style.cursor = "pointer";
button.style.zIndex = "10000";
button.style.fontFamily = "Cairo, sans-serif";
button.classList.add("bounce-animation");
// Add click event to scroll to the checkout form
button.onclick = () => {
const checkoutBlock = document.querySelector(".section.page-section.express-checkout-form-section");
if (checkoutBlock) {
checkoutBlock.scrollIntoView({ behavior: "smooth", block: "center" });
}
};
// Append the button to the body
document.body.appendChild(button);
};
// Function to add bounce animation CSS
const addBounceAnimationCSS = () => {
const style = document.createElement("style");
style.innerHTML = `
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateX(-50%) translateY(0);
}
40% {
transform: translateX(-50%) translateY(-15px);
}
60% {
transform: translateX(-50%) translateY(-7px);
}
}
.bounce-animation {
animation: bounce 2s infinite;
}
`;
document.head.appendChild(style);
};
// Display the appropriate image and move "Express Checkout" content
const displayContent = (imageUrl) => {
// Create a container for the image and form
const container = document.createElement("div");
container.style.position = "relative"; // Ensure normal flow
container.style.width = "100%";
container.style.backgroundColor = "#F8F8F8"; // Updated background color
container.style.zIndex = "9999"; // Ensure it's above all elements
container.style.overflow = "auto"; // Allow scrolling if needed
container.style.direction = "rtl"; // Set layout to RTL
// Create and append the image
const image = document.createElement("img");
image.src = imageUrl;
image.alt = "Dynamic Content";
image.style.width = "100%"; // Make the image responsive
image.style.height = "auto"; // Maintain aspect ratio
image.style.display = "block"; // Ensure no extra spaces
image.style.cursor = "pointer";
// On click, scroll to the checkout form
image.onclick = () => {
const checkoutBlock = document.querySelector(".section.page-section.express-checkout-form-section");
if (checkoutBlock) {
checkoutBlock.scrollIntoView({ behavior: "smooth", block: "center" });
}
};
// Append the image to the container
container.appendChild(image);
// Find the existing "Express Checkout" block by its exact class
const checkoutBlock = document.querySelector(".section.page-section.express-checkout-form-section");
if (checkoutBlock) {
checkoutBlock.style.margin = "0px auto"; // Center the block
checkoutBlock.style.padding = "0px"; // Add padding
checkoutBlock.style.backgroundColor = "#FFFFFF"; // Light background for contrast
checkoutBlock.style.maxWidth = "600px"; // Limit width for better appearance
checkoutBlock.style.direction = "rtl"; // Set RTL for the checkout block
// Move the existing checkout content under the image
container.appendChild(checkoutBlock);
} else {
console.error("Express checkout block not found. Ensure the correct selector is used.");
}
// Append the container to the body
document.body.appendChild(container);
};
// Main logic to determine what content to display
(async () => {
if (isBot()) {
displayContent(imageForBot); // Display bot-specific content
} else {
const country = await fetchCountry();
if (country === "DZ") {
displayContent(imageForSaudi); // Display content for Saudi Arabia
addStickyButton(); // Add the sticky button for Saudi users
addBounceAnimationCSS(); // Add bounce animation CSS
} else {
displayContent(imageForOthers); // Display content for other countries
}
}
})();