更新 json & 總筆數

designers/lists/index.html

@@ -59,7 +59,7 @@
   <link rel="stylesheet" href="../../css/reset.css" />
   <link rel="stylesheet" href="../../css/lists.css" />
   <link rel="stylesheet" href="../../css/all.css" />
-
+  <!-- 結構化資料 -->
   <script type="application/ld+json">
       {
         "@context": "https://schema.org",
@@ -112,26 +112,26 @@
         }
       }
     </script>
-	
-	<script type="application/ld+json">
-	{
-  		  "@context": "https://schema.org",
-    		"@type": "BreadcrumbList",
-   		 "itemListElement": [
-       		 {
-           		 "@type": "ListItem",
-          		  "position": 1,
-          		  "name": "幸福空間",
-            		"item": "https://hhh.com.tw/"
-       		 },
-       		 {
-          		  "@type": "ListItem",
-            		"position": 2,
-          		  "name": "設計師列表頁",
-            		"item": "https://hhh.com.tw/designers/lists/"
-       		 }  		
-			 ]
-		}
+
+  <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+        "@type": "BreadcrumbList",
+          "itemListElement": [
+            {
+              "@type": "ListItem",
+              "position": 1,
+              "name": "幸福空間",
+              "item": "https://hhh.com.tw/"
+            },
+            {
+              "@type": "ListItem",
+              "position": 2,
+              "name": "設計師列表頁",
+              "item": "https://hhh.com.tw/designers/lists/"
+            }
+          ]
+    }
 	</script>
 </head>
 
@@ -223,7 +223,7 @@
     <div class="row w-100 mt-5 filter-list">
       <div class="col-12">
         <p class="mb-3 text-muted">
-          總共 <span class="text-primary font-weight-bold fs-4">254</span> 筆全國室內設計師符合條件
+          總共 <span id="totalCount" class="text-primary font-weight-bold fs-4">254</span> 筆全國室內設計師符合條件
         </p>
 
         <div class="card text-dark bg-light border-0 mb-3 w-100 shadow-sm">
@@ -975,271 +975,6 @@
     integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
     crossorigin="anonymous"></script>
   <script src="./js/main.js"></script>
