collection filter

content/collection/0711-1/index.md

@@ -1,33 +0,0 @@
----
-meta_title: "0711-1"
-meta_description: "0711"
-title: "0711-1"
-date: 2022-07-11T14:49:17+08:00
-draft: false
-type: "collection"
-url: "/collection/0711-1"
-image: "/img/title/13.png"
-cover_img: "/img/title/12.png"
-collection_name: "0711"
-description: "0711"
-tags: [大樓,0711,0711,1房]
-banner_img_text: "0711"
-homeowner: "0711"
-size: "0711"
-bed_num: "1房"
-house_cat: "大樓"
-designer: "0711"
-space: "0711"
-loc: "台北"
-budget: "0711"
-construction: "0711"
-collection_description: "0711"
-comment: "img/13.png"
-collection_slider: []
----
-
-
-<div class="container-fluid blog_article p-0">
-
-</div>
-

content/collection/0711-2/index.md

@@ -1,33 +0,0 @@
----
-meta_title: "0711-2"
-meta_description: "0711-2"
-title: "0711-2"
-date: 2022-07-11T14:54:59+08:00
-draft: false
-type: "collection"
-url: "/collection/0711-2"
-image: "/img/title/13.png"
-cover_img: "/img/title/13.png"
-collection_name: "0711-2"
-description: "0711-2"
-tags: [大樓,0711-2,0711-2,1房]
-banner_img_text: "0711-2"
-homeowner: "0711-2"
-size: "0711-2"
-bed_num: "1房"
-house_cat: "大樓"
-designer: "0711-2"
-space: "0711-2"
-loc: "台北"
-budget: "0711-2"
-construction: "0711-2"
-collection_description: "0711-2"
-comment: "img/13.png"
-collection_slider: []
----
-
-
-<div class="container-fluid blog_article p-0">
-
-</div>
-

content/collection/0711-3/index.md

@@ -1,33 +0,0 @@
----
-meta_title: "0711-3"
-meta_description: "0711-3"
-title: "0711-3"
-date: 2022-07-11T14:58:09+08:00
-draft: true
-type: "collection"
-url: "/collection/0711-3"
-image: "/img/title/13.png"
-cover_img: "/img/title/13.png"
-collection_name: "0711-3"
-description: "0711-3"
-tags: [大樓,0711-3,0711-3,1房]
-banner_img_text: "0711-3"
-homeowner: "0711-3"
-size: "0711-3"
-bed_num: "1房"
-house_cat: "大樓"
-designer: "0711-3"
-space: "0711-3"
-loc: "台北"
-budget: "0711-3"
-construction: "0711-3"
-collection_description: "0711-3"
-comment: "img/13.png"
-collection_slider: []
----
-
-
-<div class="container-fluid blog_article p-0">
-
-</div>
-

content/collection/0711-4/index.md

@@ -1,33 +0,0 @@
----
-meta_title: "0711-4"
-meta_description: "0711-4"
-title: "0711-4"
-date: 2022-07-11T15:11:04+08:00
-draft: false
-type: "collection"
-url: "/collection/0711-4"
-image: "/img/title/13.png"
-cover_img: "/img/title/13.png"
-collection_name: "0711-4"
-description: "0711-4"
-tags: [大樓,0711-4,0711-4,1房]
-banner_img_text: "0711-4"
-homeowner: "0711-4"
-size: "0711-4"
-bed_num: "1房"
-house_cat: "大樓"
-designer: "0711-4"
-space: "0711-4"
-loc: "台北"
-budget: "0711-4"
-construction: "0711-4"
-collection_description: "0711-4"
-comment: "img/13.png"
-collection_slider: []
----
-
-
-<div class="container-fluid blog_article p-0">
-
-</div>
-

content/collection/0711-5/index.md

