גלה את החנויות שלנו, עקוב אחריהן כדי לדעת מתי הן עולות לשידור חי.
;document.addEventListener('DOMContentLoaded', () => {
// Step 1: Select all buttons with class 'dokan-follow-store-button' that have 'data-vendor-id' attribute
const vendorButtons = document.querySelectorAll('.dokan-follow-store-button[data-vendor-id]');
// Extract the IDs from the data-vendor-id attribute
const vendorIds = Array.from(vendorButtons).map(button => button.getAttribute('data-vendor-id'));
// Log the IDs to the console to ensure they are fetched correctly
console.log('Vendor IDs from UI:', vendorIds);
// Step 2: Fetch all `lives_publics` from the REST API
const apiUrlPublic = 'https://live-discount.com/en/wp-json/wp/v2/public';
const apiUrlPrivate = 'https://live-discount.com/en/wp-json/wp/v2/private';
// Fetch both public and private live data
Promise.all([fetch(apiUrlPublic), fetch(apiUrlPrivate)])
.then(responses => Promise.all(responses.map(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json();
})))
.then(([dataPublic, dataPrivate]) => {
console.log('Fetched `lives_publics` data:', dataPublic); // Log to verify fetched public data
console.log('Fetched `lives_prives` data:', dataPrivate); // Log to verify fetched private data
// Extract relevant fields from `lives_publics` response
const livesPublics = dataPublic.map(item => ({
slug: item.slug,
status: item.status,
type: item.type,
categorieLivePublic: item['categorie-live-public'],
link: item.link,
classList: item.class_list,
titreDuLive: item.acf?.titre_du_live, // Using optional chaining to avoid errors if acf is undefined
refAuthor: item.acf?.ref_author,
idDuLive: item.acf?.id_du_live,
dateDuLive: item.acf?.date_du_live,
dateFinDuLive: item.acf?.date_fin_du_live,
dateFinAccesProduits: item.acf?.date_fin_acces_produits,
produitsDuLivePublic: item.acf?.produits_du_live_public,
refLanguages: item.acf?.ref_languages || [], // New field for languages
}));
// Extract relevant fields from `lives_prives` response
const livesPrives = dataPrivate.map(item => ({
slug: item.slug,
status: item.status,
type: item.type,
categorieLivePrive: item['categorie_live_prive'],
link: item.link,
classList: item.class_list,
titreDuLive: item.acf?.titre_du_live,
refAuthor: item.acf?.ref_author,
idDuLive: item.acf?.id_du_live,
dateDuLive: item.acf?.date_du_live,
dateFinDuLive: item.acf?.date_fin_du_live,
dateFinAccesProduits: item.acf?.date_fin_acces_produits,
produitsDuLivePrive: item.acf?.produits_du_live_prive,
refLanguages: item.acf?.ref_languages || [], // New field for languages
}));
console.log('Extracted `lives_publics` fields:', livesPublics); // Log the extracted fields for verification
console.log('Extracted `lives_prives` fields:', livesPrives); // Log the extracted fields for verification
// Proceed to Step 3: Filter and modify UI based on fetched data
modifyVendorAvatars(vendorIds, livesPublics, livesPrives);
})
.catch(error => console.error('Error fetching `lives_publics` or `lives_prives` data:', error));
});
function modifyVendorAvatars(vendorIds, livesPublics, livesPrives) {
// Loop through each vendor ID
vendorIds.forEach(vendorId => {
// Filter `lives_publics` where `acf.ref_author` matches the vendor ID
const vendorLivesPublics = livesPublics.filter(live => live.refAuthor === vendorId);
// Filter `lives_prives` where `acf.ref_author` matches the vendor ID
const vendorLivesPrives = livesPrives.filter(live => live.refAuthor === vendorId);
// Initialize flags and badge information for public and private lives
let hasPublicBadge = false;
let hasPrivateBadge = false;
let publicBadgeInfo = null;
let privateBadgeInfo = null;
// Initialize seller avatar color, link, and pulse flag
let sellerAvatarColor = '';
let sellerAvatarLink = ''; // Link for the seller avatar anchor element
let shouldPulse = false; // Flag to determine if the avatar and badge should pulse
// Initialize a Set to track added languages for the vendor
const addedLanguages = new Set();
// Select vendor element here
const vendorElement = document.querySelector(`.dokan-follow-store-button[data-vendor-id="${vendorId}"]`);
if (!vendorElement) {
console.error(`Vendor element not found for vendor ID: ${vendorId}`);
return;
}
// Process Public Lives
vendorLivesPublics.forEach(live => {
const categorie = live.categorieLivePublic; // Get `categorie-live-public` value
const dateDuLive = live.dateDuLive; // Get the date of the live event
const liveLink = live.link; // Get the link of the live event
if (categorie[0] === 222 && !hasPublicBadge) { // Now Live for public
publicBadgeInfo = { background: '#4151E7', text: 'LIVE', link: liveLink, shouldPulse: true }; // Public Now Live
sellerAvatarColor = '#4151E7'; // Set avatar color for public
sellerAvatarLink = liveLink; // Set link for the avatar anchor
shouldPulse = true; // Set pulse for "Now Live"
hasPublicBadge = true; // Mark that a public badge has been created
} else if (categorie[0] === 232 && !hasPublicBadge) { // Coming Soon for public
publicBadgeInfo = { background: '#1c1c1c', date: dateDuLive, link: liveLink, shouldPulse: false }; // Public Coming Soon
hasPublicBadge = true; // Mark that a public badge has been created
}
// Add language badges for `lives_publics`, if not already added
live.refLanguages.forEach(language => {
if (!addedLanguages.has(language)) {
addLanguageBadge(vendorElement, language);
addedLanguages.add(language); // Mark this language as added
}
});
});
// Process Private Lives
vendorLivesPrives.forEach(live => {
const categorie = live.categorieLivePrive; // Get `categorie-live-prive` value
const dateDuLive = live.dateDuLive; // Get the date of the private live event
const liveLink = live.link; // Get the link of the private live event
if (categorie[0] === 233 && !hasPrivateBadge) { // Now Live for private
privateBadgeInfo = { background: 'red', text: 'LIVE', link: liveLink, shouldPulse: true }; // Private Now Live
// Set avatar color and link for "Now Live" private, overriding "Coming Soon" public
sellerAvatarColor = 'red'; // Set avatar color for private
sellerAvatarLink = liveLink; // Set link for the avatar anchor
shouldPulse = true; // Set pulse for "Now Live"
hasPrivateBadge = true; // Mark that a private badge has been created
} else if (categorie[0] === 224 && !hasPrivateBadge) { // Coming Soon for private
privateBadgeInfo = { background: '#1c1c1c', date: dateDuLive, link: liveLink, shouldPulse: false }; // Private Coming Soon
hasPrivateBadge = true; // Mark that a private badge has been created
}
// Add language badges for `lives_prives`, if not already added
live.refLanguages.forEach(language => {
if (!addedLanguages.has(language)) {
addLanguageBadge(vendorElement, language);
addedLanguages.add(language); // Mark this language as added
}
});
});
// Update Seller Avatar if there is a "Now Live" event
const sellerAvatar = vendorElement.closest('.dokan-single-seller').querySelector('.store-footer .seller-avatar');
const avatarLink = sellerAvatar.querySelector('a'); // Find the anchor element within sellerAvatar
if (sellerAvatar && sellerAvatarColor && avatarLink) {
sellerAvatar.style.backgroundColor = sellerAvatarColor;
if (shouldPulse) {
avatarLink.href = sellerAvatarLink; // Update the href of the seller-avatar's anchor element if "Now Live"
sellerAvatar.classList.add('pulse-avatar'); // Add pulsing animation if "Now Live"
} else {
sellerAvatar.classList.remove('pulse-avatar'); // Ensure no pulse if not "Now Live"
}
}
// Add public live badge if information is available
if (publicBadgeInfo) {
console.log('Adding public live badge for vendor:', vendorId); // Debug: Ensure this is being called
addLiveBadge(vendorElement, publicBadgeInfo);
}
// Add private live badge if information is available
if (privateBadgeInfo) {
console.log('Adding private live badge for vendor:', vendorId); // Debug: Ensure this is being called
addLiveBadge(vendorElement, privateBadgeInfo);
}
});
}
function addLanguageBadge(vendorElement, language) {
// Find the .store-data-container element within the vendor element
const storeDataContainer = vendorElement.closest('.dokan-single-seller').querySelector('.store-data-container');
// Debugging: Ensure that the storeDataContainer is found
if (!storeDataContainer) {
console.error('storeDataContainer not found for vendor element:', vendorElement);
return;
}
// Determine the flag emoji based on the language
let flagEmoji = '';
switch (language) {
case 'Hebrew':
flagEmoji = '🇮🇱';
break;
case 'French':
flagEmoji = '🇫🇷';
break;
case 'English':
flagEmoji = '🇬🇧';
break;
case 'Russian':
flagEmoji = '🇷🇺';
break;
default:
flagEmoji = ''; // No badge for undefined languages
}
if (flagEmoji) {
// Create the language badge
const languageBadge = document.createElement('div');
languageBadge.className = "language-badge"; // Add a class for styling
languageBadge.textContent = flagEmoji; // Set the badge content to the flag emoji
// Append the language badge to the store data container
storeDataContainer.appendChild(languageBadge);
}
}
function addLiveBadge(vendorElement, badgeInfo) {
// Find the .store-data-container element within the vendor element
const storeDataContainer = vendorElement.closest('.dokan-single-seller').querySelector('.store-data-container');
// Debugging: Ensure that the storeDataContainer is found
if (!storeDataContainer) {
console.error('storeDataContainer not found for vendor element:', vendorElement);
return;
}
// Add the "LIVE" badge if .store-data-container exists
console.log('Creating LIVE badge with background:', badgeInfo.background, 'and link:', badgeInfo.link); // Debug: Log badge creation
const liveBadgeContainer = document.createElement('div');
liveBadgeContainer.className = "live-badge-container"; // Add a class for styling
// Create the anchor element for the "LIVE" badge
const liveBadge = document.createElement('a'); // Create an anchor element
liveBadge.href = badgeInfo.link; // Set href to the link of the live event
liveBadge.className = `live-badge`; // Add a custom class for styling
liveBadge.style.backgroundColor = badgeInfo.background; // Set badge background color
// Set the text or countdown for the live event
if (badgeInfo.shouldPulse) {
liveBadge.innerHTML = `${badgeInfo.text}
`;
liveBadge.classList.add('pulse-badge'); // Add pulse class for badge if "Now Live"
} else {
updateCountdown(liveBadge, badgeInfo.date); // Directly show countdown for "Coming Soon"
}
// Append the anchor to the div container
liveBadgeContainer.appendChild(liveBadge);
// Append the badge container to the store data container
storeDataContainer.appendChild(liveBadgeContainer);
console.log('LIVE badge added to store data container:', storeDataContainer); // Debug: Confirm badge was added
}
function updateCountdown(liveBadge, targetDate) {
const targetTime = new Date(targetDate).getTime();
function updateTimer() {
const now = new Date().getTime();
const distance = targetTime - now;
// Calculate time parts
const days = Math.max(0, Math.floor(distance / (1000 * 60 * 60 * 24)));
const hours = Math.max(0, Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
const minutes = Math.max(0, Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)));
const seconds = Math.max(0, Math.floor((distance % (1000 * 60)) / 1000));
// Display as 00:00:00:00 when the distance is 0 or less
liveBadge.innerHTML = `${days.toString().padStart(2, '0')}d ${hours.toString().padStart(2, '0')}h ${minutes.toString().padStart(2, '0')}m ${seconds.toString().padStart(2, '0')}s`;
// Repeat every second
setTimeout(updateTimer, 1000);
}
updateTimer(); // Initialize the countdown timer
};