-  <script>
-    // $('#navbar').load('../../template/navbar.html');
-
-    // $('#removeResultBtn').hide(); // 隱藏全部清除按鈕
-
-    // // 處理 radio 選取狀態
-    // $('.filter-list .form-check').click(function (e) {
-    //   e.preventDefault();
-    //   $(this).find('.form-check-input').prop('checked', true);
-
-    //   // 取得 radio 按鈕的 label
-    //   let radioLabel = $(this).find('.form-check-label').text().trim().replace(/\s+/g, ' '); // 移除換行空白
-    //   console.log('radioLabel', radioLabel);
-
-    //   // 取上一層 search-tab 按鈕文字
-    //   let buttonValue = $(this).closest('.dropdown').find('.search-tab').text().trim();
-    //   console.log('Selected button text:', buttonValue);
-
-    //   let buttonId = $(this).closest('.dropdown').find('.search-tab').attr('id');
-    //   console.log('buttonId', buttonId);
-
-    //   updateSelectedOptions(buttonId, buttonValue, radioLabel);
-    // });
-
-    // let filterList = []; // 篩選條件
-
-    // // 更新篩選狀態
-    // function updateSelectedOptions(id, button, radio) {
-    //   console.log('更新篩選狀態', button, radio);
-
-    //   if (filterList.length) {
-    //     let exists = false; // 判斷是否已存在
-
-    //     for (let index = 0; index < filterList.length; index++) {
-    //       const element = filterList[index];
-
-    //       // 如有重複 button 只改 radio 狀態
-    //       if (element.text === button) {
-    //         element.value = radio;
-    //         exists = true;
-    //         // 更新篩選的值
-    //         $(`.search-tab-result .budget:contains(${button})`).find('p').text(`${button}：${radio}`);
-    //         // $(`#${id} ul`).find('.form-check-input').prop('checked', true);
-    //       }
-    //     }
-
-    //     // 如果 filterList 中不存在則新增
-    //     if (!exists) {
-    //       const newItem = {
-    //         id: id,
-    //         text: button,
-    //         value: radio
-    //       };
-
-    //       filterList.push(newItem);
-    //       createFilterHtml(newItem);
-    //     }
-
-
-    //   } else {
-    //     // 儲存篩選條件
-    //     filterList.push({
-    //       id: id,
-    //       text: button,
-    //       value: radio
-    //     })
-
-    //     for (let index = 0; index < filterList.length; index++) {
-    //       const element = filterList[index];
-    //       createFilterHtml(element);
-    //     }
-    //   }
-
-    //   designerSearch(); // 搜尋
-
-    //   console.log('filterList', filterList);
-
-    //   // 切換按鈕選取狀態
-    //   $('.dropdown').each(function () {
-    //     let hasCheckedRadio = $(this).find('input[type="radio"]:checked').length > 0;
-    //     $(this).find('.search-tab').toggleClass('active', hasCheckedRadio);
-    //   });
-    // }
-
-    // // 新增篩選條件 HTML
-    // function createFilterHtml(item) {
-    //   let dom = `
-    //     <span class="me-3">
-    //       <span class="d-flex budget">
-    //         <p class="me-1">${item.text}：${item.value}</p>
-    //         <img src="https://hhh.com.tw/assets/images/section/icon/close-btn-search.svg" alt="close-btn-search">
-    //       </span>
-    //     </span>`;
-
-    //   $('.search-tab-result').append(dom);
-    //   $('#removeResultBtn').show();
-    // }
-
-    // let page = 1; // 當前頁數
-    // let pageSize = 18; // 每頁數量
-
-    // // 列表篩選
-    // async function designerSearch(type = "") {
-    //   // 預設排序為 recommend
-    //   let url = `https://m3.hhh.com.tw:18673/designer_search?page=${page}&page_size=${pageSize}&order_by=recommend`;
-
-    //   console.log('type', type);
-
-    //   if (type === "order_by") {
-    //     url += `&${type}=${assignOrder}`
-    //   }
-
-    //   if (filterList.length) {
-    //     filterList.map(item => {
-    //       if (item.id === 'budget') {
-    //         switch (item.value) {
-    //           case "100萬以下":
-    //             url += `&${item.id}=1`
-    //             break;
-    //           case "100~200萬":
-    //             url += `&${item.id}=2`
-    //             break;
-    //           case "200~300萬":
-    //             url += `&${item.id}=3`
-    //             break;
-    //           case "300~400萬":
-    //             url += `&${item.id}=4`
-    //             break;
-    //           case "400~500萬":
-    //             url += `&${item.id}=5`
-    //             break;
-    //           case "500萬以上":
-    //             url += `&${item.id}=6`
-    //             break;
-    //           default:
-    //             break;
-    //         }
-
-    //       } else {
-    //         url += `&${item.id}=${item.value}`
-    //       }
-    //     })
-    //   }
-
-    //   console.log('url >>', url);
-
-    //   let resultHtml = '';
-
-    //   try {
-    //     const response = await axios.get(url);
-    //     console.log("response", response);
-
-    //     let totalCount = response.data.total_count;
-    //     let totalPages = Math.ceil(totalCount / pageSize);
-    //     console.log('totalCount', totalCount);
-    //     console.log('totalPages', totalPages);
-
-    //     setPagination(totalPages); // 分頁處理
-
-    //     let resultHtml = '';
-    //     response.data.designers.forEach((item) => {
-    //       resultHtml += `
-    //         <div class="col-md-4 mb-4">
-    //           <a href="${item.DesignerLink}">
-    //             <div class="card">
-    //               <img src="${item.CaseCoverImg}" class="cover-img" alt="${item.DesignerName} ${item.DesignerTitle}">
-    //                 <div class="card-body d-flex align-items-center">
-    //                   <img src="${item.DesignerCoverImg}" alt="" class="me-3 person-img">
-    //                     <section>
-    //                       <h5 class="card-text text-muted">${item.DesignerTitle}</h5>
-    //                       <h6 class="card-title mb-0 text-dark">
-    //                         <span class="font-weight-bold">
-    //                           ${item.DesignerName}
-    //                         </span>
-    //                         設計師
-    //                       </h6>
-    //                     </section>
-    //                 </div>
-    //             </div>
-    //           </a>
-    //         </div>`;
-    //     });
-
-    //     $('#designerList').html(resultHtml);
-    //   } catch (error) {
-    //     console.log("error", error);
-    //   }
-    // }
-
-    // designerSearch();
-
-    // // 分頁
-    // function setPagination(pages) {
-    //   console.log('setPagination pages', pages);
-
-    //   // 往前一頁
-    //   let dom = `
-    //     <li class="page-item" onclick="handlePagination(this, 'previous')">
-    //       <a class="page-link" href="#" aria-label="Previous">
-    //         <span aria-hidden="true">＜</span>
-    //       </a>
-    //     </li>`;
-
-    //   for (let index = 0; index < pages; index++) {
-    //     dom += `
-    //       <li class="page-item" onclick="handlePagination(this)">
-    //         <a class="page-link" href="#">${index + 1}</a>
-    //       </li>`;
-    //   }
-
-    //   // 往後一頁
-    //   dom += `
-    //     <li class="page-item" onclick="handlePagination(this, 'next')">
-    //       <a class="page-link" href="#" aria-label="Next">
-    //         <span aria-hidden="true">＞</span>
-    //       </a>
-    //     </li>`;
-
-    //   $('.designer-list-content .pagination').html(dom);
-    //   $('.designer-list-content .page-item').removeClass('active');
-    //   $('.designer-list-content .page-item').eq(page).addClass('active'); // 當前頁數加上選取狀態
-    // }
-
-    // // 頁碼處理
-    // function handlePagination(item, type = "") {
-    //   if (type === "previous") {
-    //     // 往前一頁
-    //     console.log('previous');
-    //     page--;
-    //     console.log(page);
-    //     return;
-    //   } else if (type === "next") {
-    //     // 往後一頁
-    //     console.log('next');
-    //     page++;
-    //     console.log(page);
-    //     return;
-    //   }
-
-    //   console.log('item', item);
-    //   // 切換選取狀態
-    //   $('.designer-list-content .page-item').removeClass('active');
-    //   $(item).addClass('active');
-
-    //   page = $(item).find('.page-link')[0].innerText; // 修改當前頁數
-
-    //   designerSearch();
-    // }
-
-    // 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');
-    //   console.log('assignOrder', assignOrder);
-
-    //   designerSearch("order_by");
-    // });
-
-  </script>
-
 </body>
 
 </html>