@@ -1,33 +0,0 @@
----
-meta_title: "0711-5"
-meta_description: "0711-5"
-title: "0711-5"
-date: 2022-07-11T15:31:49+08:00
-draft: false
-type: "collection"
-url: "/collection/0711-5"
-image: "/img/title/13.png"
-cover_img: "/img/title/13.png"
-collection_name: "0711-5"
-description: "0711-5"
-tags: [大樓,0711-5,0711-5,1房]
-banner_img_text: "0711-5"
-homeowner: "0711-5"
-size: "0711-5"
-bed_num: "1房"
-house_cat: "大樓"
-designer: "0711-5"
-space: "0711-5"
-loc: "台北"
-budget: "0711-5"
-construction: "0711-5"
-collection_description: "0711-5"
-comment: "img/13.png"
-collection_slider: [{"slide_img":"img/62e1b0e7cad442f6945f7e379c6ad721.webp","slide_text":"1"},{"slide_img":"img/031e61bfc3884f1ba2ba06a0497a84ea.webp","slide_text":"2"}]
----
-
-
-<div class="container-fluid blog_article p-0">
-
-</div>
-

content/collection/0711/index.md

@@ -1,33 +0,0 @@
----
-meta_title: "0711"
-meta_description: "0711"
-title: "0711"
-date: 2022-07-11T14:44:17+08:00
-draft: true
-type: "collection"
-url: "/collection/0711"
-image: "/img/title/13.png"
-cover_img: "/img/title/12.png"
-collection_name: "0711"
-description: "0711"
-tags: [大樓,0711,0711,1房]
-banner_img_text: "0711"
-homeowner: "0711"
-size: "0711"
-bed_num: "1房"
-house_cat: "大樓"
-designer: "0711"
-space: "0711"
-loc: "台北"
-budget: "0711"
-construction: "0711"
-collection_description: "0711"
-comment: "img/13.png"
-collection_slider: [{"slide_img":"img/62ce3453e2dc44ab930c4c37e57468ae.webp","slide_text":"1"},{"slide_img":"img/0361c1568bd74935a926886a541bf632.webp","slide_text":"2"}]
----
-
-
-<div class="container-fluid blog_article p-0">
-
-</div>
-

layouts/collection/list.html

@@ -32,42 +32,90 @@
         <div class="bhouseweb_loc_box">
           <p class="fw-bold m-0">類型</p>
           <div class="bhouseweb_loc_type">
-            <a class="bhouseweb_item_type">全部</a>
-            <a class="bhouseweb_item_type">透天</a>
-            <a class="bhouseweb_item_type">大樓</a>
+            <input style="opacity: 0;" class="type ms-1" type="radio" id="m_全部類型" name="m_type" value="全部類型" checked/>
+            <label for="m_全部類型" class="bhouseweb_item_type select">全部</label>
+            <input style="opacity: 0;" class="type ms-1" type="radio" id="m_大樓" name="m_type" value="大樓" />
+            <label for="m_大樓" class="bhouseweb_item_type">大樓</label>
+            <input style="opacity: 0;" class="type ms-1" type="radio" id="m_透天" name="m_type"  value="透天" />
+            <label for="m_透天" class="bhouseweb_item_type">透天</label>
           </div>
         </div>
         <div class="bhouseweb_loc_box">
           <p class="fw-bold m-0">坪數</p>
           <div class="bhouseweb_loc_type">
