Help & Resource Center
Follow

How to Install

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.

In-Store_Pickup_Widget.png

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments