hhh_new/cases/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');

// window.onload = function () {
//   if (screen.width < 991) {
//     window.location.href = `https://m.hhh.com.tw/cases/lists/`;
//   }
// }

// window.onload = function () {
//   // hhh_user_api();
//   if (screen.width >= 991) {
//     window.location.href = `https://hhh.com.tw/cases/lists/`;
//   }
// }

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 page = 1; // 當前頁數
let pageSize = 18; // 每頁數量
let isFirstLoad = true; // 初始載入



// 列表篩選
async function dataSearch(type = "") {
  let url;
  let input = $(".keywords").val();

  $('#dataSpinner').show();
  $('#dataList').hide();

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

    // if (type === "order_by") {
    //   url += `&${type}=${assignOrder}`;
    // }

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

    if (input !== "") {
      let isExist = filterList.some((item) => item.id === "keyword"); // 判斷是否已存在關鍵字

      const newItem = {
        id: "keyword",
        text: "關鍵字",
        value: input
      };

      if (!isExist) {
        filterList.push(newItem);
        createFilterHtml(newItem);
      } else {
        // 移除原本關鍵字
        $('.budget p.me-1').each(function () {
          if ($(this).text().includes('關鍵字')) {
            $(this).closest('.me-3').remove();
          }
        });

        if (filterList.length === 0) {
          $('#removeResultBtn').hide();
        }

        filterList = filterList.filter(item => item.text !== "關鍵字");

        filterList.push(newItem);
        createFilterHtml(newItem);

      }
      // $(".keywords").val("");
      // url += `&keyword=${input}`;
    }

    if (filterList.length) {
      filterList.map(item => {
        if (item.id === "fee") {
          // 裝修預算
          switch (item.value) {
            case "100萬以下":
              url += `&${item.id}=1`;
              break;
            case "101~200萬":
              url += `&${item.id}=2`;
              break;
            case "201~300萬":
              url += `&${item.id}=3`;
              break;
            case "301萬以上":
              url += `&${item.id}=4`;
              break;

            default:
              break;
          }
        } else if (item.id === "area") {
          // 房屋坪數
          switch (item.value) {
            case "20坪以下":
              url += `&${item.id}=1`;
              break;
            case "21-30坪":
              url += `&${item.id}=2`;
              break;
            case "31-50坪":
              url += `&${item.id}=3`;
              break;
            case "51坪以上":
              url += `&${item.id}=4`;
              break;

            default:
              break;
          }
        } else {
          url += `&${item.id}=${item.value}`;
        }
      });
    }
  }

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

    let totalCount = response.data.total_count;
    let totalPages = Math.ceil(totalCount / pageSize);

    $("#totalCount").html(totalCount.toLocaleString());

    if (totalPages) {
      $('.filter-list .pagination').show();
      setPagination(totalPages); // 分頁處理
    } else {
      $('.filter-list .pagination').hide();
    }

    let resultHtml = '';

    if (response.data.cases.length) {
      response.data.cases.forEach((item) => {
        let tagList = item.CaseTag.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">
            <div class="card lists-card">
              <a href="${item.CaseLink}">
                <img src="${item.CaseCoverImg}" class="cover-img" alt="${item.DesignerName} ${item.DesignerTitle}">
              </a>
              <div class="card-body d-flex flex-column">
                <div class="d-flex align-items-center">
                  <div class="person-img me-3 me-md-2 me-lg-3" style="background-image: url('${item.DesignerCoverImg}');"></div>
                  <a href="${item.DesignerLink}" class="link">
                    <h5 class="text-muted mb-2">${item.DesignerTitle}</h5>
                    <h6 class="mb-0 text-dark">
                      <span class="font-weight-bold">
                        ${item.DesignerName}
                      </span>
                      設計師
                    </h6>
                  </section>
                </a>
              </div>
              <a href="${item.CaseLink}" class="link">
                <p class="mt-3 text-dark title">${item.CaseTitle}</p>
              </a>
              <div class="tags-container my-3 me-auto">${tagsHtml}</div>
              <small class="d-block ms-auto mt-auto date-item">上架日期 ${item.CaseSdate}</small>
            </div>
          </div>
          </div >`;
      });
    } else {
      resultHtml += "<p class='text-center mt-5'>找不到符合的資料，請重新搜尋。</p>"
    }

    $('#dataList').html(resultHtml);

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

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

dataSearch();

// 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();
  }
});