WebApp Custom InfoWindow HTML

Customize InfowWindow HTML when retrieving Store Summary and Store Details info

by woosmap

HTML

<div id="store-locator"></div>
<script type="text/javascript" src="https://webapp.woosmap.com/webapp.js"></script>

CSS

#store-locator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica   Neue", sans-serif;
}

#myCustomContentID {
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  position: absolute;
}

#myCustomContentID li {
  line-height: 32px;
  padding: 6px;
}

#store-photo img {
  width: 100%;
  overflow: hidden;
}

#store-website {}

#store-hour,
.summary-hours {
  font-weight: bold;
}

#store-hours .marker-image {
  background-size: 70%;
  background-image: url('https://preview.webgeoservices.com/icons/hours.svg')
}

#store-address .marker-image {
  background-size: 60%;
  background-image: url('https://preview.webgeoservices.com/icons/place.svg')
}

#store-website a {
  color: #e31a1c;
}

#store-website .marker-image {
  background-size: 70%;
  background-image: url('https://preview.webgeoservices.com/icons/link.svg')
}

#store-phone .marker-image {
  background-size: 60%;
  background-image: url('https://preview.webgeoservices.com/icons/phone.svg')
}

#store-hours p,
#store-address p,
#store-phone p,
#store-website a {
  margin-left: 40px;
}

.review-meta {
  margin-bottom: -6px;
}

.review-author {
  text-transform: capitalize;
  font-weight: bold;
}

.review-item {
  margin-left: 40px;
  margin-bottom: 1em;
}

.review-date,
.summary-address {
  opacity: .6;
}

.review-text {
  line-height: 1.55;
  text-align: left;
  max-width: 32em;
}

.review-image, .marker-image {
  height: 32px;
  width: 32px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  position: absolute;
}

#store-photo-summary {
  height: 100px;
  width: 61px;
  right: 6px;
  z-index: 1;
  background-size: cover;
  background-color: #DFDFDF;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
}

.inline-flex {
  display: inline-flex;
  width:...

JavaScript

var convertTime = function(UNIX_timestamp) {
  var a = new Date(UNIX_timestamp * 1000);
  var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  var time = months[a.getMonth()] + ' ' + a.getDate() + ', ' + a.getFullYear();
  return time;
};

var getPhoto = function(store) {
  return "<div id='store-photo' ><img src='" + store.properties.user_properties.photo + "'/></div>";
};
var getSummaryPhoto = function(store) {
  var height = store.properties.distance_text ? "100px" : "80px";
  return "<div id='store-photo-summary' style='background-image:url(" + store.properties.user_properties.photo + "); height:" + height + " !important'></div>"
}

var getPhone = function(store) {
  return "<li id='store-phone'><div class='marker-image'></div><p>" + store.properties.contact.phone + "</p></li>";
};

var getWebSite = function(store) {
  var url = store.properties.contact.website;
  var hostname = (new URL(url)).hostname.replace("www.", "");
  return "<li id='store-website'><div class='marker-image'></div><a href='" + store.properties.contact.website + "' target='_blank'>" + hostname + "</a></li>";
};

var getDistanceAndTime = function(store) {
  var distanceLabel = store.properties.distance_text ? store.properties.distance_text + " ~ " + store.properties.duration_text : ""
  return "<p class='summary-distance'>" + distanceLabel + "</p>";
};

var getOpeningLabel = function(store) {
  var openLabel = "";
  if (store.properties.open.open_now) {
    openLabel = "Open now until " + store.properties.open.current_slice.end;
  } else {
    openLabel += "Closed until " + convertTime(Date.parse(store.properties.open.next_opening.day) / 1000) + ' at ' + store.properties.open.next_opening.start
  }
  return "<p class='summary-hours'>" + openLabel + "</p>";
};

var getAddress = function(store) {
  var address = store.properties.address.lines + ", " + store.properties.address.zipcode + ' ' + store.properties.address.city;
  return "<li...