Render Attributes for Selected Store
Render attributes of the selected stores with template rendering.Store Selection
The TiledView has a bindable property that you can use: selectedStore.
The TiledView handles the click event on all store markers and save the store clicked into this property.
It automatically change the style of the marker if it was provided on the TiledView initialization.
let selectedStoreObj = new woosmap.utils.MVCObject();
selectedStoreObj.selectedStore = null;
selectedStoreObj.selectedStore_changed = function() {
const selectedStore = this.get('selectedStore');
renderSelectedStore(selectedStore);
};
selectedStoreObj.bindTo('selectedStore', mapView, 'selectedStore', false);
Render Store Attributes with Template
<div id="main">
<div id="my-map-container">
<div id="my-map"></div>
</div>
<div id="sidebar-container">
<div id="sidebar">
<section id="selected-store-container">
</section>
</div>
</div>
</div>
const selectedStoreTemplate = "<div class='woosmap-tableview-cell'>" +
"<div class='store-photo-header'></div>" +
"<div class='selected-store-card'><div class='hero'>" +
"<div class='store-title'>{{name}}</div>" +
"{{#types}}<div class='store-types'>{{types}}</div>{{/types}}</div>" +
"<div class='content'><div class='store-address'>{{address.lines}}</div>" +
"{{#contact.phone}}<div class='store-contact'><a href='tel:{{contact.phone}}'>{{contact.phone}}</a></div>{{/contact.phone}}" +
"{{#contact.website}}<div class='store-website'><a href='{{contact.website}}' target='_blank'>Go to website</a></div>{{/contact.website}}" +
"</div></div>" +
"</div>";
function renderSelectedStore(store) {
const templateRenderer = new woosmap.TemplateRenderer(selectedStoreTemplate);
const selectedStoreHTML = templateRenderer.render(store.properties);
const $selectedStoreContainer = woosmap.$('#selected-store-container');
$selectedStoreContainer.html(selectedStoreHTML);
}
Click on a store to see attributes displayed in the sidebar.
