{"id":6244,"date":"2024-05-26T07:04:16","date_gmt":"2024-05-26T07:04:16","guid":{"rendered":"https:\/\/23july.hostlin.com\/garaze\/?page_id=6244"},"modified":"2024-05-26T07:06:18","modified_gmt":"2024-05-26T07:06:18","slug":"ajax-filter-vertical","status":"publish","type":"page","link":"https:\/\/23july.hostlin.com\/garaze\/ajax-filter-vertical\/","title":{"rendered":"Ajax Filter Vertical"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6244\" class=\"elementor elementor-6244\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a394f7b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a394f7b\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-970e756\" data-id=\"970e756\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-af38150 elementor-widget elementor-widget-shortcode\" data-id=\"af38150\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n <form id=\"product-filters\" class=\"wps_ajax\" action=\"https:\/\/23july.hostlin.com\/garaze\/wp-admin\/admin-ajax.php\" method=\"POST\" data-posts-per-page=\"12\">\n      \n\n\t\t\n\t\t\n\t\t<select name=\"orderby\">\n    <option value=\"date\" selected=\"selected\">Sort by latest<\/option>\n    <option value=\"price\">Sort by price: low to high<\/option>\n    <option value=\"price-desc\">Sort by price: high to low<\/option>\n    <option value=\"rating\">Sort by average rating<\/option>\n    <option value=\"popularity\">Sort by popularity<\/option>\n    <option value=\"title\">Sort by title<\/option>\n    <option value=\"author\">Sort by author<\/option>\n<\/select>\n\t\t\n\t\t\t\t\t\n<select name=\"category\"><option value=\"\">Select Category<\/option><option value=\"braking-system\">Braking System<\/option><option value=\"car-wheels\">Car Wheels<\/option><option value=\"filter\">Filter<\/option><option value=\"fuel\">Fuel<\/option><option value=\"interior\">Interior<\/option><option value=\"key-ring\">Key Ring<\/option><option value=\"light-optics\">Light &amp; Optics<\/option><\/select><select name=\"tag\"><option value=\"\">Select Tag<\/option><option value=\"break\">Break<\/option><option value=\"car\">Car<\/option><option value=\"filter\">Filter<\/option><option value=\"fuel\">Fuel<\/option><option value=\"interior\">Interior<\/option><option value=\"piston\">Piston<\/option><option value=\"wheel\">Wheel<\/option><\/select><select name=\"color\"><option value=\"\">Select Color<\/option><option value=\"black\">Black<\/option><option value=\"green\">Green<\/option><option value=\"red\">Red<\/option><option value=\"while\">While<\/option><\/select><select name=\"size\"><option value=\"\">Select Size<\/option><option value=\"g-package\">G Package<\/option><option value=\"gl\">GL<\/option><option value=\"s\">S<\/option><option value=\"s-package\">S Package<\/option><option value=\"sl\">SL<\/option><option value=\"xl\">XL<\/option><\/select><select name=\"gender\"><option value=\"\">Select Gender<\/option><option value=\"male\">Male<\/option><\/select><select name=\"brand\"><option value=\"\">Select Brand<\/option><option value=\"2024\">2024<\/option><option value=\"audi\">Audi<\/option><option value=\"bmw\">BMW<\/option><option value=\"honda\">Honda<\/option><option value=\"marchidies\">Marchidies<\/option><option value=\"toyota\">Toyota<\/option><\/select><select name=\"model\"><option value=\"\">Select Model<\/option><option value=\"aqua\">Aqua<\/option><option value=\"chr\">CHR<\/option><option value=\"corolla\">Corolla<\/option><option value=\"ep-82\">EP-82<\/option><option value=\"fit\">Fit<\/option><option value=\"grace\">Grace<\/option><option value=\"vezel\">Vezel<\/option><option value=\"x-100\">X-100<\/option><option value=\"x-11\">X-11<\/option><\/select><select name=\"makeyear\"><option value=\"\">Select Year<\/option><option value=\"2021\">2021<\/option><option value=\"2022\">2022<\/option><option value=\"2023\">2023<\/option><option value=\"2024\">2024<\/option><\/select><select name=\"engine\"><option value=\"\">Select Features<\/option><option value=\"fancy\">Fancy<\/option><option value=\"hybride\">Hybride<\/option><option value=\"plugin-hybride\">Plugin Hybride<\/option><\/select>\t \n\t \n\n\t \n\n\t \n        <button type=\"button\" id=\"reset-filters\"><i class=\"dashicons dashicons-update\"><\/i><\/button>\n        <input type=\"hidden\" name=\"action\" value=\"product_filter\">\n        <button type=\"button\" class=\"wps_close\"><i class=\"dashicons dashicons-no\"><\/i><\/button>\n    <\/form>\n\n    <div id=\"products-container\" class=\"wps_ajax_area\">\n        <div class=\"loading-spinner-wrap\">\n            <div id=\"loading-spinner\" class=\"loading-spinner\"><\/div> \n        <\/div>  \n        <div id=\"products\" class=\"row\"><\/div> \n    <\/div>\n\n<script>\n    jQuery(document).ready(function ($) {\n        var ajaxFlag = false; \/\/ Flag to prevent multiple AJAX requests\n\n        function loadProducts() {\n            if (ajaxFlag) return; \/\/ If AJAX request is already in progress, do nothing\n            ajaxFlag = true;\n\n            var filter = $('#product-filters');\n            $.ajax({\n                url: filter.attr('action'),\n                data: filter.serialize(), \/\/ form data\n                type: filter.attr('method'), \/\/ POST\n                success: function (data) {\n                    $('#products').html(data); \/\/ insert data\n                    ajaxFlag = false; \/\/ Reset the flag after AJAX request is complete\n                },\n            });\n        }\n\n        \/\/ Initial load of products with filters applied\n        loadProducts();\n\n        $('#apply-filters').on('click', function (e) {\n            e.preventDefault();\n            loadProducts();\n        });\n\n        $('#reset-filters').on('click', function (e) {\n            e.preventDefault();\n            \/\/ Reset all filter options\n            $('#product-filters select').val('');\n            \/\/ Trigger the click event on the Apply Filters button to reload the products\n            $('#apply-filters').click();\n        });\n\n        \/\/ Close button for hiding the result area and resetting the form\n        $('.wps_close').on('click', function () {\n            \/\/ Hide the result area\n            $('.wps_ajax_area').hide();\n\n            \/\/ Reset all filter options to their default (main) text\n            $('#product-filters select').each(function () {\n                \/\/ Reset to the first child option\n                $(this).val($(this).find('option:first-child').val());\n\n                \/\/ Remove active class from all selects\n                $(this).removeClass('active');\n            });\n\n            \/\/ Reset the selected filter attribute to the default category\n            $('#product-filters').attr('data-selected-filter', '');\n\n            \/\/ Update the visibility of the close button\n            updateCloseButtonVisibility();\n\n            \/\/ Reset the form to its initial state\n            $('#product-filters')[0].reset();\n        });\n\n        \/\/ Function to update the visibility of the close button based on whether anything is selected\n        function updateCloseButtonVisibility() {\n            var anySelectActive = $('#product-filters select.active').length > 0;\n            $('.wps_close').toggle(anySelectActive);\n        }\n\n        \/\/ Initial update of the close button visibility\n        updateCloseButtonVisibility();\n    });\n\n  \n\t\t\n\t\/*\t\n        jQuery(document).ready(function ($) {\n            var ajaxFlag = false; \/\/ Flag to prevent multiple AJAX requests\n\n            $('#apply-filters').on('click', function (e) {\n                if (ajaxFlag) return; \/\/ If AJAX request is already in progress, do nothing\n                ajaxFlag = true;\n\n                e.preventDefault();\n                var filter = $('#product-filters');\n                $.ajax({\n                    url: filter.attr('action'),\n                    data: filter.serialize(), \/\/ form data\n                    type: filter.attr('method'), \/\/ POST\n                    success: function (data) {\n                        $('#products').html(data); \/\/ insert data\n                        ajaxFlag = false; \/\/ Reset the flag after AJAX request is complete\n                    },\n                });\n            });\n\n            $('#reset-filters').on('click', function (e) {\n                e.preventDefault();\n                \/\/ Reset all filter options\n                $('#product-filters select').val('');\n                \/\/ Trigger the click event on the Apply Filters button to reload the products\n                $('#apply-filters').click();\n            });\n\n            \/\/ Close button for hiding the result area and resetting the form\n            $('.wps_close').on('click', function () {\n                \/\/ Hide the result area\n                $('.wps_ajax_area').hide();\n\n                \/\/ Reset all filter options to their default (main) text\n                $('#product-filters select').each(function () {\n                    \/\/ Reset to the first child option\n                    $(this).val($(this).find('option:first-child').val());\n\n                    \/\/ Remove active class from all selects\n                    $(this).removeClass('active');\n                });\n\n                \/\/ Reset the selected filter attribute to the default category\n                $('#product-filters').attr('data-selected-filter', '');\n\n                \/\/ Update the visibility of the close button\n                updateCloseButtonVisibility();\n\n                \/\/ Reset the form to its initial state\n                $('#product-filters')[0].reset();\n            });\n\n            \/\/ Function to update the visibility of the close button based on whether anything is selected\n            function updateCloseButtonVisibility() {\n                var anySelectActive = $('#product-filters select.active').length > 0;\n                $('.wps_close').toggle(anySelectActive);\n            }\n\n            \/\/ Initial update of the close button visibility\n            updateCloseButtonVisibility();\n        });\n\t\t\n\t*\/\t\n    <\/script>\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6244","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/23july.hostlin.com\/garaze\/wp-json\/wp\/v2\/pages\/6244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/23july.hostlin.com\/garaze\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/23july.hostlin.com\/garaze\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/23july.hostlin.com\/garaze\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/23july.hostlin.com\/garaze\/wp-json\/wp\/v2\/comments?post=6244"}],"version-history":[{"count":0,"href":"https:\/\/23july.hostlin.com\/garaze\/wp-json\/wp\/v2\/pages\/6244\/revisions"}],"wp:attachment":[{"href":"https:\/\/23july.hostlin.com\/garaze\/wp-json\/wp\/v2\/media?parent=6244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}