-            <a class="bhouseweb_item_type">全部</a>
+            <input style="opacity: 0;" class="ping ms-1" type="radio" id="m_全部坪數" name="m_ping" value="全部坪數" checked/>
+            <label class="bhouseweb_item_type select" for="m_全部坪數">全部</label>    
+        
+            <input style="opacity: 0;" class="ping ms-1" type="radio" id="m_20坪以下" name="m_ping" value="20坪以下" />
+            <label class="bhouseweb_item_type" for="m_20坪以下">20坪以下</label>    
+        
+            <input style="opacity: 0;" class="ping ms-1" type="radio" id="m_20-35坪" name="m_ping" value="20-35坪" />
+            <label class="bhouseweb_item_type" for="m_20-35坪">20-35坪</label>    
+        
+            <input style="opacity: 0;" class="ping ms-1" type="radio" id="m_36-50坪" name="m_ping" value="36-50坪" />
+            <label class="bhouseweb_item_type" for="m_36-50坪">36-50坪</label>    
+        
+            <input style="opacity: 0;" class="ping ms-1" type="radio" id="m_51坪以上" name="m_ping" value="51坪以上" />
+            <label class="bhouseweb_item_type" for="m_51坪以上">51坪以上</label>
+
+            <!-- <a class="bhouseweb_item_type select">全部</a>
             <a class="bhouseweb_item_type">20坪以下</a>
             <a class="bhouseweb_item_type">20-35坪</a>
             <a class="bhouseweb_item_type">36-50坪</a>
             <a class="bhouseweb_item_type">50坪以上</a>
             <a class="bhouseweb_item_type">50坪以上</a>
             <a class="bhouseweb_item_type">50坪以上</a>
-            <a class="bhouseweb_item_type">50坪以上</a>
+            <a class="bhouseweb_item_type">50坪以上</a> -->
           </div>
         </div>
         <div class="bhouseweb_loc_box">
           <p class="fw-bold m-0">預算</p>
           <div class="bhouseweb_loc_type">
-            <a class="bhouseweb_item_type">全部</a>
+            <input style="opacity: 0;" class="budget ms-1" type="radio" id="m_全部預算" name="m_budget" value="全部預算" checked/>
+            <label class="bhouseweb_item_type select" for="m_全部預算">全部</label>    
+        
+            <input style="opacity: 0;" class="budget ms-1" type="radio" id="m_59萬以下" name="m_budget" value="59萬以下" />
+            <label class="bhouseweb_item_type" for="m_59萬以下">59萬以下</label>    
+        
+            <input style="opacity: 0;" class="budget ms-1" type="radio" id="m_60-79萬" name="m_budget" value="60-79萬" />
+            <label class="bhouseweb_item_type" for="m_60-79萬">60-79萬</label>    
+        
+            <input style="opacity: 0;" class="budget ms-1" type="radio" id="m_80-99萬" name="m_budget" value="80-99萬" />
+            <label class="bhouseweb_item_type" for="m_80-99萬">80-99萬</label>    
+        
+            <input style="opacity: 0;" class="budget ms-1" type="radio" id="m_100萬以上" name="m_budget" value="100萬以上" />
+            <label class="bhouseweb_item_type" for="m_100萬以上">100萬以上</label>
+
+            <!-- <a class="bhouseweb_item_type">全部</a>
             <a class="bhouseweb_item_type">59萬以下</a>
             <a class="bhouseweb_item_type">60-79萬</a>
             <a class="bhouseweb_item_type">80-99萬</a>
-            <a class="bhouseweb_item_type">100萬</a>
+            <a class="bhouseweb_item_type">100萬</a> -->
           </div>
         </div>
         <div class="bhouseweb_loc_box">
           <p class="fw-bold m-0">格局</p>
           <div class="bhouseweb_loc_type">
