Installation
In order to install the widget you just need to copy the snippet from admin.modernretail.com and paste it to your page.
<div data-storepickup-sku='{{SKU}}' data-mr-hash='{{HASH}}'></div>
<script>
(function(w, d, s) {
window.MR_storepickup_config ={"show_info":true,"show_favorite":true,"sort":"name"};
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s);
j.async = true;
j.src ='https://devwidget.modernretail.com/storepickup/embed.js';
f.parentNode.insertBefore(j, f);
})(window, document, 'script');
</script>
Configuration
The widget has HTML-attributes configuration and JSON-configuration. HTML-attributes need to provide static information. JSON-configuration can be changed any time when the widget is already in place.
- data-storepickup-sku="{{SKU}}" - Provides sku to show information on this product.
- data-mr-hash="{{HASH}}" - Unique hash. (already defined in snippet on admin.modernretail.com)
Public methods
MR_StorePickupInit()
Init Store Pickup widget. Usually you dont need to call this method. You might use it if your page is generated via AJAX.
MR_StorePickup.load('SOME OTHER SKU');
MR_StorePickup.load method allows you to rebuild the widget dynamically for another SKU.
MR_StorePickup.config({sort:'qty'});
MR_StorePickup.config method allows you to change configuration supplied with the widget code.
Events
Any events generated from In-Store Pickup widget have MR_storepickup prefix.
window.addEventListener("MR_storepickup_onLocationSelect", function(e){
console.log('Location details',e.detail.location);
});
This event is triggered when a customer selects location in the widget. You can get any information about the selected location: qty, address, name etc.
