https://houseofhm.com/Views/Themes/decor/V1/Products/Products.js

1
2
3
4(function () {
5    document.addEventListener(
6        'click',
7        function (e) {
8            var item = e.target.closest('.tf-dropdown-sort .select-item');
9            if (!item) return;
10            var sortAttr = item.getAttribute('data-sort-value');
11            if (sortAttr == null || !/^\d+$/.test(String(sortAttr).trim())) return;
12
13            e.preventDefault();
14            e.stopImmediatePropagation();
15
16            var sortValue = String(sortAttr).trim();
17            var url = new URL(window.location.href);
18            var currentSort = url.searchParams.get('sort') || '';
19            if (currentSort === sortValue) return;
20
21            url.searchParams.set('sort', sortValue);
22            url.searchParams.set('pageNumber', '1');
23            window.location.href = url.toString();
24        },
25        true
26    );
27})();
28
29
30document.addEventListener('DOMContentLoaded', function () {
31    setTimeout(() => {
32
33
34        $(".tf-view-layout-switch").on("click", function () {
35
36            const layout = $(this).data("value-layout");
37
38
39            // Define pageSize mapping based on layout
40            const pageSizeMap = {
41                'tf-col-2': 4,
42                'tf-col-3': 6,
43                'tf-col-4': 8,
44                'tf-col-5': 10,
45                'tf-col-6': 12
46            };
47
48
49            // Get the pageSize for the selected layout
50            const pageSize = pageSizeMap[layout];
51
52            // Directly update URL without changing UI first
53            updateURLWithPageSize(pageSize || 10);
54
55
56            //if (layout === "list") {
57            //    isListActive = true;
58            //    $("#gridLayout").hide();
59            //    $("#listLayout").show();
60
61            //    // You might want to set a specific pageSize for list view too
62            //    updateURLWithPageSize(pageSize || 10); // default to 10 for list view
63
64            //} else {
65            //    isListActive = false;
66            //    $("#listLayout").hide();
67            //    setGridLayout(layout);
68
69            //    updateURLWithPageSize(pageSize);
70            //}
71        });
72
73
74        function setGridLayout(layoutClass) {
75            $("#gridLayout")
76                .show()
77                .removeClass()
78                .addClass(`wrapper-shop tf-grid-layout ${layoutClass}`);
79            $(".tf-view-layout-switch").removeClass("active");
80            $(`.tf-view-layout-switch[data-value-layout="${layoutClass}"]`).addClass(
81                "active"
82            );
83        }
84
85
86        function updateURLWithPageSize(pageSize) {
87            const url = new URL(window.location.href);
88
89            // Set the pageSize parameter
90            if (pageSize) {
91                url.searchParams.set('pageSize', pageSize);
92            }
93
94            // Reset to first page when changing page size
95            url.searchParams.set('pageNumber', '1');
96
97            // Redirect to the new URL
98            window.location.href = url.toString();
99        }
100
101
102
103    }, 100);
104});
105
106
107
108
109
110document.addEventListener('DOMContentLoaded', function () {
111    const url = new URL(window.location.href);
112
113    // Set active layout switch based on URL pageSize parameter
114    const pageSizeParam = url.searchParams.get('pageSize');
115    if (pageSizeParam) {
116        const pageSizeToLayoutMap = {
117            '4': 'tf-col-2',
118            '6': 'tf-col-3',
119            '8': 'tf-col-4',
120            '10': 'tf-col-5',
121            '12': 'tf-col-6'
122        };
123
124        const layoutClass = pageSizeToLayoutMap[pageSizeParam];
125        if (layoutClass) {
126            $(".tf-view-layout-switch").removeClass("active");
127            $(`.tf-view-layout-switch[data-value-layout="${layoutClass}"]`).addClass("active");
128
129            // Also update the grid layout class
130            $("#gridLayout")
131                .removeClass()
132                .addClass(`wrapper-shop tf-grid-layout ${layoutClass}`);
133        }
134    }
135
136
137});