-            <a class="bhouseweb_item_type">全部</a>
+            <input style="opacity: 0;" class="rooms ms-1" type="radio" id="m_全部格局" name="m_rooms" value="全部格局" checked/>
+            <label class="bhouseweb_item_type select" for="m_全部格局">全部</label>    
+        
+            <input style="opacity: 0;" class="rooms ms-1" type="radio" id="m_兩房" name="m_rooms" value="兩房" />
+            <label class="bhouseweb_item_type" for="m_兩房">兩房</label>    
+        
+            <input style="opacity: 0;" class="rooms ms-1" type="radio" id="m_三房" name="m_rooms" value="三房" />
+            <label class="bhouseweb_item_type" for="m_三房">三房</label>    
+        
+            <input style="opacity: 0;" class="rooms ms-1" type="radio" id="m_四房" name="m_rooms" value="四房" />
+            <label class="bhouseweb_item_type" for="m_四房">四房</label>    
+        
+            <input style="opacity: 0;" class="rooms ms-1" type="radio" id="m_四房以上" name="m_rooms" value="四房以上" />
+            <label class="bhouseweb_item_type" for="m_四房以上">四房以上</label>
+
+            <!-- <a class="bhouseweb_item_type">全部</a>
             <a class="bhouseweb_item_type">兩房</a>
             <a class="bhouseweb_item_type">三房</a>
             <a class="bhouseweb_item_type">四房</a>
-            <a class="bhouseweb_item_type">四房以上</a>
+            <a class="bhouseweb_item_type">四房以上</a> -->
           </div>
         </div>
       </section>
@@ -93,7 +141,7 @@
     <hr class="bhouseweb_loc_line" />
     <div class="bhouseweb_loc_content" style="overflow-x: hidden">
       <div class="bhouseweb_loc_sec02">
-        <div class="row px-0 mx-0">
+        <div class="update_info row px-0 mx-0">
           {{ $paginator := .Paginate .Data.Pages }} {{ range $paginator.Pages }}
           <div class="col-12 col-sm-6 p-1">
             <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0">
@@ -365,6 +413,7 @@
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
 
   <script async defer src="./js/index.js"></script> -->
+  <script src="/js/cz_filter.js"></script>
     {{ partial "scripts.html" . }}
   </body>
 </html>

themes/hugo-universal-theme-master/static/js/bhouse.js

@@ -186,7 +186,7 @@ $(document).on("click", ".article__readMore", function (event) {
 
 });
 
