{"id":3083,"date":"2024-03-16T06:45:49","date_gmt":"2024-03-16T06:45:49","guid":{"rendered":"https:\/\/23july.hostlin.com\/garaze\/?page_id=3083"},"modified":"2024-06-27T03:15:09","modified_gmt":"2024-06-27T03:15:09","slug":"shop-ajax-left-sidebar","status":"publish","type":"page","link":"https:\/\/23july.hostlin.com\/garaze\/shop-ajax-left-sidebar\/","title":{"rendered":"Shop Ajax Left Sidebar"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3083\" class=\"elementor elementor-3083\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-052cbaf elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"052cbaf\" 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-2a48d8c\" data-id=\"2a48d8c\" 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-43cb97b elementor-widget elementor-widget-shortcode\" data-id=\"43cb97b\" 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<div  class=\"row\">\n\t\n <div class=\"col-lg-3 col-md-6   wps_order-left right\">\t\n\t\n\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        <ul class=\"filter-list wps_filter_list\">\n<li class=\"filter-buttons\">\n        <button type=\"button\" id=\"reset-filters\"><i class=\"dashicons dashicons-update\"><\/i> Reset<\/button>\n<\/li>\t\t\t\t\n\t\t\t\n            <li class=\"wps_sortby_list\">\n    <label>Sort By:<\/label>\n    <ul class=\"orderby-list\">\n        <!-- Your existing sorting options -->\n        <li>\n            <input type=\"checkbox\" name=\"orderby\" value=\"date\" id=\"orderby-date\">\n            <label for=\"orderby-date\">Latest Products<\/label>\n        <\/li>\n\t\t\n\n    <li>\n\t\t<input type=\"checkbox\" name=\"orderby\" value=\"rating\" id=\"orderby-rating\">\n\t\t<label for=\"orderby-rating\">Top Rated Products<\/label>\n\t<\/li>\n\t\t\n        <li>\n            <input type=\"checkbox\" name=\"orderby\" value=\"popularity\" id=\"orderby-popularity\">\n            <label for=\"orderby-popularity\">Popularity<\/label>\n        <\/li>\t\t\n\t\t\n        <li>\n            <input type=\"checkbox\" name=\"orderby\" value=\"price\" id=\"orderby-price\">\n            <label for=\"orderby-price\">Price: Low to High<\/label>\n        <\/li>\n        <li>\n            <input type=\"checkbox\" name=\"orderby\" value=\"price-desc\" id=\"orderby-price-desc\">\n            <label for=\"orderby-price-desc\">Price: High to Low<\/label>\n        <\/li>\n  \n                     \n        <li>\n            <input type=\"checkbox\" name=\"orderby\" value=\"title\" id=\"orderby-title\">\n            <label for=\"orderby-title\">Title<\/label>\n        <\/li>\n        <li>\n            <input type=\"checkbox\" name=\"orderby\" value=\"author\" id=\"orderby-author\">\n            <label for=\"orderby-author\">Author<\/label>\n        <\/li>\n        <!-- Add the \"In Stock\" option -->\n      \n    <\/ul>\n<\/li>\n                                <li class=\" wps_cat_list\" >\n                                    <label>Category:<\/label>\n                                    <ul>\n                                                                                    <li>\n                                                <input type=\"checkbox\" name=\"category[]\" value=\"braking-system\" id=\"braking-system\">\n                                                <label for=\"braking-system\">Braking System<\/label>\n                                            <\/li>\n                                                                                    <li>\n                                                <input type=\"checkbox\" name=\"category[]\" value=\"car-wheels\" id=\"car-wheels\">\n                                                <label for=\"car-wheels\">Car Wheels<\/label>\n                                            <\/li>\n                                                                                    <li>\n                                                <input type=\"checkbox\" name=\"category[]\" value=\"filter\" id=\"filter\">\n                                                <label for=\"filter\">Filter<\/label>\n                                            <\/li>\n                                                                                    <li>\n                                                <input type=\"checkbox\" name=\"category[]\" value=\"fuel\" id=\"fuel\">\n                                                <label for=\"fuel\">Fuel<\/label>\n                                            <\/li>\n                                                                                    <li>\n                                                <input type=\"checkbox\" name=\"category[]\" value=\"interior\" id=\"interior\">\n                                                <label for=\"interior\">Interior<\/label>\n                                            <\/li>\n                                                                                    <li>\n                                                <input type=\"checkbox\" name=\"category[]\" value=\"key-ring\" id=\"key-ring\">\n                                                <label for=\"key-ring\">Key Ring<\/label>\n                                            <\/li>\n                                                                                    <li>\n                                                <input type=\"checkbox\" name=\"category[]\" value=\"light-optics\" id=\"light-optics\">\n                                                <label for=\"light-optics\">Light &amp; Optics<\/label>\n                                            <\/li>\n                                                                            <\/ul>\n                                <\/li>\n                                \t\t   <li  class=\" wps_tag_list\">\n              <label>Tags:<\/label>\t\n            <ul class=\"tag-list\">\n             \n                                    <li>\n                        <input type=\"checkbox\" name=\"tag[]\" value=\"break\" id=\"break\">\n                        <label for=\"break\">Break<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"tag[]\" value=\"car\" id=\"car\">\n                        <label for=\"car\">Car<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"tag[]\" value=\"filter\" id=\"filter\">\n                        <label for=\"filter\">Filter<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"tag[]\" value=\"fuel\" id=\"fuel\">\n                        <label for=\"fuel\">Fuel<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"tag[]\" value=\"interior\" id=\"interior\">\n                        <label for=\"interior\">Interior<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"tag[]\" value=\"piston\" id=\"piston\">\n                        <label for=\"piston\">Piston<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"tag[]\" value=\"wheel\" id=\"wheel\">\n                        <label for=\"wheel\">Wheel<\/label>\n                    <\/li>\n                            <\/ul>\n\t\t <\/li>\t   \n                    <li class=\"wps_sale_list\">\n            <label>Sale:<\/label>\n            <ul class=\"onsale-list\">\n                <li>\n                    <input type=\"checkbox\" name=\"on_sale\" value=\"1\" id=\"onsale-checkbox\">\n                    <label for=\"onsale-yes\">On Sale<\/label>\n                <\/li>\n            <\/ul>\n        <\/li>\t\n              \n\t\t\t\n\t\t\t\n\t\t<li class=\" wps_stock_list\">\n              <label>Stock Status:<\/label>\n        <ul class=\"instock-list\">\n          \n         \n\t\t<li class=\"wps_instock_list\">\n            <input type=\"checkbox\" name=\"instock\" value=\"1\" id=\"instock-checkbox\">\n            <label for=\"instock-checkbox\">In Stock<\/label>\n        <\/li>\n          \n        <\/ul>\n\t\t <\/li>\n        \t\t\t\t<li class=\" wps_color_list\">\n              <label>Color:<\/label>\n            <ul class=\"color-list\">\n             \n                                    <li>\n                        <input type=\"checkbox\" name=\"color[]\" value=\"black\" id=\"color-black\">\n                        <label for=\"color-black\">Black<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"color[]\" value=\"green\" id=\"color-green\">\n                        <label for=\"color-green\">Green<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"color[]\" value=\"red\" id=\"color-red\">\n                        <label for=\"color-red\">Red<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"color[]\" value=\"while\" id=\"color-while\">\n                        <label for=\"color-while\">While<\/label>\n                    <\/li>\n                            <\/ul> <\/li>\n            <li class=\" wps_size_list\">\n           \n                    <label for=\"size-all\">Select Size<\/label>\n            <ul class=\"size-list\">\n                \n               \n                                    <li>\n                        <input type=\"checkbox\" name=\"size[]\" value=\"g-package\" id=\"size-g-package\">\n                        <label for=\"size-g-package\">G Package<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"size[]\" value=\"gl\" id=\"size-gl\">\n                        <label for=\"size-gl\">GL<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"size[]\" value=\"s\" id=\"size-s\">\n                        <label for=\"size-s\">S<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"size[]\" value=\"s-package\" id=\"size-s-package\">\n                        <label for=\"size-s-package\">S Package<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"size[]\" value=\"sl\" id=\"size-sl\">\n                        <label for=\"size-sl\">SL<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"size[]\" value=\"xl\" id=\"size-xl\">\n                        <label for=\"size-xl\">XL<\/label>\n                    <\/li>\n                            <\/ul> <\/li>\n            \t\t\t   <li class=\" wps_gender_list\">\n                  <label for=\"gender-all\">Select Gender<\/label>\n            <ul class=\"gender-list\">\n             \n                \n           \n                                    <li>\n                        <input type=\"checkbox\" name=\"gender[]\" value=\"male\" id=\"gender-male\">\n                        <label for=\"gender-male\">Male<\/label>\n                    <\/li>\n                            <\/ul>     <\/li>\n                        <li class=\" wps_brand_list\">\n                <label for=\"brand-all\">Select Brand<\/label>\n                <ul class=\"brand-list\">\n                  \n                                            <li>\n                            <input type=\"checkbox\" name=\"brand[]\" value=\"2024\" id=\"brand-2024\">\n                            <label for=\"brand-2024\">2024<\/label>\n                        <\/li>\n                                            <li>\n                            <input type=\"checkbox\" name=\"brand[]\" value=\"audi\" id=\"brand-audi\">\n                            <label for=\"brand-audi\">Audi<\/label>\n                        <\/li>\n                                            <li>\n                            <input type=\"checkbox\" name=\"brand[]\" value=\"bmw\" id=\"brand-bmw\">\n                            <label for=\"brand-bmw\">BMW<\/label>\n                        <\/li>\n                                            <li>\n                            <input type=\"checkbox\" name=\"brand[]\" value=\"honda\" id=\"brand-honda\">\n                            <label for=\"brand-honda\">Honda<\/label>\n                        <\/li>\n                                            <li>\n                            <input type=\"checkbox\" name=\"brand[]\" value=\"marchidies\" id=\"brand-marchidies\">\n                            <label for=\"brand-marchidies\">Marchidies<\/label>\n                        <\/li>\n                                            <li>\n                            <input type=\"checkbox\" name=\"brand[]\" value=\"toyota\" id=\"brand-toyota\">\n                            <label for=\"brand-toyota\">Toyota<\/label>\n                        <\/li>\n                                    <\/ul>\n            <\/li>\n            \t\t\t <li class=\" wps_model_list\">\n                  \n                    <label for=\"model-all\">Select Model<\/label>\n            <ul class=\"model-list\">\n               \n             \n                                    <li>\n                        <input type=\"checkbox\" name=\"model[]\" value=\"aqua\" id=\"model-aqua\">\n                        <label for=\"model-aqua\">Aqua<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"model[]\" value=\"chr\" id=\"model-chr\">\n                        <label for=\"model-chr\">CHR<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"model[]\" value=\"corolla\" id=\"model-corolla\">\n                        <label for=\"model-corolla\">Corolla<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"model[]\" value=\"ep-82\" id=\"model-ep-82\">\n                        <label for=\"model-ep-82\">EP-82<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"model[]\" value=\"fit\" id=\"model-fit\">\n                        <label for=\"model-fit\">Fit<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"model[]\" value=\"grace\" id=\"model-grace\">\n                        <label for=\"model-grace\">Grace<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"model[]\" value=\"vezel\" id=\"model-vezel\">\n                        <label for=\"model-vezel\">Vezel<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"model[]\" value=\"x-100\" id=\"model-x-100\">\n                        <label for=\"model-x-100\">X-100<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"model[]\" value=\"x-11\" id=\"model-x-11\">\n                        <label for=\"model-x-11\">X-11<\/label>\n                    <\/li>\n                            <\/ul>   \n\t\t\t<\/li>\n            \t\t\t<li class=\" wps_year_list\">\n                    <label for=\"year-all\">Select Year<\/label>\n            <ul class=\"year-list\">\n                \n          \n                                    <li>\n                        <input type=\"checkbox\" name=\"makeyear[]\" value=\"2021\" id=\"year-2021\">\n                        <label for=\"year-2021\">2021<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"makeyear[]\" value=\"2022\" id=\"year-2022\">\n                        <label for=\"year-2022\">2022<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"makeyear[]\" value=\"2023\" id=\"year-2023\">\n                        <label for=\"year-2023\">2023<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"makeyear[]\" value=\"2024\" id=\"year-2024\">\n                        <label for=\"year-2024\">2024<\/label>\n                    <\/li>\n                            <\/ul>      <\/li>\n            \t\t\t <li class=\" wps_feat_list\">\n              \n                    <label for=\"features-all\">Select Features<\/label>\n            <ul class=\"features-list\">\n               \n          \n                                    <li>\n                        <input type=\"checkbox\" name=\"engine[]\" value=\"fancy\" id=\"features-fancy\">\n                        <label for=\"features-fancy\">Fancy<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"engine[]\" value=\"hybride\" id=\"features-hybride\">\n                        <label for=\"features-hybride\">Hybride<\/label>\n                    <\/li>\n                                    <li>\n                        <input type=\"checkbox\" name=\"engine[]\" value=\"plugin-hybride\" id=\"features-plugin-hybride\">\n                        <label for=\"features-plugin-hybride\">Plugin Hybride<\/label>\n                    <\/li>\n                            <\/ul>      <\/li>\n                    <\/ul>\n\t\t\n\n    <input type=\"hidden\" name=\"action\" value=\"product_filter\">\n    <button type=\"button\" class=\"wps_close\"><i class=\"dashicons dashicons-no\"><\/i> Close<\/button>\t\n\t\t\n\t\t\n    <\/form>\n\n<\/div>\n\n<div  class=\"col-lg-9 col-md-6\">\n\t\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\t\n\t\n\t\n<\/div>\n<\/div>\n\n\n\n<script>\njQuery(document).ready(function ($) {\n    \/\/ Function to show loading spinner\n    function showLoadingSpinner() {\n        $('.product-block-two').addClass('loading');\n    }\n\n    \/\/ Function to hide loading spinner\n    function hideLoadingSpinner() {\n        $('.product-block-two').removeClass('loading');\n    }\n\n    \/\/ Function to apply filters\n    function applyFilters() {\n        var filter = $('#product-filters');\n        \/\/ Show loading spinner\n        showLoadingSpinner();\n        $.ajax({\n            url: filter.attr('action'),\n            data: filter.serialize(),\n            type: filter.attr('method'),\n            success: function (data) {\n                $('#products').html(data);\n                hideLoadingSpinner(); \/\/ Hide loading spinner on success\n            },\n            error: function () {\n                hideLoadingSpinner(); \/\/ Hide loading spinner on error\n            }\n        });\n    }\n\n    \/\/ Function to reset filters\n    function resetFilters() {\n        $('#product-filters input[type=\"checkbox\"]').prop('checked', false);\n        applyFilters();\n    }\n\n    \/\/ Apply filters on page load\n    applyFilters();\n\n    \/\/ Event listener for Apply Filters button\n    $('#apply-filters').on('click', function (e) {\n        e.preventDefault();\n        applyFilters();\n    });\n\n    \/\/ Event listener for Reset Filters button\n    $('#reset-filters').on('click', function (e) {\n        e.preventDefault();\n        resetFilters();\n    });\n\n    \/\/ Event listener for checkbox change\n    $('#product-filters input[type=\"checkbox\"]').on('change', function () {\n        applyFilters();\n    });\n});\n\n<\/script>\n\n\n\n\n\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-3083","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/23july.hostlin.com\/garaze\/wp-json\/wp\/v2\/pages\/3083","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=3083"}],"version-history":[{"count":0,"href":"https:\/\/23july.hostlin.com\/garaze\/wp-json\/wp\/v2\/pages\/3083\/revisions"}],"wp:attachment":[{"href":"https:\/\/23july.hostlin.com\/garaze\/wp-json\/wp\/v2\/media?parent=3083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}