Our Product Locator can respond to a variant selection on your PDP to locate that specific variant in a nearby store.
The lcly_reload_0 function is defined to update the UPC value in the lcly_config_0 object. It then rebuilds the query string with the updated UPC value and assigns the new URL to the src attribute of the <script> element with the ID lcly-script-0. This will trigger the reload of the Locally product locator with the updated configuration.
Call the following function to reload the Product Locator: To reload the Locally product locator, you can define a function called lcly_reload_0 and pass the updated UPC value as an argument.
lcly_reload_0({ upc: “XXXX” });
You want to be sure to place this function after your elements load so it is best practice to place this below your product locator script.
Example of Product Locator Reload
The mechanism will differ case by case, but the overview is as follows:
Find the ID of your Product Locator widget. Look at the widget embed code for lcly-config-*. For example, you might find lcly-config-0. The -0 is the widget ID.
Decide when you want to reload the Product Locator widget. Typically, this reload should happen when the user updates the variant selection on your PDP. This can be done in various ways. For example, for implementations on Shopify: Shopify triggers an event that the widget can listen for. The following snippet may be used to listen to this event and trigger the reload:
<script>
var el = document.querySelector('select.original-selector');
el.addEventListener('change', function(event) {
lcly_reload_0({ 'upc': event.detail.barcode });
});
</script>This example snippet looks for any changes to a select element tagged with the .original-selector class. When changing variants, the element fires an event, giving us details of what changed.
We then call the lcly_reload_* function with the ID from the first step. In this case, lcly_reload_0. We pass the function an object with attribute upc and the UPC of the variant the user selected (event.detail.barcode in this case).
Please note that the information provided above is intended to assist companies with technical teams. However, it is important to understand that this solution may vary depending on the platform and the specific implementation within that platform. It is not a universal solution that can be applied uniformly in all cases.