main.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. // 載入共用 template
  2. $('#navbar').load('../../template/navbar.html');
  3. $('#footer').load('../../template/footer.html');
  4. $('#btn-box').load('../../template/button.html');
  5. $('#topCarousel').load('../../template/top_carousel.html');
  6. let assignOrder = ""; // 當前排序
  7. // new, hot, recommend 排序 (預設推薦)
  8. $(".search-btn-filter button").click(function () {
  9. // 切換選取狀態
  10. $('.search-btn-filter').find('.active').removeClass('active');
  11. $(this).addClass('active');
  12. assignOrder = $(this).attr('id');
  13. dataSearch("order_by");
  14. });
  15. let page = 1; // 當前頁數
  16. let pageSize = 18; // 每頁數量
  17. let isFirstLoad = true; // 初始載入
  18. // 列表篩選
  19. async function dataSearch(type = "") {
  20. let url;
  21. $('#designerSpinner').show();
  22. $('#designerList').hide();
  23. if (isFirstLoad) {
  24. // 第一次載入使用本地 JSON 文件
  25. url = './json/designers_lists_data.json';
  26. } else {
  27. // 後續使用 API
  28. url = `https://m3.hhh.com.tw:18673/designer_search?page=${page}&page_size=${pageSize}`;
  29. // if (type === "order_by") {
  30. // url += `&${type}=${assignOrder}`;
  31. // }
  32. if (assignOrder === "") {
  33. url += "&order_by=recommend"; // 預設排序為 recommend
  34. } else {
  35. url += `&order_by=${assignOrder}`;
  36. }
  37. let input = $(".keywords").val();
  38. if (input !== "") {
  39. let isExist = filterList.some((item) => item.id === "keyword"); // 判斷是否已存在關鍵字
  40. const newItem = {
  41. id: "keyword",
  42. text: "關鍵字",
  43. value: input
  44. };
  45. if (!isExist) {
  46. filterList.push(newItem);
  47. createFilterHtml(newItem);
  48. } else {
  49. // 移除原本關鍵字
  50. $('.budget p.me-1').each(function () {
  51. if ($(this).text().includes('關鍵字')) {
  52. $(this).closest('.me-3').remove();
  53. }
  54. });
  55. if (filterList.length === 0) {
  56. $('#removeResultBtn').hide();
  57. }
  58. filterList = filterList.filter(item => item.text !== "關鍵字");
  59. filterList.push(newItem);
  60. createFilterHtml(newItem);
  61. }
  62. $(".keywords").val("")
  63. // url += `&keyword=${input}`;
  64. }
  65. if (filterList.length) {
  66. filterList.map(item => {
  67. if (item.id === 'budget') {
  68. switch (item.value) {
  69. case "100萬以下":
  70. url += `&${item.id}=1`;
  71. break;
  72. case "100~200萬":
  73. url += `&${item.id}=2`;
  74. break;
  75. case "200~300萬":
  76. url += `&${item.id}=3`;
  77. break;
  78. case "300~400萬":
  79. url += `&${item.id}=4`;
  80. break;
  81. case "400~500萬":
  82. url += `&${item.id}=5`;
  83. break;
  84. case "500萬以上":
  85. url += `&${item.id}=6`;
  86. break;
  87. default:
  88. break;
  89. }
  90. } else {
  91. url += `&${item.id}=${item.value}`;
  92. }
  93. });
  94. }
  95. }
  96. try {
  97. const response = await axios.get(url);
  98. console.log('response.data.designers', response.data.designers);
  99. let totalCount = response.data.total_count;
  100. let totalPages = Math.ceil(totalCount / pageSize);
  101. $("#totalCount").html(totalCount);
  102. if (totalPages) {
  103. $('.filter-list .pagination').show();
  104. setPagination(totalPages); // 分頁處理
  105. } else {
  106. $('.filter-list .pagination').hide();
  107. }
  108. let resultHtml = '';
  109. if (response.data.designers.length) {
  110. response.data.designers.forEach((item) => {
  111. resultHtml += `
  112. <div class="col-md-4 mb-4">
  113. <a href="${item.DesignerLink}">
  114. <div class="card lists-card">
  115. <img src="${item.CaseCoverImg}" class="cover-img" alt="${item.DesignerName} ${item.DesignerTitle}">
  116. <div class="card-body d-flex align-items-center">
  117. <div class="person-img me-3 me-md-2 me-lg-3" style="background-image: url('${item.DesignerCoverImg}');"></div>
  118. <section>
  119. <h5 class="text-muted mb-2">${item.DesignerTitle}</h5>
  120. <h6 class="mb-0 text-dark">
  121. <span class="font-weight-bold">
  122. ${item.DesignerName}
  123. </span>
  124. 設計師
  125. </h6>
  126. </section>
  127. </div>
  128. </div>
  129. </a>
  130. </div>`;
  131. });
  132. } else {
  133. resultHtml += "<p class='text-center mt-5'>找不到符合的資料,請重新搜尋。</p>"
  134. }
  135. $('#designerList').html(resultHtml);
  136. setTimeout(() => {
  137. $('#designerList').show();
  138. $('#designerSpinner').hide();
  139. }, 100)
  140. // 更新初始載入狀態
  141. if (isFirstLoad) {
  142. isFirstLoad = false;
  143. }
  144. } catch (error) {
  145. console.log("error", error);
  146. }
  147. }
  148. dataSearch();
  149. // ga 設計師搜尋 (熱搜關鍵字)
  150. $(".search-bar-keyword li a").on("click", (e) => {
  151. dataLayer.push({
  152. 'event': 'Click_Promo_Keyword',
  153. 'promo_keyword': `${e.target.innerText}`,
  154. 'promo_category': 'Designer_Search'
  155. });
  156. });
  157. // 新的搜尋欄位處理
  158. function ga4_keywords() {
  159. let elements = document.querySelectorAll(".me-1");
  160. // 創建一個數組來存儲所有元素的文本內容
  161. let keywords = Array.from(elements).map(element => {
  162. let text = element.innerText;
  163. // 查找 "關鍵字:" 的起始位置
  164. let keywordIndex = text.indexOf("關鍵字:");
  165. if (keywordIndex !== -1) {
  166. // 提取 "關鍵字:" 後面的部分
  167. return text.substring(keywordIndex + "關鍵字:".length).trim();
  168. }
  169. return ""; // 如果沒有找到 "關鍵字:",返回空字符串
  170. });
  171. // 過濾掉空字符串,並將剩餘文本合併為一個字符串
  172. let keyword = keywords.filter(text => text !== "").join(", ");
  173. dataLayer.push({
  174. 'event': 'View_Search_Results',
  175. 'search_term': `${keyword}`,
  176. 'search_category': 'Designer_Search'
  177. });
  178. }
  179. document.getElementById("keywordInput").addEventListener("keydown", function (event) {
  180. if (event.key === "Enter") {
  181. ga4_keywords();
  182. }
  183. });