designers/lists/js/main.js

@@ -97,63 +97,116 @@ function createFilterHtml(item) {
 
 let page = 1; // 當前頁數
 let pageSize = 18; // 每頁數量
+let isFirstLoad = true; // 初始載入
 
 // 列表篩選
 async function designerSearch(type = "") {
-  // 預設排序為 recommend
-  let url = `https://m3.hhh.com.tw:18673/designer_search?page=${page}&page_size=${pageSize}&order_by=recommend`;
-
-  console.log('type', type);
+  if (isFirstLoad) {
+    // 第一次載入使用本地 JSON 文件
+    url = './json/designers_lists_data.json';
+  } else {
+    // 後續使用 API (預設排序為 recommend)
+    url = `https://m3.hhh.com.tw:18673/designer_search?page=${page}&page_size=${pageSize}&order_by=recommend`;
 
-  if (type === "order_by") {
-    url += `&${type}=${assignOrder}`
-  }
+    if (type === "order_by") {
+      url += `&${type}=${assignOrder}`;
+    }
 
-  let input = $(".keywords").val();
-  console.log('input', input);
+    let input = $(".keywords").val();
 
-  if (input !== "") {
-    url += `&keyword=${input}`
-  }
+    if (input !== "") {
+      url += `&keyword=${input}`;
+    }
 
-  if (filterList.length) {
-    filterList.map(item => {
-      if (item.id === 'budget') {
-        switch (item.value) {
-          case "100萬以下":
-            url += `&${item.id}=1`
-            break;
-          case "100~200萬":
-            url += `&${item.id}=2`
-            break;
-          case "200~300萬":
-            url += `&${item.id}=3`
-            break;
-          case "300~400萬":
-            url += `&${item.id}=4`
-            break;
-          case "400~500萬":
-            url += `&${item.id}=5`
-            break;
-          case "500萬以上":
-            url += `&${item.id}=6`
-            break;
-          default:
-            break;
+    if (filterList.length) {
+      filterList.map(item => {
+        if (item.id === 'budget') {
+          switch (item.value) {
+            case "100萬以下":
+              url += `&${item.id}=1`;
+              break;
+            case "100~200萬":
+              url += `&${item.id}=2`;
+              break;
+            case "200~300萬":
+              url += `&${item.id}=3`;
+              break;
+            case "300~400萬":
+              url += `&${item.id}=4`;
+              break;
+            case "400~500萬":
+              url += `&${item.id}=5`;
+              break;
+            case "500萬以上":
+              url += `&${item.id}=6`;
+              break;
+            default:
+              break;
+          }
+        } else {
+          url += `&${item.id}=${item.value}`;
         }
-
-      } else {
-        url += `&${item.id}=${item.value}`
-      }
-    })
+      });
+    }
   }
 
+  // // 預設排序為 recommend
+  // let url = `https://m3.hhh.com.tw:18673/designer_search?page=${page}&page_size=${pageSize}&order_by=recommend`;
+
+  // console.log('type', type);
+
+  // if (type === "order_by") {
+  //   url += `&${type}=${assignOrder}`
+  // }
+
+  // let input = $(".keywords").val();
+  // console.log('input', input);
+
+  // if (input !== "") {
+  //   url += `&keyword=${input}`
+  // }
+
+  // if (filterList.length) {
+  //   filterList.map(item => {
+  //     if (item.id === 'budget') {
+  //       switch (item.value) {
+  //         case "100萬以下":
+  //           url += `&${item.id}=1`
+  //           break;
+  //         case "100~200萬":
+  //           url += `&${item.id}=2`
+  //           break;
+  //         case "200~300萬":
+  //           url += `&${item.id}=3`
+  //           break;
+  //         case "300~400萬":
+  //           url += `&${item.id}=4`
+  //           break;
+  //         case "400~500萬":
+  //           url += `&${item.id}=5`
+  //           break;
+  //         case "500萬以上":
+  //           url += `&${item.id}=6`
+  //           break;
+  //         default:
+  //           break;
+  //       }
+
+  //     } else {
+  //       url += `&${item.id}=${item.value}`
+  //     }
+  //   })
+  // }
+
   try {
     const response = await axios.get(url);
+    console.log('response.data.designers', response.data.designers);
 
     let totalCount = response.data.total_count;
     let totalPages = Math.ceil(totalCount / pageSize);
 
+    $("#totalCount").html(totalCount);
+
     if (totalPages) {
       $('.filter-list .pagination').show();
       setPagination(totalPages); // 分頁處理
@@ -162,7 +215,7 @@ async function designerSearch(type = "") {
     }
 
     let resultHtml = '';
-    console.log(' response.data.designers', response.data.designers);
+
     if (response.data.designers.length) {
       response.data.designers.forEach((item) => {
         resultHtml += `
@@ -191,6 +244,11 @@ async function designerSearch(type = "") {
     }
 
     $('#designerList').html(resultHtml);
+
+    // 更新初始載入狀態
+    if (isFirstLoad) {
+      isFirstLoad = false;
+    }
   } catch (error) {
     console.log("error", error);
   }
@@ -239,7 +297,7 @@ function setPagination(pages) {
     updateVisibility(currentPage, pages);
   }
 
-   // 更新上頁 & 下頁的按鈕顯示狀態
+  // 更新上頁 & 下頁的按鈕顯示狀態
   function updateVisibility(page, pages) {
     if (page === 1) {
       $('.page-link.previous').addClass('hidden');
@@ -254,7 +312,7 @@ function setPagination(pages) {
     }
   }
 
-  window.handlePagination = function(item, type = "") {
+  window.handlePagination = function (item, type = "") {
     if (type === "previous" && page > 1) {
       page--;
     } else if (type === "next" && page < pages) {
@@ -268,52 +326,16 @@ function setPagination(pages) {
 
   renderPagination(page);
 
-  $(window).on('resize', function() {
+  $(window).on('resize', function () {
     let newScreenWidth = $(window).width();
-    if ((newScreenWidth > 991 && maxPages !== maxPagesDesktop) || 
-        (newScreenWidth <= 991 && maxPages !== maxPagesMobile)) {
+    if ((newScreenWidth > 991 && maxPages !== maxPagesDesktop) ||
+      (newScreenWidth <= 991 && maxPages !== maxPagesMobile)) {
       maxPages = newScreenWidth > 991 ? maxPagesDesktop : maxPagesMobile;
       renderPagination(page);
     }
   });
 }
 
-// function setPagination(pages) {
-//   // 往前一頁
-//   let dom = `
-//     <li class="page-item" onclick="handlePagination(this, 'previous')">
-//       <a class="page-link previous" href="#" aria-label="Previous">
-//         <span aria-hidden="true">＜</span>
-//       </a>
-//     </li>`;
-
-//   for (let index = 0; index < pages; index++) {
-//     dom += `
-//       <li class="page-item" onclick="handlePagination(this)">
-//         <a class="page-link" href="#">${index + 1}</a>
-//       </li>`;
-//   }
-
-//   // 往後一頁
-//   dom += `
-//     <li class="page-item" onclick="handlePagination(this, 'next')">
-//       <a class="page-link next" href="#" aria-label="Next">
-//         <span aria-hidden="true">＞</span>
-//       </a>
-//     </li>`;
-
-//   $('.filter-list .pagination').html(dom);
-//   $('.filter-list .page-item').removeClass('active');
-//   $('.filter-list .page-item').eq(page).addClass('active'); // 當前頁數加上選取狀態
-
-//   // 設定上一頁按鈕的顯示狀態
-//   if (page === 1) {
-//     $('.page-link.previous').addClass('hidden');
-//   } else {
-//     $('.page-link.previous').removeClass('hidden');
-//   }
-// }
-
 // 頁碼處理
 function handlePagination(item, type = "") {
   if (type === "previous") {

template/navbar.html

@@ -419,7 +419,7 @@
                 <a href="https://hhh.com.tw/minordecor" target="_blank" class="submenu dropdown-item">輕裝修方案</a>
               </div>
             </li>
-			<!--
+            <!--
             <li class="nav-item dropdown dropdown-sub">
               <div class="d-flex justify-content-between align-items-center py-2">
                 <a href="https://matching.framer.website/" target="_blank" class="submenu dropdown-item">居家快易便</a>