Product Locator Installation

1) In your theme file, paste this code:

 <script>
(function(d,s,i){
if(d.getElementById(i)){return;}
var t=d.createElement(s);t.id=i;
t.rel='stylesheet';
t.href='https://{yoursubdomain}.shipearlyapp.com/widgets/dist/shipearly-widgets.min.css';
d.head.appendChild(t);
})(document,'link','shipearly-widgets-css');
(function(d,s,i){
if(d.getElementById(i)){return;}
var t=d.createElement(s);t.id=i;
t.src='https://{yoursubdomain}.shipearlyapp.com/widgets/dist/shipearly-widgets.min.js';
var f=d.getElementsByTagName(s)[0];
f.parentNode.insertBefore(t,f);
})(document,'script','shipearly-widgets-js');
</script>
<script>
(function() {
const clientId = 'INSERT API KEY';
document.querySelectorAll('form button[name="shipearly-locator"]').forEach(function(el) {
el.classList.toggle('hidden', !clientId);
el.addEventListener('click', function(e) {
e.preventDefault();
ShipEarly.ProductLocator({
client_id: clientId,
variant_id: this.closest('form')?.querySelector('[name="id"]')?.value || (new URLSearchParams(window.location.search)).get('variant'),
}).render('body', 'modal');
});
});
})();
</script>

2) We need to then add some code for each product Page to create a button

<button type="button" name="shipearly-locator" class="product-form__submit button button--full-width button--primary hidden">Check Local Dealer</button>

To Open Product Locator in a New Page (Optional)

If you wish for the product locator to open in a new page the variant ID needs to be passed in to load the correct product.

<div id="product-locator-container" style="min-height: 500px;"> <div class="loading-dialog"> <div class="spinner-border" role="status"> <span class="sr-only">Loading…</span> </div> </div> </div> <script> (function() { const clientId = 'public_Insert_your_API_key_here'; window.addEventListener('load', function() { const container = document.getElementById('product-locator-container'); container.replaceChildren(); container.style.height = (window.innerHeight - document.getElementById('shopify-section-header').scrollHeight) + 'px'; ShipEarly.ProductLocator({
client_id: clientId,
variant_id: querySelector('[name="id"]')?.value || (new URLSearchParams(window.location.search)).get('variant'),
}).render('#product-locator-container', 'iframe'); }); })(); </script>