Filter Panel Advanced

Custom Renderer for Filterpanel on Store Locator Widget

by woosmap

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://webapp.woosmap.com/webapp.js"></script>
<div id="store-locator"></div>
<script>
  const availableServices = [{
      key: 'WF',
      en: 'Wireless Hotspot'
    },
    {
      key: 'CD',
      en: 'Mobile Payment'
    },
    {
      key: 'DT',
      en: 'Drive-Thru'
    },
    {
      key: 'DR',
      en: 'Digital Rewards'
    },
    {
      key: 'hrs24',
      en: 'Open 24 hours per day'
    },
    {
      key: 'WA',
      en: 'Oven-warmed Food'
    },
    {
      key: 'LB',
      en: 'LaBoulange'
    },
    {
      key: 'XO',
      en: 'Mobile Order and Pay'
    },
    {
      key: 'VS',
      en: 'Verismo'
    },
    {
      key: 'NB',
      en: 'Nitro Cold Brew'
    },
    {
      key: 'CL',
      en: 'Starbucks Reserve-Clover Brewed'
    },
  ];

  var loadWebApp = function() {
    const webapp = new WebApp('store-locator', "woos-48c80350-88aa-333e-835a-07f4b658a9a4");
    const isMobile = document.querySelector('body').clientWidth < 500;
    const storeLocatorConfig = {
      "filters": {
        "filters": [{
          'propertyType': 'tag',
          'title': {
            'en': 'Amenities'
          },
          'choices': availableServices,
          'innerOperator': 'or'
        }],
        "outerOperator": "and"
      },
      "theme": {
        "primary_color": "#008248"
      },
      "woosmapview": {
        "breakPoint": 11,
        "style": {
          "default": {
            "icon": {
              "url": "https://demo.woosmap.com/storelocator/images/markers/starbucks-marker.svg",
              "scaledSize": {
                "height": 47,
                "width": 40
              }
            },
            "numberedIcon": {
              "url": "https://demo.woosmap.com/storelocator/images/markers/starbucks-marker.svg",
              "scaledSize": {
                "height": 47,
                "width": 40
   ...

CSS

:focus {
  outline: none;
}

body {
  margin: 0;
  height: 100vh
}

#store-locator {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  border: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}


button {
  color: #1D1D1D;
  margin: 6px 0;
  align-items: center;
  border-radius: 32px;
  cursor: pointer;
  display: flex;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #dadce0;
  background: transparent;
  font: inherit;
  list-style: none;
  outline: 0;
  overflow: visible;
  vertical-align: baseline;
  background: #FFF;
}

.filter-group {
  padding: .8rem 10px;
  font-size: .8rem;
  background: #008248;
  text-transform: uppercase;
  color: white;
}

.title-filters {
  font-size: 1.1rem
}

.filters-list button {
  position: relative;
  text-align: left;
  width: 100%;
  border-radius: 0;
  padding: 1.5rem 10px;
  margin: 0;
  border: none;
}


.active-icon-wrapper {
  width: 21px;
  height: 21px;
  display: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' focusable='false' style='width: 21px;height: 21px;'%3E%3Cpath d='M4.29 12.104c-.277-.308-.75-.332-1.06-.054-.306.278-.33.752-.053 1.06l4.485 4.963c.29.322.795.33 1.096.017L20.414 6.003c.288-.298.28-.773-.02-1.06-.297-.288-.772-.28-1.06.02L8.237 16.47 4.29 12.105z' fill='%2300a862' %3E%3C/path%3E%3C/svg%3E");
}

.active button {
  background: rgba(0, 168, 98, 0.15);
}

.active .active-icon-wrapper {
  display: block;
}

.flex-grow {
  flex-grow: 1
}


.active-icon-wrapper {
  width: 21px;
  height: 21px;
  display: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' focusable='false' style='width: 21px;height: 21px;'%3E%3Cpath d='M4.29 12.104c-.277-.308-.75-.332-1.06-.054-.306.278-.33.752-.053 1.06l4.485 4.963c.29.322.795.33 1.096.017L20.414 6.003c.288-.298.28-.773-.02-1.06-.297-.288-.772-.28-1.06.02L8.237 16.47 4.29 12.105z' fill='%2300a862'...