{"id":8631,"date":"2024-07-01T09:42:59","date_gmt":"2024-07-01T09:42:59","guid":{"rendered":"https:\/\/wpsection.com\/nexmartall\/?page_id=8631"},"modified":"2024-08-22T07:03:54","modified_gmt":"2024-08-22T07:03:54","slug":"ajax-filter-vertical","status":"publish","type":"page","link":"https:\/\/wpsection.com\/nexmartall\/ajax-filter-vertical\/","title":{"rendered":"Ajax Filter Vertical"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8631\" class=\"elementor elementor-8631\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b062992 e-flex e-con-boxed e-con e-parent\" data-id=\"b062992\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-845987f elementor-widget elementor-widget-shortcode\" data-id=\"845987f\" data-element_type=\"widget\" data-e-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:\/\/wpsection.com\/nexmartall\/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=\"action-camera\">Action Camera<\/option><option value=\"adventure\">Adventure<\/option><option value=\"agricultural-machinery\">Agricultural Machinery<\/option><option value=\"airpods\">airpods<\/option><option value=\"accessories-animal-feed\">Animal Accessories<\/option><option value=\"animal-feed\">Animal Feed<\/option><option value=\"food-animal-feed\">Animal Food<\/option><option value=\"apple-mobile-2\">Apple<\/option><option value=\"accessories-baby-store\">Baby Accessories<\/option><option value=\"baby-care\">Baby Care<\/option><option value=\"baby-crib\">Baby Crib<\/option><option value=\"baby-store\">Baby Store<\/option><option value=\"bike-parts\">Bike Parts<\/option><option value=\"bonsai-plant\">Bonsai plant<\/option><option value=\"books\">Books<\/option><option value=\"bracelet\">Bracelet<\/option><option value=\"bubble\">Bubble<\/option><option value=\"bucket-bags\">Bucket Bags<\/option><option value=\"butter\">Butter<\/option><option value=\"cake\">Cake<\/option><option value=\"camera\">Camera<\/option><option value=\"capsicum\">Capsicum<\/option><option value=\"car-battery\">Car Battery<\/option><option value=\"car-chair\">Car Chair<\/option><option value=\"car-keys\">Car Keys<\/option><option value=\"car-mirror\">Car Mirror<\/option><option value=\"car-parts\">Car Parts<\/option><option value=\"car-tires\">Car Tires<\/option><option value=\"car-turbocharger\">Car Turbocharger<\/option><option value=\"cauliflower\">Cauliflower<\/option><option value=\"cctv-camera\">CCTV Camera<\/option><option value=\"chain\">Chain<\/option><option value=\"chair\">Chair<\/option><option value=\"chanel\">Chanel<\/option><option value=\"chocolate\">Chocolate<\/option><option value=\"circular-saw\">Circular Saw<\/option><option value=\"cleaner\">Cleaner<\/option><option value=\"clothes\">Clothes<\/option><option value=\"accessories-clothing-store\">Clothing Accessories<\/option><option value=\"clothing-store\">Clothing Store<\/option><option value=\"cold-drink\">Cold Drink<\/option><option value=\"color-backgorubd\">Color Backgorubd<\/option><option value=\"condom\">Condom<\/option><option value=\"corn\">Corn<\/option><option value=\"cover\">Cover<\/option><option value=\"cutter\">Cutter<\/option><option value=\"cycad-plant\">Cycad plant<\/option><option value=\"decker\">Decker<\/option><option value=\"denim-shirt\">Denim Shirt<\/option><option value=\"desktop\">Desktop<\/option><option value=\"device\">Device<\/option><option value=\"accessories-smart-device\">Device Accessories<\/option><option value=\"dji\">DJI<\/option><option value=\"drill\">Drill<\/option><option value=\"drones\">Drones<\/option><option value=\"dslr-camera\">DSLR Camera<\/option><option value=\"duffel-bags\">Duffel Bags<\/option><option value=\"dystopian\">Dystopian<\/option><option value=\"ear-ring\">Ear Ring<\/option><option value=\"electronic-products\">Electronic Products<\/option><option value=\"essentials\">Essentials<\/option><option value=\"fantasy\">Fantasy<\/option><option value=\"ferns\">Ferns<\/option><option value=\"ficus-plant\">Ficus Plant<\/option><option value=\"fish\">Fish<\/option><option value=\"flora-bunda\">Flora Bunda<\/option><option value=\"food\">Food<\/option><option value=\"fruit\">Fruit<\/option><option value=\"furnimart\">Furnimart<\/option><option value=\"furniture\">Furniture<\/option><option value=\"chair-furniture\">Furniture Chair<\/option><option value=\"gaming\">Gaming<\/option><option value=\"gaming-smart-device\">Gaming Pc<\/option><option value=\"garlic\">Garlic<\/option><option value=\"gloves\">Gloves<\/option><option value=\"graphics-cards\">Graphics Cards<\/option><option value=\"grocery\">Grocery<\/option><option value=\"fish-meat-and-fish\">Grocery Fish<\/option><option value=\"meat-meat-and-fish\">Grocery Meat<\/option><option value=\"vegetables\">Grocery Vegetables<\/option><option value=\"head-light\">HEAD LIGHT<\/option><option value=\"headphones\">Headphones<\/option><option value=\"headphones-smart-device\">Headphones Pc<\/option><option value=\"helmet\">Helmet<\/option><option value=\"hobo-bags\">Hobo Bags<\/option><option value=\"holystone\">Holystone<\/option><option value=\"honey\">Honey<\/option><option value=\"horror\">Horror<\/option><option value=\"hot-deals\">Hot Deals<\/option><option value=\"huawei\">HUAWEi<\/option><option value=\"husqvarna\">Husqvarna<\/option><option value=\"interior-plant\">Interior plant<\/option><option value=\"internet\">Internet<\/option><option value=\"jacket\">Jacket<\/option><option value=\"jewelry-store\">Jewelry Store<\/option><option value=\"jw-pei\">JW Pei<\/option><option value=\"kick\">Kick<\/option><option value=\"kids-pant\">Kids Pant<\/option><option value=\"kids-top\">Kids Top<\/option><option value=\"kohlrabi\">Kohlrabi<\/option><option value=\"lamp\">Lamp<\/option><option value=\"laptop\">Laptop<\/option><option value=\"light\">Light<\/option><option value=\"machinery\">Machinery<\/option><option value=\"makita\">Makita<\/option><option value=\"mask\">Mask<\/option><option value=\"mask-animal-feed\">Mask Animal<\/option><option value=\"meat\">Meat<\/option><option value=\"meat-and-fish\">Meat and Fish<\/option><option value=\"medical\">Medical<\/option><option value=\"accessories\">Medical Accessories<\/option><option value=\"medicine\">Medicine<\/option><option value=\"memoirs\">Memoirs<\/option><option value=\"men-jeans\">Men Jeans<\/option><option value=\"men-shirt\">Men Shirt<\/option><option value=\"mens-glass\">Mens Glass<\/option><option value=\"mens-watch\">Mens Watch<\/option><option value=\"mobile-2\">Mobile<\/option><option value=\"mobile\">Mobile Phone<\/option><option value=\"monitor\">Monitor<\/option><option value=\"motherboard\">Motherboard<\/option><option value=\"music\">Music<\/option><option value=\"music-smart-device\">Music PC<\/option><option value=\"mystery\">Mystery<\/option><option value=\"nothing\">Nothing<\/option><option value=\"oil\">Oil<\/option><option value=\"oneplus\">OnePlus<\/option><option value=\"oppo\">Oppo<\/option><option value=\"optical-store\">Optical Store<\/option><option value=\"accessories-agricultural\">Organic Accessories<\/option><option value=\"parrot\">Parrot<\/option><option value=\"pet-homes\">Pet Homes<\/option><option value=\"poteto\">Poteto<\/option><option value=\"power\">Power<\/option><option value=\"power-bank\">Power Bank<\/option><option value=\"powervision\">Powervision<\/option><option value=\"prada\">Prada<\/option><option value=\"professional\">Professional<\/option><option value=\"protein-powder\">Protein Powder<\/option><option value=\"pumpkin\">Pumpkin<\/option><option value=\"range\">Range<\/option><option value=\"ring\">Ring<\/option><option value=\"samsung\">Samsung<\/option><option value=\"shrubs\">Shrubs<\/option><option value=\"smart-device\">Smart Device<\/option><option value=\"snack\">Snack<\/option><option value=\"sneaker\">Sneaker<\/option><option value=\"sofa\">Sofa<\/option><option value=\"sofa-furniture\">Sofa furniture<\/option><option value=\"storage\">Storage<\/option><option value=\"suit\">Suit<\/option><option value=\"table\">Table<\/option><option value=\"thriller\">Thriller<\/option><option value=\"tire\">Tire<\/option><option value=\"tomato\">Tomato<\/option><option value=\"toys\">Toys<\/option><option value=\"triton\">Triton<\/option><option value=\"tv\">TV<\/option><option value=\"vegetables-2\">Vegetables<\/option><option value=\"vivo\">Vivo<\/option><option value=\"wacker\">Wacker<\/option><option value=\"watch\">Watch<\/option><option value=\"watch-zone\">Watch Zone<\/option><option value=\"water-pot\">Water Pot<\/option><option value=\"wireless-charger\">Wireless Charger<\/option><option value=\"women-collection\">Women Collection<\/option><option value=\"women-glass\">WoMen Glass<\/option><option value=\"women-t-shirt\">Women T Shirt<\/option><option value=\"women-watch\">WoMen Watch<\/option><option value=\"xiaomi\">xiaomi<\/option><option value=\"yuneec\">Yuneec<\/option><\/select><select name=\"tag\"><option value=\"\">Select Tag<\/option><option value=\"rims\">rims<\/option><option value=\"sliver\">sliver<\/option><option value=\"socks\">Socks<\/option><option value=\"store\">store<\/option><option value=\"tires\">tires<\/option><option value=\"wheels\">wheels<\/option><\/select><select name=\"on_sale\"><option value=\"\">On Sale<\/option><option value=\"1\">Yes<\/option><option value=\"0\">No<\/option><\/select><select name=\"in_stock\"><option value=\"\">In Stock<\/option><option value=\"1\">Yes<\/option><option value=\"0\">No<\/option><\/select><select name=\"rating\"><option value=\"\">Select Rating<\/option><option value=\"5\">5 stars<\/option><option value=\"4\">4 stars<\/option><option value=\"3\">3 stars<\/option><\/select><select name=\"price\"><option value=\"\">Select Price Range<\/option><option value=\"0-50\">$0 - $50<\/option><option value=\"51-100\">$51 - $100<\/option><option value=\"101-200\">$101 - $200<\/option><\/select><select name=\"color\"><option value=\"\">Select Color<\/option><option value=\"orange\">orange<\/option><option value=\"pink\">pink<\/option><option value=\"red\">red<\/option><\/select><select name=\"size\"><option value=\"\">Select Size<\/option><option value=\"any\">any<\/option><\/select><select name=\"gender\"><option value=\"\">Select Gender<\/option><option value=\"female\">Female<\/option><option value=\"male\">Male<\/option><\/select><select name=\"brand\"><option value=\"\">Select Brand<\/option><option value=\"iphone\">Iphone<\/option><\/select><select name=\"makeyear\"><option value=\"\">Select Year<\/option><option value=\"2023\">2023<\/option><option value=\"2024\">2024<\/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\t\t<\/div>\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":"tpl-default-elementor.php","meta":{"footnotes":""},"class_list":["post-8631","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpsection.com\/nexmartall\/wp-json\/wp\/v2\/pages\/8631","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpsection.com\/nexmartall\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpsection.com\/nexmartall\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpsection.com\/nexmartall\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpsection.com\/nexmartall\/wp-json\/wp\/v2\/comments?post=8631"}],"version-history":[{"count":0,"href":"https:\/\/wpsection.com\/nexmartall\/wp-json\/wp\/v2\/pages\/8631\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpsection.com\/nexmartall\/wp-json\/wp\/v2\/media?parent=8631"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}