{"id":4100,"date":"2024-03-01T11:11:30","date_gmt":"2024-03-01T10:11:30","guid":{"rendered":"https:\/\/2023v2.code-pixies.de\/?p=4100"},"modified":"2024-05-30T10:37:39","modified_gmt":"2024-05-30T08:37:39","slug":"ein-filter-fuer-die-holzbaukarte","status":"publish","type":"post","link":"https:\/\/stage.code-pixies.de\/en\/ein-filter-fuer-die-holzbaukarte\/","title":{"rendered":"A filter for the timber construction map"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"4100\" class=\"elementor elementor-4100\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-da1dd31 e-con-full e-flex e-con e-parent\" data-id=\"da1dd31\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-d81b4e9 e-con-full e-flex e-con e-child\" data-id=\"d81b4e9\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eeece3d elementor-widget elementor-widget-heading\" data-id=\"eeece3d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.23.0 - 05-08-2024 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h2 class=\"elementor-heading-title elementor-size-default\">An interactive timber construction map<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d1e48fc elementor-widget elementor-widget-text-editor\" data-id=\"d1e48fc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.23.0 - 05-08-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>In our last post, we presented the development of an innovative feature for our client\u2019s website: an interactive map function that allows users to explore timber construction projects throughout Saxony.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b1644d1 elementor-widget elementor-widget-text-editor\" data-id=\"b1644d1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>With the aim of ensuring seamless integration and a user-friendly experience, we decided to use the powerful Jetengine plugin. From enabling the map feature to customizing marker styles and creating a list view, we have detailed the steps to successfully implement it.\u00a0<\/p><p>Now let\u2019s take a look at the filter function, which can be used to narrow down the timber construction projects.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2c25882 elementor-widget__width-initial elementor-widget-tablet__width-inherit elementor-widget elementor-widget-image\" data-id=\"2c25882\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.23.0 - 05-08-2024 *\/\n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=\".svg\"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}<\/style>\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"468\" src=\"https:\/\/stage.code-pixies.de\/wp-content\/smush-webp\/2024\/03\/Macbook-Pro-16-mockup-1024x599.png.webp\" class=\"attachment-large size-large wp-image-4692\" alt=\"| |\" srcset=\"https:\/\/stage.code-pixies.de\/wp-content\/smush-webp\/2024\/03\/Macbook-Pro-16-mockup-1024x599.png.webp 1024w, https:\/\/stage.code-pixies.de\/wp-content\/smush-webp\/2024\/03\/Macbook-Pro-16-mockup-300x175.png.webp 300w, https:\/\/stage.code-pixies.de\/wp-content\/smush-webp\/2024\/03\/Macbook-Pro-16-mockup-768x449.png.webp 768w, https:\/\/stage.code-pixies.de\/wp-content\/smush-webp\/2024\/03\/Macbook-Pro-16-mockup.png.webp 1071w\" sizes=\"(max-width: 800px) 100vw, 800px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3aa69cb e-con-full e-flex e-con e-parent\" data-id=\"3aa69cb\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-e44a072 e-con-full e-flex e-con e-child\" data-id=\"e44a072\" data-element_type=\"container\" data-settings=\"{&quot;sticky&quot;:&quot;top&quot;,&quot;sticky_offset&quot;:120,&quot;sticky_parent&quot;:&quot;yes&quot;,&quot;sticky_on&quot;:[&quot;desktop&quot;],&quot;sticky_effects_offset&quot;:0}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1bf3078 elementor-widget elementor-widget-heading\" data-id=\"1bf3078\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Expansion through Jet Smartfilters<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-acc582a elementor-widget elementor-widget-text-editor\" data-id=\"acc582a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The Jet Smartfilters plugin provides the required functionality. It extends Jetengine with a powerful filter function. It is extremely easy to use.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0567c76 e-con-full e-flex e-con e-child\" data-id=\"0567c76\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0416895 elementor-widget__width-initial animated-slow elementor-widget-divider--view-line_text elementor-widget-divider--element-align-left elementor-widget-mobile__width-inherit elementor-invisible elementor-widget elementor-widget-divider\" data-id=\"0416895\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;,&quot;_animation_delay&quot;:&quot;200&quot;}\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.23.0 - 05-08-2024 *\/\n.elementor-widget-divider{--divider-border-style:none;--divider-border-width:1px;--divider-color:#0c0d0e;--divider-icon-size:20px;--divider-element-spacing:10px;--divider-pattern-height:24px;--divider-pattern-size:20px;--divider-pattern-url:none;--divider-pattern-repeat:repeat-x}.elementor-widget-divider .elementor-divider{display:flex}.elementor-widget-divider .elementor-divider__text{font-size:15px;line-height:1;max-width:95%}.elementor-widget-divider .elementor-divider__element{margin:0 var(--divider-element-spacing);flex-shrink:0}.elementor-widget-divider .elementor-icon{font-size:var(--divider-icon-size)}.elementor-widget-divider .elementor-divider-separator{display:flex;margin:0;direction:ltr}.elementor-widget-divider--view-line_icon .elementor-divider-separator,.elementor-widget-divider--view-line_text .elementor-divider-separator{align-items:center}.elementor-widget-divider--view-line_icon .elementor-divider-separator:after,.elementor-widget-divider--view-line_icon .elementor-divider-separator:before,.elementor-widget-divider--view-line_text .elementor-divider-separator:after,.elementor-widget-divider--view-line_text .elementor-divider-separator:before{display:block;content:\"\";border-block-end:0;flex-grow:1;border-block-start:var(--divider-border-width) var(--divider-border-style) var(--divider-color)}.elementor-widget-divider--element-align-left .elementor-divider .elementor-divider-separator>.elementor-divider__svg:first-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-left .elementor-divider-separator:before{content:none}.elementor-widget-divider--element-align-left .elementor-divider__element{margin-left:0}.elementor-widget-divider--element-align-right .elementor-divider .elementor-divider-separator>.elementor-divider__svg:last-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-right .elementor-divider-separator:after{content:none}.elementor-widget-divider--element-align-right .elementor-divider__element{margin-right:0}.elementor-widget-divider--element-align-start .elementor-divider .elementor-divider-separator>.elementor-divider__svg:first-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-start .elementor-divider-separator:before{content:none}.elementor-widget-divider--element-align-start .elementor-divider__element{margin-inline-start:0}.elementor-widget-divider--element-align-end .elementor-divider .elementor-divider-separator>.elementor-divider__svg:last-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-end .elementor-divider-separator:after{content:none}.elementor-widget-divider--element-align-end .elementor-divider__element{margin-inline-end:0}.elementor-widget-divider:not(.elementor-widget-divider--view-line_text):not(.elementor-widget-divider--view-line_icon) .elementor-divider-separator{border-block-start:var(--divider-border-width) var(--divider-border-style) var(--divider-color)}.elementor-widget-divider--separator-type-pattern{--divider-border-style:none}.elementor-widget-divider--separator-type-pattern.elementor-widget-divider--view-line .elementor-divider-separator,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:after,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:before,.elementor-widget-divider--separator-type-pattern:not([class*=elementor-widget-divider--view]) .elementor-divider-separator{width:100%;min-height:var(--divider-pattern-height);-webkit-mask-size:var(--divider-pattern-size) 100%;mask-size:var(--divider-pattern-size) 100%;-webkit-mask-repeat:var(--divider-pattern-repeat);mask-repeat:var(--divider-pattern-repeat);background-color:var(--divider-color);-webkit-mask-image:var(--divider-pattern-url);mask-image:var(--divider-pattern-url)}.elementor-widget-divider--no-spacing{--divider-pattern-size:auto}.elementor-widget-divider--bg-round{--divider-pattern-repeat:round}.rtl .elementor-widget-divider .elementor-divider__text{direction:rtl}.e-con-inner>.elementor-widget-divider,.e-con>.elementor-widget-divider{width:var(--container-widget-width,100%);--flex-grow:var(--container-widget-flex-grow)}<\/style>\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t\t<span class=\"elementor-divider__text elementor-divider__element\">\n\t\t\t\t01\t\t\t\t<\/span>\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c263bf8 elementor-invisible elementor-widget elementor-widget-icon-box\" data-id=\"c263bf8\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"icon-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/stage.code-pixies.de\/wp-content\/plugins\/elementor\/assets\/css\/widget-icon-box.min.css\">\t\t<div class=\"elementor-icon-box-wrapper\">\n\n\t\t\t\n\t\t\t\t\t\t<div class=\"elementor-icon-box-content\">\n\n\t\t\t\t\t\t\t\t\t<h3 class=\"elementor-icon-box-title\">\n\t\t\t\t\t\t<span  >\n\t\t\t\t\t\t\tCreating the filters\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<p class=\"elementor-icon-box-description\">\n\t\t\t\t\t\tWe can create the filters we need in the Smartfilters dashboard. In our case, we want to create three checkbox filters for the taxonomies, as well as a search function for the location and a range filter for completion. We therefore select the desired filter type and data source. Some of the filters offer further customization options. However, these are not necessary in our case.\t\t\t\t\t<\/p>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9ee57eb elementor-widget__width-initial animated-slow elementor-widget-divider--view-line_text elementor-widget-divider--element-align-left elementor-widget-mobile__width-inherit elementor-invisible elementor-widget elementor-widget-divider\" data-id=\"9ee57eb\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;,&quot;_animation_delay&quot;:&quot;200&quot;}\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t\t<span class=\"elementor-divider__text elementor-divider__element\">\n\t\t\t\t02\t\t\t\t<\/span>\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-54104e1 elementor-invisible elementor-widget elementor-widget-icon-box\" data-id=\"54104e1\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"icon-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-icon-box-wrapper\">\n\n\t\t\t\n\t\t\t\t\t\t<div class=\"elementor-icon-box-content\">\n\n\t\t\t\t\t\t\t\t\t<h3 class=\"elementor-icon-box-title\">\n\t\t\t\t\t\t<span  >\n\t\t\t\t\t\t\tInsert filter widget\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<p class=\"elementor-icon-box-description\">\n\t\t\t\t\t\tWe decided to create our filter in a popup so that we can use the maximum space on the page for the map. We now build our filter in the popup and select the appropriate widget for each filter type.\t\t\t\t\t<\/p>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2a1625c elementor-widget__width-initial animated-slow elementor-widget-divider--view-line_text elementor-widget-divider--element-align-left elementor-widget-mobile__width-inherit elementor-invisible elementor-widget elementor-widget-divider\" data-id=\"2a1625c\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;,&quot;_animation_delay&quot;:&quot;200&quot;}\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t\t<span class=\"elementor-divider__text elementor-divider__element\">\n\t\t\t\t03\t\t\t\t<\/span>\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c071777 elementor-invisible elementor-widget elementor-widget-icon-box\" data-id=\"c071777\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"icon-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-icon-box-wrapper\">\n\n\t\t\t\n\t\t\t\t\t\t<div class=\"elementor-icon-box-content\">\n\n\t\t\t\t\t\t\t\t\t<h3 class=\"elementor-icon-box-title\">\n\t\t\t\t\t\t<span  >\n\t\t\t\t\t\t\tSet filter widget\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<p class=\"elementor-icon-box-description\">\n\t\t\t\t\t\tNow we set up the widgets. First we select the appropriate filter from the dashboard. Then we set up the filter for the Jetengine map listing. To apply the filter we select Ajax when the values change. This means that our filter is applied as soon as a selection in the filter changes and without reloading the page. Since we only have one map listing on our page, we do not need to specify a query ID for the link.\t\t\t\t\t<\/p>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-235055b e-con-full e-flex e-con e-parent\" data-id=\"235055b\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ea7d58d elementor-widget elementor-widget-text-editor\" data-id=\"ea7d58d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>In the next part, we will look at the form that website visitors can use to submit timber construction projects.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Learn how we use the powerful Jet Smartfilters plugin to filter the projects on the timber construction map according to individual criteria. <\/p>","protected":false},"author":1,"featured_media":4562,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[50,23,22],"tags":[49,41,42,58,54,40],"class_list":["post-4100","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-individuelle-wordpress-website","category-webdesign","category-webentwicklung","tag-custom-wordpress-solution","tag-elementor","tag-jetengine","tag-jetsmartfilters","tag-page-builder","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/stage.code-pixies.de\/en\/wp-json\/wp\/v2\/posts\/4100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stage.code-pixies.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stage.code-pixies.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stage.code-pixies.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stage.code-pixies.de\/en\/wp-json\/wp\/v2\/comments?post=4100"}],"version-history":[{"count":10,"href":"https:\/\/stage.code-pixies.de\/en\/wp-json\/wp\/v2\/posts\/4100\/revisions"}],"predecessor-version":[{"id":6433,"href":"https:\/\/stage.code-pixies.de\/en\/wp-json\/wp\/v2\/posts\/4100\/revisions\/6433"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stage.code-pixies.de\/en\/wp-json\/wp\/v2\/media\/4562"}],"wp:attachment":[{"href":"https:\/\/stage.code-pixies.de\/en\/wp-json\/wp\/v2\/media?parent=4100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stage.code-pixies.de\/en\/wp-json\/wp\/v2\/categories?post=4100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stage.code-pixies.de\/en\/wp-json\/wp\/v2\/tags?post=4100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}