Store Locator Category Filter

[zen – faidzul]

Hi,

I want to utilize the ‘Allow category selection’ option available under Maps > Edit > Settings > Store Locator > Advanced.

I have chosen the ‘Checkboxes’ option under Settings > Categories, to allow users to select multiple categories.
However, it seems that nothing happens when I click on the filter icon on the left side of the search button.
With the ‘Dropdown’ option, I can see the list with no issue.

I also tried the ‘Category Filter’ option under Maps > Edit > Settings > Marker Listing > Filtering, but there is no option to shrink the panel to maximize the visibility of the map. Therefore, I believe the Store Locator category filter will work better in my scenario.

[zen – faidzul]

This reply has been marked as private.

[Matthew]

Hi there,

Thank you for getting in touch with us, we do appreciate your time.

Please may I ask if you may save the below custom CSS code into the “Custom CSS” setting block and confirm if this resolves the issue:

.wpgmza-store-locator {
    overflow: unset !important;
}

.wpgmza-store-locator .wpgmza-category-filter-container.active > * {
    display: block !important;
}

.wpgmza_map .wpgmza-category-filter-container {
    top: 95px !important;
    background: var(--wpgmza-component-color);
    backdrop-filter: blur(20px) !important;
    box-shadow: var(--wpgmza-component-shadow);
    border-radius: var(--wpgmza-component-border-radius);
}

.wpgmza_map .wpgmza-inner-stack .wpgmza-store-locator[data-category-filter-type="checkbox"] .wpgmza-category-filter-container > div {
    padding: 0 15px;
}

I look forward to hearing back from you.

Kindest Regards,
Matthew

[zen – faidzul]

Hi Matthew,

Thanks for the code and it works just fine in displaying the category filter selection.

But a problem that I could not figure out which the background is not blurred enough as attached screenshot.

Also, below is my current custom js code in the map for your review. Perhaps there is another component interfering the ‘backdrop-filter’ line.

.wpgmza-filter-widgets {
    position: absolute;
    left: 50%;
    top: 61px;
    display: flex;
    flex-direction: row;
    backdrop-filter: var(--wpgmza-component-backdrop-filter);
    padding: 0 !important;
  	transform: translateX(-50%);
}
.wpgmza-filter-widgets button {
    display: inline;
}
.wpgmza-filter-widgets select {
    background: var(--wpgmza-component-color);
	/*box-shadow: var(--wpgmza-component-shadow);*/
	border-radius: var(--wpgmza-component-border-radius);
	margin: 1px;
	padding: var(--wpgmza-component-inner-padding);
  	cursor: pointer;
  	font-size: var(--wpgmza-component-font-size);
  	font-weight: 300;
}
span.custom-field-label {
  display: none;
}
th {
  color: white !important;
  background-color: #2F328D !important;
}
button {
    display: inline-flex;
    padding: 0.1em 1em;
    margin: 0 0.1em 0.1em 1px;
    border: 0.16em solid rgba(255, 255, 255, 0);
    background-color: rgb(47 50 141);
    border-radius: 0.5em;
    box-sizing: border-box;
    text-decoration: none;
    font-family: inherit;
    color: #ffffff;
    text-align: center;
    transition: all 0.2s;
  	cursor: pointer;
}
button:hover {
	transform: perspective(1px) scale3d(1.03, 1.03, 1) translateZ(0) !important;
    font-weight: 400;
    box-shadow: 0 1px 10px rgb(0 0 0 / 50%);
}
.wpgmza_map {
    /*box-shadow: 0 1px 10px rgb(0 0 0 / 50%);*/
  	z-index: 1;
  	height: 79vh !important;
}
table {
  	margin-top: 3px;
    box-shadow: 0 1px 10px rgb(0 0 0 / 50%);
}
.wpgmza-address {
    line-height: normal !important;
}
.wpgmza-store-locator {
    overflow: unset !important;
}
.wpgmza-store-locator .wpgmza-category-filter-container.active > * {
    display: block !important;
}
.wpgmza_map .wpgmza-category-filter-container {
    top: 95px !important;
    background: var(--wpgmza-component-color);
    backdrop-filter: blur(20px) !important;
    box-shadow: var(--wpgmza-component-shadow);
    border-radius: var(--wpgmza-component-border-radius);
}
.wpgmza_map .wpgmza-inner-stack .wpgmza-store-locator[data-category-filter-type="checkbox"] .wpgmza-category-filter-container > div {
    padding: 0 15px;
}

Attachments:

You must be logged in to view attached files.

[Matthew]

Hi there,

Thank you for your response.

Unfortunately it appears that because the category filter element is set with a position of ‘absolute’ it loses the backdrop filter from the parent and setting a direct filter seems to fail.

Thus to work around this, you could set your background property of the filter to
rgb(180 207 249 / 90%) as this would give a similar effect and visual as the backdrop filter.

I hope this helps?

Kindest Regards,
Matthew

[zen – faidzul]

Hi Matthew,

Noted and thanks for the workaround.

[Matthew]

Hi there,

Thank you for your response and time on this.

It is not a problem at all.

Have a great day further!

Kindest Regards,
Matthew

[Author]

Posts