columns update

Columns-detail.html

@@ -1423,9 +1423,9 @@
                         </div>
 
 
-                        <!-- <div class="vue-waterfall popular">
-                            <div class="row px-0 mx-0">
-                                <div class="col-12 col-md-4 ps-0">
+                        <div class="vue-waterfall popular">
+                            <div class="row px-0 mx-0 PopularColumns">
+                                <!-- <div class="col-12 col-md-4 ps-0">
                                     <div class="cardList__items">
                                         <img src="https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_338_01.jpg"
                                             alt="">
@@ -1508,9 +1508,9 @@
                                             <p><a class="likeSee__tag--item" href="/columns/lists/木工-keyword/" target="_blank">木工</a><a class="likeSee__tag--item" href="/columns/lists/diy-keyword/" target="_blank">diy</a><a class="likeSee__tag--item" href="/columns/lists/實木-keyword/" target="_blank">實木</a><a class="likeSee__tag--item" href="/columns/lists/集成材-keyword/" target="_blank">集成材</a><a class="likeSee__tag--item" href="/columns/lists/三合板-keyword/" target="_blank">三合板</a></p>
                                         </div>
                                     </div>
-                                </div>
+                                </div> -->
                             </div>
-                        </div> -->
+                        </div>
                     </div>
                 </div>
             </div>

columns.js

@@ -1,3 +1,14 @@
+$(".popular").hide();
+
+$(document).on("click", ".likeSee__state__filter--item", function (event) {
+    $(".News").toggle();
+    $(".popular").toggle();
+    $(".likeSee__state__filter--item").removeClass('active');
+    $(this).addClass("active");
+});
+
+
+
 function get_data() {
     $.ajax({
         method: "GET",
@@ -16,7 +27,7 @@ function get_data() {
         let breadcrumbTitle="";
         let article_info="";
         let OtherColumns="";
-
+        let PopularColumns="";
 
 
 
@@ -58,6 +69,27 @@ function get_data() {
             
         }
 
+
+        for(let i=0; i<msg[0].PopularColumns.length; i++){
+            PopularColumns+=
+            '<div class="col-12 col-md-4 ps-0"><div class="cardList__items">\
+                <a target="_blank" href="https://hhh.com.tw/columns/detail/'+msg[0].PopularColumns[i].Columnsid+'/"> <img src="'+msg[0].PopularColumns[i].ColumnsCoverImg+'" alt="">\
+            <div class="cardList__items__content">\
+                <a href="https://hhh.com.tw/columns/detail/'+msg[0].PopularColumns[i].Columnsid+'/"" target="_blank">\
+                    <div class="cardList__items--title cardList__items--ellipse">\
+                        '+msg[0].PopularColumns[i].Columnstitle+'\
+                    </div>\
+                </a>'
+                PopularColumns+='<p>'
+                for(k=0; k<msg[0].PopularColumns[i].ColumnsTag.length; k++){
+                    PopularColumns+='\
+                    <a class="likeSee__tag--item" href="https://hhh.com.tw/columns/lists/'+msg[0].PopularColumns[i].ColumnsTag[k].tag+'-keyword/all-columntypea/" arget="_blank">'+msg[0].PopularColumns[i].ColumnsTag[k].Tag+'</a>'
+                }
+                PopularColumns+='</p>'
+                PopularColumns+='</div></div></div>'
+            
+        }
+
        
 
 
@@ -71,6 +103,10 @@ function get_data() {
 
         $('.OtherColumns').html(OtherColumns);
 
+        $('.PopularColumns').html(PopularColumns);
+
+        
+
 
 
     });

json/Columns.json

@@ -176,6 +176,138 @@
                     }
                 ]
             }
+        ],
+        "PopularColumns":[
+            
+            {
+                "Columnsid":"6384",
+                "ColumnsCoverImg": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point03_99_02-1.jpg",
+                "Columnstitle":" 石英磚、文化石磚、馬賽克磚.....等磁磚是怎麼製作的？裝修前簡單了解它們的身世吧!",
+                "ColumnsTag":[
+                    {
+                        "Tag":"建材"
+                    },
+                    {
+                        "Tag":"磁磚"
+                    },
+                    {
+                        "Tag":"馬賽克磚"
+                    },
+                    {
+                        "Tag":"玻化磚"
+                    },
+                    {
+                        "Tag":"文化石"
+                    }
+                ]
+            },
+            {
+                "Columnsid":"6368",
+                "ColumnsCoverImg": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point03_98_03.jpg",
+                "Columnstitle":"十分鐘快速了解磁磚種類、尺寸、機能、挑選方法！",
+                "ColumnsTag":[
+                    {
+                        "Tag":"磁磚"
+                    },
+                    {
+                        "Tag":"挑選"
+                    },
+                    {
+                        "Tag":"現代風"
+                    },
+                    {
+                        "Tag":"北歐風"
+                    },
+                    {
+                        "Tag":"鄉村風"
+                    }
+                ]
+            },   
+            {
+                "Columnsid":"6325",
+                "ColumnsCoverImg": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point03_92_01.jpg",
+                "Columnstitle":"【跟動物一起住】有毛小孩的家，空間建材這樣挑",
+                "ColumnsTag":[
+                    {
+                        "Tag":"建材"
+                    },
+                    {
+                        "Tag":"寵物"
+                    },
+                    {
+                        "Tag":"地板"
+                    },
+                    {
+                        "Tag":"家具"
+                    }
+                ]
+            },
+            {
+                "Columnsid":"6298",
+                "ColumnsCoverImg": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point03_88_06.jpg",
+                "Columnstitle":"【建材知識】超耐磨木地板、PVC塑膠地板、SPC石塑地板？優缺一次看！",
+                "ColumnsTag":[
+                    {
+                        "Tag":"建材知識"
+                    },
+                    {
+                        "Tag":"超耐磨木地板"
+                    },
+                    {
+                        "Tag":"PVC塑膠地板"
+                    },
+                    {
+                        "Tag":"SPC石塑地板"
+                    },
+                    {
+                        "Tag":"木地板"
+                    }
+                ]
+            },   
+            {
+                "Columnsid":"6294",
+                "ColumnsCoverImg": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point03_86_01.jpg",
+                "Columnstitle":"想自己做木工DIY？那你一定要認識實木、集成材與三合板！",
+                "ColumnsTag":[
+                    {
+                        "Tag":"木工"
+                    },
+                    {
+                        "Tag":"diy"
+                    },
+                    {
+                        "Tag":"實木"
+                    },
+                    {
+                        "Tag":"集成材"
+                    },
+                    {
+                        "Tag":"三合板"
+                    }
+                ]
+            },
+            {
+                "Columnsid":"6392",
+                "ColumnsCoverImg": "https://cloud.hhh.com.tw/upload/_hcolumn/content_20220113101218_0.jpg",
+                "Columnstitle":"擁擠小宅變身會呼吸的家!頂級日系廚具、珊瑚塗料演繹機能美學",
+                "ColumnsTag":[
+                    {
+                        "Tag":"伸達"
+                    },
+                    {
+                        "Tag":"廚具"
+                    },
+                    {
+                        "Tag":"無毒"
+                    },
+                    {
+                        "Tag":"竹桓"
+                    },
+                    {
+                        "Tag":"塗料"
+                    }
+                ]
+            }
         ]
     }
 ]