|
|
@@ -34,10 +34,10 @@ window.onload = function () {
|
|
|
// // renderBanner(result);
|
|
|
// });
|
|
|
|
|
|
- $('#navbar').load('https://hhh.com.tw/hhh-test/template/navbar.html');
|
|
|
- $('#footer').load('https://hhh.com.tw/hhh-test/template/footer.html');
|
|
|
- $('#btn-box').load('https://hhh.com.tw/hhh-test/template/button.html');
|
|
|
- $('#topCarousel').load('https://hhh.com.tw/hhh-test/template/top_carousel.html');
|
|
|
+ // $('#navbar').load('https://hhh.com.tw/hhh-test/template/navbar.html');
|
|
|
+ // $('#footer').load('https://hhh.com.tw/hhh-test/template/footer.html');
|
|
|
+ // $('#btn-box').load('https://hhh.com.tw/hhh-test/template/button.html');
|
|
|
+ // $('#topCarousel').load('https://hhh.com.tw/hhh-test/template/top_carousel.html');
|
|
|
};
|
|
|
|
|
|
function hhh_user_api_login() {
|
|
|
@@ -138,7 +138,7 @@ function renderBanner(data) {
|
|
|
adNamesMain.push(adNameMain);
|
|
|
|
|
|
str += `
|
|
|
- <a href="${temp[i]["link"]}" target="_blank" data-ga4="${temp[i]["id"]}${temp[i]["alt"]}">
|
|
|
+ <a href="${temp[i]["link"]}" target="_blank" data-ga4="${temp[i]["id"]}${temp[i]["alt"]}">
|
|
|
<section class="info-item">
|
|
|
<span class="logo-img">
|
|
|
<img class="img-${temp[i].logo_icon} ${temp[i].logo_icon === "" ? "d-none" : ""}" src="./img/index/banner_logo/${temp[i].logo_icon}.png">
|
|
|
@@ -1636,4 +1636,237 @@ $(window).scroll(function () {
|
|
|
} else {
|
|
|
$('.btn-box').fadeOut();
|
|
|
}
|
|
|
+});
|
|
|
+
|
|
|
+// 上方輪播
|
|
|
+$.ajax({
|
|
|
+ method: "get",
|
|
|
+ url: "./json/data_index.json",
|
|
|
+ // url: "https://m3.hhh.com.tw:18689/genjson_new?filename=realtime.json",
|
|
|
+ dataType: "json",
|
|
|
+}).done((data) => {
|
|
|
+ result = [...data];
|
|
|
+ renderTopCarousel(result);
|
|
|
+ console.log('result', result);
|
|
|
+}).fail((error) => {
|
|
|
+ console.log('genjson_new error', error);
|
|
|
+});
|
|
|
+
|
|
|
+// 渲染頂部輪播
|
|
|
+function renderTopCarousel(data) {
|
|
|
+ let temp = data[0]["data"];
|
|
|
+ console.log('temp', temp);
|
|
|
+ renderBullet(temp);
|
|
|
+ renderBannerStr("slider-content", temp);
|
|
|
+ let randomInt = getRandomInt(7);
|
|
|
+
|
|
|
+ let adTopup_count = []
|
|
|
+ // 新刊頭 Banner ga4 (一開始進來先送，剩下輪播送)
|
|
|
+ setTimeout(() => {
|
|
|
+ let list_Topup_Banner = document.querySelectorAll('.slider-content .slide-item');
|
|
|
+ let ad_first;
|
|
|
+ try {
|
|
|
+ ad_first = list_Topup_Banner[randomInt].getAttribute('data_id');
|
|
|
+ } catch (e) {
|
|
|
+ ad_first = '加載問題，請無視';
|
|
|
+ console.log(ad_first);
|
|
|
+ }
|
|
|
+
|
|
|
+ dataLayer.push({
|
|
|
+ 'event': 'Banner_Impression',
|
|
|
+ 'ad_name': ad_first,
|
|
|
+ 'ad_location': '新刊頭Banner'
|
|
|
+ });
|
|
|
+ adTopup_count.push(ad_first)
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+
|
|
|
+ $(".slider-content").slick({
|
|
|
+ dots: false,
|
|
|
+ infinite: true,
|
|
|
+ speed: 500,
|
|
|
+ autoplay: true,
|
|
|
+ autoplaySpeed: 3000,
|
|
|
+ slidesToScroll: 1,
|
|
|
+ arrows: true,
|
|
|
+ initialSlide: randomInt, // 起始順序
|
|
|
+ prevArrow:
|
|
|
+ '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
|
|
|
+ nextArrow:
|
|
|
+ '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
|
|
|
+ });
|
|
|
+ $(".bullet").removeClass("bullet-active");
|
|
|
+ $(".bullet")
|
|
|
+ .eq($(".slick-active").data("slick-index"))
|
|
|
+ .addClass("bullet-active");
|
|
|
+
|
|
|
+ $(".slider-content").on("afterChange", function (event, slick, currentSlide) {
|
|
|
+ // 輪播
|
|
|
+ $(".bullet").removeClass("bullet-active");
|
|
|
+ $(`.bullet.item-${currentSlide}`).addClass("bullet-active");
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function renderBannerStr(sec, data) {
|
|
|
+ let adNamesTop = [];
|
|
|
+ let str = "";
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ let adNameTop = `${data[i]["id"]}${data[i]["alt"]}`;
|
|
|
+ adNamesTop.push(adNameTop);
|
|
|
+
|
|
|
+ if (data[i]["Dwebp"]) {
|
|
|
+ str += `
|
|
|
+ <a href="${data[i]["link"]}" data-ga4="${data[i]["id"]}${data[i]["alt"]}">
|
|
|
+ <img class="${sec}-${i + 1} slide-item img-fluid" src="${data[i]["Dwebp"]}" data-bg="${data[i]["Dwebp"]}" alt="${data[i]["alt"]}" data_id="${data[i]["id"]}${data[i]["alt"]}">
|
|
|
+ </a>`;
|
|
|
+ } else {
|
|
|
+ str += `
|
|
|
+ <a href="${data[i]["link"]}" data-ga4="${data[i]["id"]}${data[i]["alt"]}">
|
|
|
+ <img class="${sec}-${i + 1} slide-item img-fluid" src="${data[i]["DimgUrl"]}" data-bg="${data[i]["DimgUrl"]}" alt="${data[i]["alt"]}" data_id="${data[i]["id"]}${data[i]["alt"]}">
|
|
|
+ </a>`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ $(`.${sec}`).html(str);
|
|
|
+ // ga4-banners
|
|
|
+ adNamesTop.forEach((adNameTop) => {
|
|
|
+ document.querySelectorAll(`a[data-ga4="${adNameTop}"]`).forEach((element) => {
|
|
|
+ element.addEventListener('click', function () {
|
|
|
+ dataLayer.push({
|
|
|
+ 'event': 'Banner_Click',
|
|
|
+ 'ad_name': adNameTop,
|
|
|
+ 'ad_location': '新刊頭'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function renderBullet(data) {
|
|
|
+ let str = "";
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ str += `<div class="bullet item-${i}"></div>`;
|
|
|
+ }
|
|
|
+ $(".bullet-list").html(str);
|
|
|
+}
|
|
|
+
|
|
|
+// 範圍內取隨機整數 (0-8)
|
|
|
+function getRandomInt(max) {
|
|
|
+ return Math.floor(Math.random() * max);
|
|
|
+}
|
|
|
+
|
|
|
+$(".top-carousel .close-btn").click(function () {
|
|
|
+ $(this).css("display", "none");
|
|
|
+ $(".top-carousel").addClass("banner-close");
|
|
|
+ sticky = 0;
|
|
|
+});
|
|
|
+
|
|
|
+// 右下按鈕
|
|
|
+$(".gotop-btn").click(() => {
|
|
|
+ $("html, body").animate(
|
|
|
+ {
|
|
|
+ scrollTop: 0,
|
|
|
+ }, 0
|
|
|
+ );
|
|
|
+});
|
|
|
+
|
|
|
+// 右下按鈕滑入顯示
|
|
|
+$(".calculator-btn").hover(function () {
|
|
|
+ $(".calculator-btn").addClass("show");
|
|
|
+}, function () {
|
|
|
+ $(".calculator-btn").removeClass("show");
|
|
|
+});
|
|
|
+
|
|
|
+$(".shop-btn").hover(function () {
|
|
|
+ $(".shop-btn").addClass("show");
|
|
|
+}, function () {
|
|
|
+ $(".shop-btn").removeClass("show");
|
|
|
+});
|
|
|
+
|
|
|
+// 判斷按鈕顯示 or 隱藏
|
|
|
+$(window).scroll(function () {
|
|
|
+ if ($(this).scrollTop()) {
|
|
|
+ $('#btn-box').fadeIn();
|
|
|
+ } else {
|
|
|
+ $('#btn-box').fadeOut();
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+document.querySelector('button[data-ga="Go_To_Calculator"]').addEventListener('click', function () {
|
|
|
+ dataLayer.push({
|
|
|
+ 'event': 'Go_To_Calculator',
|
|
|
+ 'btn_location': 'FixedBTN'
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+document.querySelector('button[data-ga="Go_To_Shop"]').addEventListener('click', function () {
|
|
|
+ dataLayer.push({
|
|
|
+ 'event': 'Go_To_Shop',
|
|
|
+ 'btn_location': 'FixedBTN'
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+// Footer
|
|
|
+$(".follow-list a").on({
|
|
|
+ mouseenter: function () {
|
|
|
+ // $(this).find(".media-item.before").hide();
|
|
|
+ // $(this).find(".media-item.after").show();
|
|
|
+ $(this).find(".media-item.before").css("opacity", "0");
|
|
|
+ $(this).find(".media-item.after").css("opacity", "1");
|
|
|
+ },
|
|
|
+ mouseleave: function () {
|
|
|
+ // $(this).find(".media-item.before").show();
|
|
|
+ // $(this).find(".media-item.after").hide();
|
|
|
+ $(this).find(".media-item.before").css("opacity", "1");
|
|
|
+ $(this).find(".media-item.after").css("opacity", "0");
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+let formData = {
|
|
|
+ email: ""
|
|
|
+};
|
|
|
+
|
|
|
+// 訂閱
|
|
|
+$('.subscriber-btn, .subscriber-mb-btn').on('click', function () {
|
|
|
+ let parent = $(this).closest('.subscriber-item'); // 對應父元素
|
|
|
+ parent.find('.spinner-border').addClass('show');
|
|
|
+ let mail = parent.find('input').val();
|
|
|
+ console.log("Input value:", mail);
|
|
|
+
|
|
|
+ let regex = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i;
|
|
|
+
|
|
|
+ let validate = regex.test(mail); // 判斷 mail 格式
|
|
|
+ if (!validate) {
|
|
|
+ parent.addClass('input-error');
|
|
|
+ parent.find('.spinner-border').removeClass('show');
|
|
|
+ parent.find('button p').text('email 格式錯誤');
|
|
|
+ } else {
|
|
|
+ parent.removeClass('input-error');
|
|
|
+ let formData = { email: mail };
|
|
|
+ let email = JSON.stringify(formData);
|
|
|
+ $.ajax({
|
|
|
+ method: "post",
|
|
|
+ url: "https://hhh.com.tw/adapter/index?http_method=POST&api_url=/third/v1/edm/subscriber",
|
|
|
+ contentType: "application/json",
|
|
|
+ data: email
|
|
|
+ }).done((data) => {
|
|
|
+ parent.find('.spinner-border').removeClass('show');
|
|
|
+ parent.find('button p').text('已完成訂閱！');
|
|
|
+ }).fail((error) => {
|
|
|
+ parent.find('.spinner-border').removeClass('show');
|
|
|
+ parent.find('button p').text('訂閱失敗，請稍後再試');
|
|
|
+ });
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+$('.subscriber-item input').on('focusin', function () {
|
|
|
+ console.log('focusin');
|
|
|
+ let parent = $(this).closest('.subscriber-item');
|
|
|
+ parent.addClass('input-focus');
|
|
|
+ let buttonText = parent.find('button p').text();
|
|
|
+ if (buttonText !== "訂閱") {
|
|
|
+ parent.find('button p').text('訂閱');
|
|
|
+ parent.removeClass('input-error');
|
|
|
+ }
|
|
|
+}).on('focusout', function () {
|
|
|
+ $(this).closest('.subscriber-item').removeClass('input-focus');
|
|
|
});
|
