https://princessfeminin.com/Views/Themes/skincare/V1/Products/Products.js

1
2document.addEventListener('DOMContentLoaded', function () {
3    setTimeout(() => {
4
5
6        $(".tf-view-layout-switch").on("click", function () {
7
8            const layout = $(this).data("value-layout");
9
10
11            // Define pageSize mapping based on layout
12            const pageSizeMap = {
13                'tf-col-2': 8,
14                'tf-col-3': 12,
15                'tf-col-4': 16,
16                'tf-col-5': 20,
17                'tf-col-6': 24
18            };
19
20
21            // Get the pageSize for the selected layout
22            const pageSize = pageSizeMap[layout];
23
24            // Directly update URL without changing UI first
25            updateURLWithPageSize(pageSize || 20);
26
27
28            //if (layout === "list") {
29            //    isListActive = true;
30            //    $("#gridLayout").hide();
31            //    $("#listLayout").show();
32
33            //    // You might want to set a specific pageSize for list view too
34            //    updateURLWithPageSize(pageSize || 20); // default to 10 for list view
35
36            //} else {
37            //    isListActive = false;
38            //    $("#listLayout").hide();
39            //    setGridLayout(layout);
40
41            //    updateURLWithPageSize(pageSize);
42            //}
43        });
44
45
46        function setGridLayout(layoutClass) {
47            $("#gridLayout")
48                .show()
49                .removeClass()
50                .addClass(`wrapper-shop tf-grid-layout ${layoutClass}`);
51            $(".tf-view-layout-switch").removeClass("active");
52            $(`.tf-view-layout-switch[data-value-layout="${layoutClass}"]`).addClass(
53                "active"
54            );
55        }
56
57
58        function updateURLWithPageSize(pageSize) {
59            const url = new URL(window.location.href);
60
61            // Set the pageSize parameter
62            if (pageSize) {
63                url.searchParams.set('pageSize', pageSize);
64            }
65
66            // Reset to first page when changing page size
67            url.searchParams.set('pageNumber', '1');
68
69            // Redirect to the new URL
70            window.location.href = url.toString();
71        }
72
73
74
75    }, 100);
76});
77
78
79
80
81
82$(".select-item").on("click", function () {
83
84
85    const sortValue = $(this).data("sort-value");
86    $(".select-item").removeClass("active");
87    $(this).addClass("active");
88    $(".text-sort-value").text($(this).find(".text-value-item").text());
89
90    //applyFilter(sortValue, isListActive);
91});
92
93
94
95document.querySelectorAll('.tf-dropdown-sort .select-item').forEach(item => {
96
97
98    item.addEventListener('click', function () {
99
100
101        let sortValue = this.getAttribute('data-sort-value') || ''; // default to empty if no data-sort-value
102
103        const url = new URL(window.location.href);
104        const currentSort = url.searchParams.get('sort') || '';
105
106        // If clicked sort value equals current, do nothing (or you can reload anyway)
107        if (currentSort === sortValue) return;
108
109        if (sortValue === '') {
110            // If empty value, remove sort param
111            url.searchParams.delete('sort');
112        } else {
113            // Else update or add sort param
114            url.searchParams.set('sort', sortValue);
115        }
116
117        window.location.href = url.toString();
118    });
119});
120
121
122
123function handleSortChange() {
124    $(".select-item").on("click", function () {
125        const sortValue = $(this).data("sort-value");
126
127        //$(".select-item").removeClass("active");
128        //$(this).addClass("active");
129        //$(".text-sort-value").text($(this).find(".text-value-item").text());
130        const url = new URL(window.location.href);
131        const currentSort = url.searchParams.get('sort') || '';
132
133        // If clicked sort value equals current, do nothing (or you can reload anyway)
134        if (currentSort === sortValue) return;
135
136        if (sortValue === '') {
137            // If empty value, remove sort param
138            url.searchParams.delete('sort');
139        } else {
140            // Else update or add sort param
141            url.searchParams.set('sort', sortValue);
142        }
143
144        // Reset to first page when sorting
145        url.searchParams.set('pageNumber', '1');
146
147        window.location.href = url.toString();
148    });
149}
150
151
152setTimeout(() => {
153    handleSortChange()
154}, 1000);
155
156
157document.addEventListener('DOMContentLoaded', function () {
158    const url = new URL(window.location.href);
159    const sortParam = url.searchParams.get('sort');
160
161    if (sortParam) {
162        // Find the dropdown item that matches the sort value
163        const selectedItem = document.querySelector(`.tf-dropdown-sort .select-item[data-sort-value="${sortParam}"]`);
164
165        if (selectedItem) {
166            const textValue = selectedItem.querySelector('.text-value-item').textContent.trim();
167
168            // Update the display text
169            const textSortValue = document.querySelector('.tf-dropdown-sort .btn-select .text-sort-value');
170            if (textSortValue) {
171                textSortValue.textContent = textValue;
172            }
173        }
174    }
175
176
177
178    // Set active layout switch based on URL pageSize parameter
179    const pageSizeParam = url.searchParams.get('pageSize');
180    if (pageSizeParam) {
181        const pageSizeToLayoutMap = {
182            '4': 'tf-col-2',
183            '6': 'tf-col-3',
184            '8': 'tf-col-4',
185            '10': 'tf-col-5',
186            '12': 'tf-col-6'
187        };
188
189        const layoutClass = pageSizeToLayoutMap[pageSizeParam];
190        if (layoutClass) {
191            $(".tf-view-layout-switch").removeClass("active");
192            $(`.tf-view-layout-switch[data-value-layout="${layoutClass}"]`).addClass("active");
193
194            // Also update the grid layout class
195            $("#gridLayout")
196                .removeClass()
197                .addClass(`wrapper-shop tf-grid-layout ${layoutClass}`);
198        }
199    }
200
201
202});