-$(document).on("click", ".bhouseweb_loc_type>a", function (event) {
+$(document).on("click", ".bhouseweb_loc_type>label", function (event) {
   $(this).siblings().removeClass('select');
 
   $(this).toggleClass("select");

themes/hugo-universal-theme-master/static/js/cz_filter.js

@@ -0,0 +1,197 @@
+console.log(1)
+// 選擇屋型處理
+function change_type() {
+  type = this.value;
+
+  // 更新畫面資料
+  update_info(type, ping, budget, rooms);
+}
+
+// 選擇坪數處理
+function change_ping() {
+  ping = this.value;
+
+  // 更新畫面資料
+  update_info(type, ping, budget, rooms);
+}
+
+// 選擇預算處理
+function change_budget() {
+  budget = this.value;
+
+  // 更新畫面資料
+  update_info(type, ping, budget, rooms);
+}
+
+// 選擇格局處理
+function change_rooms() {
+  rooms = this.value;
+
+  // 更新畫面資料
+  update_info(type, ping, budget, rooms);
+}
+
+// 更新畫面資料
+function update_info(type, ping, budget, room) {
+  console.log(type + ',' + ping + ',' + budget + ',' + room); // test (大樓,全部坪數,全部預算,全部格局)
+
+  var items = []; // 作品集資料清單
+
+  // 讀取作品集資料(json)
+  fetch('http://192.53.174.202:9001/api/contents?url=/collection')
+    .then(response => response.json())
+    .then(items => {
+      console.log(items)
+      // console.log(JSON.stringify(items, null, 2));
+     
+      console.log('讀取作品集資料(json)....');
+
+      var content = "";
+
+      console.log('載入符合篩選條件(' + type + ',' + ping + ',' + budget + ',' + rooms + ')的作品...........');
+
+      var filter_num = 0; // 篩選條件數量
+
+      if (!type.includes("全部")) {
+        filter_num += 1;
+      }
+
+      if (!ping.includes("全部")) {
+        filter_num += 1;
+      }
+
+      if (!budget.includes("全部")) {
+        filter_num += 1;
+      }
+
+      if (!rooms.includes("全部")) {
+        filter_num += 1;
+      }
+
+      console.log('篩選條件數: ' + filter_num); // test
+
+      for (var i = 0; i < items.length; i++) {
+  
+        if (items[i]['url'] && items[i]['url'] != '/collection') {
+          var tags = items[i]['tags'].replace('"', ''); // 各作品tag
+          var matched_num = 0; // 符合篩選條件數量
+
+          if (tags.includes(type)) {
+            matched_num += 1;
+          }
+
+          if (tags.includes(ping)) {
+            matched_num += 1;
+          }
+
+          if (tags.includes(budget)) {
+            matched_num += 1;
+          }
+
+          if (tags.includes(rooms)) {
+            matched_num += 1;
+          }
+
+          console.log('符合篩選條件數: ' + matched_num); // test
+
+          if (matched_num == 4) {
+            content += ' \
+              <div class="col-12 col-sm-6 p-1"> \
+                <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0"> \
+                  <a href="' + items[i]['url'] + '"> \
+                    <img \
+                      alt="' + items[i]['title'] + '" \
+                      src="' + items[i]['image'] + '" \
+                      layout="responsive"> \
+                    <img> \
+                  <div class="slide_item_text"> \
+                      <p>' + items[i]['title'] + '</p>\
+                  </div>  \
+                  <div class="sec02-p-dec p-1 mt-1 text-center">\
+                    <h5 class="card-title">' + items[i]['title'] + '</h5>\
+                    <p>' + items[i]['description'] + '</p>\
+                  </div>\
+                  </div> \
+                </a> \
+                </div> \
+              </div>';
+          }
+        }
+      }
+
+      // 載入符合篩選條件的作品
+      var update_info = document.querySelectorAll('.update_info');
+
+      if (content) {
+        // 查無資料畫面
+        console.log('有資料'); // test
+      } else {
+        console.log('無資料'); // test
+
+        content += ' \
+          <div class="card bg-primary text-white text-center"> \
+            <div class="card-body p-5"> \
+              <div class="mb-3"> \
+                <b>找不到符合條件的作品</b> \
+              </div> \
+              <div class="mb-3"> \
+              ' + type + ' \
+              </div> \
+              <div class="mb-3"> \
+              ' + ping + ' \
+              </div> \
+              <div class="mb-3"> \
+              ' + budget + ' \
+              </div> \
+              <div class="mb-3"> \
+              ' + rooms + ' \
+              </div> \
+              <div> \
+                <a href="/collection" class="btn btn-primary">重新查詢</a> \
+              </div> \
+            </div> \
+          </div>';
+      }
+
+      // 更新畫面
+      for (var i = 0; i < update_info.length; i++) {
+        update_info[i].innerHTML = content;
+      }
+    }).catch((error) => {
+      console.error('Error:', error);
+    });
+}
+
+// 預設選項值
+var type = "全部類型";
+var ping = "全部坪數";
+var budget = "全部預算";
+var rooms = "全部格局";
+
+// 類型
+var items = document.getElementsByClassName('type');
+for (var i = 0; i < items.length; i++) {
+  console.log('選擇類型..........');
+  items[i].addEventListener("change", change_type);
+}
+
+// 坪數
+var items = document.getElementsByClassName('ping');
+for (var i = 0; i < items.length; i++) {
+  console.log('選擇坪數..........');
+  items[i].addEventListener("change", change_ping);
+}
+
+// 預算
+var items = document.getElementsByClassName('budget');
+for (var i = 0; i < items.length; i++) {
+  console.log('選擇預算..........');
+  items[i].addEventListener("change", change_budget);
+}
+
+// 格局
+var items = document.getElementsByClassName('rooms');
+for (var i = 0; i < items.length; i++) {
+  console.log('選擇格局..........');
+  items[i].addEventListener("change", change_rooms);
+}