Store Locator Category Filter

New home Forums Pro Add-on Troubleshooting Store Locator Category Filter

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #78479
    zen – faidzul
    Participant

    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.

    #78480
    zen – faidzul
    Participant
    This reply has been marked as private.
    #78487
    Matthew
    Moderator

    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

    #78496
    zen – faidzul
    Participant

    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.
    #78507
    Matthew
    Moderator

    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

    #78512
    zen – faidzul
    Participant

    Hi Matthew,

    Noted and thanks for the workaround.

    #78523
    Matthew
    Moderator

    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

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.