hhh_new/columns/lists/js/main.js

// 載入共用 template
$('#navbar').load('../../template/navbar.html');
$('#footer').load('../../template/footer.html');
$('#btn-box').load('../../template/button.html');
$('#topCarousel').load('../../template/top_carousel.html');

// $("#columnLoading").hide(); // 隱藏讀取動畫

let assignOrder = ""; // 當前排序

// new, hot, recommend 排序 (預設推薦)
$(".search-btn-filter button").click(function () {
  // 切換選取狀態
  $('.search-btn-filter').find('.active').removeClass('active');
  $(this).addClass('active');
  assignOrder = $(this).attr('id');
  dataSearch("order_by");
});


let columnType = ""; // 主要類別
let columnSubType = ""; // 次要類別

// 次要類別選單
let subCategory = [
  {
    title: "編輯精選",
    list: ["居家趨勢", "人氣排行", "建築設計", "風格選店", "公益活動", "展演資訊"]
  },
  {
    title: "居家設計",
    list: ["小宅規劃", "老屋翻新", "風格營造", "配色佈置", "好宅特輯", "設計提案"]
  },
  {
    title: "裝修前線",
    list: ["新聞最前線", "預算分配", "施工流程", "建材知識", "裝潢撇步"]
  },
  {
    title: "生活PLUS",
    list: ["居家風水", "家事清潔", "收納技巧", "改造修繕", "退休好幸福"]
  },
  {
    title: "品牌好物",
    list: ["家具家飾", "美型家電", "推薦廚衛", "居家好物", "優質建材", "品牌新訊"]
  },
  {
    title: "房市焦點",
    list: ["房市新聞", "建案特搜", "買屋賣屋", "房貸稅務", "租房須知"]
  }
];

// 主要篩選按鈕
$('.category-btn .main button').on('click', function () {
  let btnText = $(this)[0].innerText;
  push_columns_GA(btnText)

  if (btnText === "所有文章") {
    columnType = "";
  } else if (btnText === "主題企劃") {
    window.open("https://hhh.com.tw/topic/lists/1-page/new-sort/", "_blank"); // 另開頁面
    return;
  } else {
    columnType = btnText;
  }

  page = 1;
  columnSubType = "";

  $('.category-btn .main button').removeClass('active');
  $(this).toggleClass('active');

  $('#dataList').html("");
  dataSearch();

  let subBtnHtml = [];

  subCategory.map(item => {
    if (btnText !== "所有文章" && btnText !== "主題企劃") {
      if (item.title === btnText) {
        $('.category-btn .sub').show();

        item.list.forEach(item => {
          let dom = `<button onclick="clickSubBtn(event, '${item}')">${item}</button>`;
          subBtnHtml.push(dom);
        })

        $('.category-btn .sub').html(subBtnHtml);
      }
    } else {
      $('.category-btn .sub').hide();
    }
  })
});

// 次要篩選按鈕
function clickSubBtn(event, val) {
  if (val === "小宅規劃" || val === "老屋翻新") {
    push_columns_GA(val);
  }

  page = 1;
  columnSubType = val;

  $('.category-btn .sub button').removeClass('active');
  $(event.currentTarget).toggleClass('active');

  $('#dataList').html("");
  dataSearch();
}

let page = 1; // 當前頁數
let pageSize = 18; // 每頁數量
let isFirstLoad = true; // 初始載入
let noData = false; // 無資料

