If you utilize Cartful Solutions, we have some helpful guidelines for how to install our Product Locator within the search results page. You can visit Cartful Solutions directly for more information on their solutions.
The most important thing to note for product matching is that the Locally Product ID required for stock sharing is the UPC or EAN. We do not use SKUs. Below is an example of how the code would be implemented using the Locally Test Brand wizard found here.
const LocallyButton = ({productId}) => {
useEffect(() => {
if(!window.lcly_config || !window.lcly_switchlive_url || !window.lcly_switchlive_events_url) return; var lcly_config = {
...(window.lcly_config ? window.lcly_config : {}),
"upc": productId,
"id": productId,
};
console.log(lcly_config);
var lcly_query = Object.keys(lcly_config)
.reduce(function(a,k){a.push(encodeURIComponent(k) + '='
+ encodeURIComponent(lcly_config[k]));return a},[]).join('&');
var lcly_endpoint = window.lcly_url + '?' + lcly_query;
const script = document.createElement('script');
script.id = "lcly-script-" + productId;
script.src = lcly_endpoint;
script.async = true; const switchliveScript = document.createElement('script');
switchliveScript.id = "lcly-script-switchlive-" + productId
switchliveScript.src = lcly_switchlive_url + '&id=' + productId;
switchliveScript.async = true; const switchliveEventsScript = document.createElement('script');
switchliveEventsScript.id = "lcly-script-switchlive-events-" + productId;
switchliveEventsScript.src = lcly_switchlive_events_url + '&id=' + productId;
switchliveEventsScript.async = true; const ele = document.getElementById(productId)
if(ele) {
ele.appendChild(script);
ele.appendChild(switchliveScript);
ele.appendChild(switchliveEventsScript);
}
return () => {
if(!window.lcly_config || !window.lcly_switchlive_url || !window.lcly_switchlive_events_url) return;
if(ele) {
ele.removeChild(script);
ele.removeChild(switchliveScript);
ele.removeChild(switchliveEventsScript);
};
}
}, []); return (
<div id={productId} className={addPrefix('result-item__description')}>
<div
id={"lcly-button-" + productId}
data-switchlive="true"
data-switchlive-impression="true"
data-switchlive-impression-id-PL="1"> <a
id={"lcly-link-" + productId}
data-switchlive="true"
data-switchlive-mode="auto"
data-switchlive-id-PL="6"
href="https://brands.locally.com" target="_blank">
Product Locator by Locally
</a>
</div>
</div>
)
}
window.lcly_url = 'https://testbrand.locally.com/stores/map.js';
window.lcly_switchlive_url = 'https://testbrand.locally.com/js/switchlive.js?company_id=83419';
window.lcly_switchlive_events_url = 'https://testbrand.locally.com/switchlive/switchlive-events.js?company_id=83419';window.lcly_config = {
"company_name": "Locally Test Brand",
"button_text": ":heart:",
"button_id": "HTML",
"company_id": “83419”,
"css": "6",
"always_hide_button": "1",
//"upc": “01234567891”,
"n_related_styles": "3",
"show_location_switcher": "1",
"show_location_prompt": "1",
"lang": "en-us",
"show_dealers": "1",
"n_dealers": "2",
"link_opens_modal": "1"
};