https://www.aperol.com/app/themes/campari-wdf/includes/extensions/…/coachella/coachella-scripts.js?ver=34d87

1document.addEventListener("DOMContentLoaded", function () {
2  // Move progress bar inside header
3  const progressBar = document.querySelector('.progress-bar');
4  const headerNav = document.querySelector('.sn_header_nav._full');
5  
6  if (progressBar && headerNav) {
7    headerNav.after(progressBar);
8  } else {
9    console.log('Progress bar not moved; One or both elements not found');
10  }
11
12  // Use globally available countdown value if it exists
13  // Ensure UTC consistency by appending 'Z' if not already present
14  const globalCountdownDatetime = window.countdownDatetime ? 
15    (window.countdownDatetime.endsWith('Z') ? window.countdownDatetime : window.countdownDatetime + 'Z') : null;
16  const globalCountdownTime = globalCountdownDatetime ? new Date(globalCountdownDatetime).getTime() : null;
17  // console.log('Countdown time (UTC):', globalCountdownDatetime ? new Date(globalCountdownTime).toISOString() : 'Not set');
18  
19  const countdownElements = document.querySelectorAll(".coachella-countdown-enabled");
20  const video_stream_placeholder = document.querySelector('#coachella-stream-placeholder');
21  const video_stream = document.querySelector('#coachella-stream');
22
23  // Check if countdown is past due
24  function isCountdownPastDue() {
25    if (!globalCountdownTime) return true; // Default to "past due" if no countdown set
26    const now = new Date().getTime();
27    return now >= globalCountdownTime;
28  }
29
30  // Manage stream visibility based on countdown status
31  function updateStreamVisibility() {
32    const pastDue = isCountdownPastDue();
33    
34    if (video_stream_placeholder) {
35      video_stream_placeholder.classList.toggle('hidden', pastDue);
36    }
37    
38    if (video_stream) {
39      video_stream.classList.toggle('hidden', !pastDue);
40    }
41  }
42
43  // Initial update of stream visibility
44  updateStreamVisibility();
45
46  // Process countdown timer displays
47  if (countdownElements.length && globalCountdownTime) {
48    countdownElements.forEach((element) => {
49      // Use the global countdown value instead of reading from individual elements
50      function updateCountdown() {
51        // Use UTC time for consistency with server-side comparisons
52        const now = new Date().getTime();
53        const timeRemaining = globalCountdownTime - now;
54
55        if (timeRemaining <= 0) {
56          // Only reload if we haven't already done so
57          if (!sessionStorage.getItem("countdownReloaded")) {
58            sessionStorage.setItem("countdownReloaded", "true");
59            
60            // Update visibility before reload
61            updateStreamVisibility();
62            
63            // Use a short delay before reloading to ensure visibility changes take effect
64            setTimeout(() => {
65              location.reload();
66            }, 100);
67          }
68          return;
69        }
70
71        const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
72        const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
73        const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
74        const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
75
76        // Update the DOM
77        const numbers = element.querySelectorAll(".countdown-number");
78        if (numbers.length === 4) {
79          numbers[0].textContent = days;
80          numbers[1].textContent = hours;
81          numbers[2].textContent = minutes;
82          numbers[3].textContent = seconds;
83        }
84      }
85
86      updateCountdown(); // Initial update
87      setInterval(updateCountdown, 1000); // Update every second
88    });
89  } else {
90    console.log('Countdown not found or time not set');
91  }
92
93  // #region SHOPIFY DATA LAYER
94
95  const products = document.querySelectorAll('body.coachella-lp .sn_block_shopify_product_slider .swiper-slide');
96
97  products.forEach(product => {
98    product.querySelector('.sn_slider_products_i_button>a').addEventListener('click', () => {
99        dataLayer.push({
100          'event': 'coachella_interaction', 
101          'interaction_type': 'select product', 
102          'selected_product' : product.querySelector('.sn_slider_products_i_title h2').innerText,
103          'product_page' : product.querySelector('.sn_slider_products_i_button>a').getAttribute('href')
104      })
105    })
106  });
107
108  // #endregion
109
110  // #region SCROLL DATA LAYER
111
112  const sections = Array.from(document.querySelectorAll('body.coachella-lp .sn_site_wrapper>.sn_block'));
113  const sectionNames = [
114      'heart of coachella',
115      'coachella the aperol way',
116      'the official spritz partner',
117      'coachella livestream',
118      'aperol shop',
119      'aperitivo playlist quiz',
120      'aperol sound',
121      'latest news'
122  ]
123  let currentSection = -1;
124
125  // remove cover, ticket and floating button
126  sections.shift();
127  sections.shift();
128  sections.shift();
129
130  const scrollDataLayer = () => {
131      for(let i = sections.length - 1; i > -1; i--) {
132          const clientRect = sections[i].getBoundingClientRect();
133          if(clientRect.top < window.innerHeight / 2 && clientRect.bottom > window.innerHeight / 2) {
134              if(currentSection != i) {
135                  dataLayer.push({
136                      'event': 'coachella_interaction', 
137                      'interaction_type': 'view section', 
138                      'section' : sectionNames[i]
139                  })
140              }
141              
142              currentSection = i;
143              break;
144          }
145      }
146  }
147
148  window.addEventListener('scroll', () => scrollDataLayer())
149
150  // #endregion
151});