// 列表篩選
async function dataSearch(type = "") {
  console.log('type', type);

  let url;

  if (isFirstLoad) {
    $('#dataSpinner').show();
    // 第一次載入使用本地 JSON 文件
    // url = './json/designers_lists_data.json';
    url = `https://m3.hhh.com.tw:18673/column_search?page=${page}&page_size=${pageSize}`;
  } else {
    // 後續使用 API
    url = `https://m3.hhh.com.tw:18673/column_search?page=${page}&page_size=${pageSize}`;

    if (assignOrder === "") {
      url += "&order_by=new"; // 預設排序為 new
    } else {
      url += `&order_by=${assignOrder}`;
    }

    let input = $(".keywords").val();

    if (input !== "") {
      url += `&keyword=${input}`;
    }

    if (type === "keyword") {
      $('#dataList').html("");
    }

    // 篩選按鈕
    if (columnType !== "") {
      url += `&ctype=${columnType}`;
    }

    if (columnSubType !== "") {
      url += `&ctype_sub=${columnSubType}`;
    }
  }

  try {
    const response = await axios.get(url);
    console.log('response.data.columns', response.data.columns);

    let totalCount = response.data.total_count.toLocaleString();
    $("#totalCount").html(totalCount);

    let resultHtml = '';

    if (response.data.columns.length) {
      if (response.data.columns.length === 18) {
        noData = false;
      } else {
        noData = true;
      }

      // 取得當前日期並計算三天前的日期
      const currentDate = new Date();
      const threeDaysAgo = new Date();
      threeDaysAgo.setDate(currentDate.getDate() - 3);


      response.data.columns.forEach((item, index) => {
        // 將 ColumnDate 轉換成日期物件
        const columnDate = new Date(item.ColumnDate);

        // 判斷 ColumnDate 是否在三天內
        const isNew = columnDate >= threeDaysAgo && columnDate <= currentDate;

        const newItemClass = isNew ? '' : 'd-none'; // 非三天內則隱藏 New 標籤

        let tagList = item.ColumnTag.split(',');
        let tagsHtml = '';

        tagList.forEach((tag) => {
          if (tag !== "") {
            tagsHtml += `<span class="tag-item" data-tag="${tag}">${tag}</span>`;
          }
        });

        resultHtml += `
          <div class="col-md-4 mb-4 ${index === 1 ? 'mt-md-4' : ''} ${index > 2 && index % 3 !== 1 ? 'mt-masonry' : ''}">
            <a href="${item.ColumnLink}">
              <div class="card lists-card h-auto">
                <img src="${item.ColumnCoverImg}" class="cover-img" alt="${item.ColumnTitle}">
                  <div class="card-body d-flex flex-column">
                    <h5 class="text-dark title">${item.ColumnTitle}</h5>
                    <div class="tags-container columns-tag mt-3 me-auto">${tagsHtml}</div>
                  </div>
                  <span class="new-item ${newItemClass}">NEW</span>
              </div>
            </a>
          </div>`;
      });

      $('#dataList').append(resultHtml);
    } else {
      resultHtml += "<p class='text-center mt-5'>找不到符合的資料，請重新搜尋。</p>"
      $('#dataList').append(resultHtml);
      $("#columnLoading").hide();
      noData = true;
    }

    setTimeout(() => {
      // $('#dataList').show();
      $('#dataSpinner').hide();
      $("#columnLoading").hide();
    }, 100)

    setTimeout(() => {
      isLoading = false;
      if (response.data.columns.length === 18) {
        $("#columnLoading").show(); // 顯示讀取動畫
      } else {
        $("#columnLoading").hide(); // 隱藏讀取動畫
      }
    }, 2000)

    // 更新初始載入狀態
    if (isFirstLoad) {
      isFirstLoad = false;
    }
  } catch (error) {
    console.log("error", error);
  }
}

dataSearch();

let isLoading = false;

// 判斷是否捲動到底部
$(window).on('scroll', function () {
  // 資料 < 18 筆取消判斷
  if (noData) {
    return;
  }

  let scrollTop = $(window).scrollTop(); // 捲軸頂部位置
  let windowHeight = $(window).height(); // 視窗高度
  let footerOffset = $('#footer').offset().top; // 取得 footer 位置

  if (!isLoading && scrollTop + windowHeight >= footerOffset - 150) {
    isLoading = true;
    // page++;

    setTimeout(() => {
      page++;
      dataSearch();
    }, 300)
  }
});

// 發送 GA
function push_columns_GA(key) {
  let eventLabel = '';

  switch (key) {
    case '編輯精選':
      eventLabel = 'editorchoose_article';
      break;
    case '居家設計':
      eventLabel = 'housedesign_article';
      break;
    case '裝修前線':
      eventLabel = 'decoration_article';
      break;
    case '生活PLUS':
      eventLabel = 'plus_article';
      break;
    case '品牌好物':
      eventLabel = 'gooditem_article';
      break;
    case '房市焦點':
      eventLabel = 'focus_article';
      break;
    case '小宅規劃':
      eventLabel = 'small_article';
      break;
    case '老屋翻新':
      eventLabel = 'renovation_condition_article';
      break;

    default:
      eventLabel = 'unknown';
  }

  dataLayer.push({ 'event': eventLabel });
  // 發送 Facebook Pixel 事件
  fbq('trackCustom', eventLabel);
}

// ga 設計師搜尋 (熱搜關鍵字)
$(".search-bar-keyword li a").on("click", (e) => {
  dataLayer.push({
    'event': 'Click_Promo_Keyword',
    'promo_keyword': `${e.target.innerText}`,
    'promo_category': 'Designer_Search'
  });
});

// 新的搜尋欄位處理
function ga4_keywords() {
  let elements = document.querySelectorAll(".me-1");
  // 創建一個數組來存儲所有元素的文本內容
  let keywords = Array.from(elements).map(element => {
    let text = element.innerText;
    // 查找 "關鍵字：" 的起始位置
    let keywordIndex = text.indexOf("關鍵字：");
    if (keywordIndex !== -1) {
      // 提取 "關鍵字：" 後面的部分
      return text.substring(keywordIndex + "關鍵字：".length).trim();
    }
    return ""; // 如果沒有找到 "關鍵字："，返回空字符串
  });

  // 過濾掉空字符串，並將剩餘文本合併為一個字符串
  let keyword = keywords.filter(text => text !== "").join(", ");

  dataLayer.push({
    'event': 'View_Search_Results',
    'search_term': `${keyword}`,
    'search_category': 'Designer_Search'
  });
}

document.getElementById("keywordInput").addEventListener("keydown", function (event) {
  if (event.key === "Enter") {
    ga4_keywords();
  }
});