ShipEarly Buy Button Installation – ShipEarly

Sections

Global Installation Script

Add an installation script like the following replacing the subdomain onto your theme file.

<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>

Or direct tags inside the <head> as an alternative replacing your subdomain

<head>
    <!-- ... -->
    <link id="shipearly-widgets-css" href="https://{yoursubdomain}.shipearlyapp.com/widgets/dist/shipearly-widgets.min.css" rel="stylesheet">
    <script id="shipearly-widgets-js" src="https://{yoursubdomain}.shipearlyapp.com/widgets/dist/shipearly-widgets.min.js" async></script>
</head>

Global Render Script

Also add globally on your theme (or on every page where there will be a buy button) a script to create and render the cart.

<script>
window.addEventListener('load', function() {
  window.shipearlyBuyButton = ShipEarly.BuyButton({
    client_id: '<SHIPEARLY_API_CLIENT_ID>',
  });
  window.shipearlyBuyButton.render();
});
</script>

The instance is assigned to a global variable window.shipearlyBuyButton so that may be accessed from other event handler scripts.

Product Page Add Item Event

The primary interaction for starting a cart is adding an item. To do that create an event handler on an “Add to Cart” button that calls the addItem function of the buy button instance. (example below)

<script>
document.body.addEventListener('click', function(e) {
  if (!e.target.matches('#AddToBuyButton')) return;
  e.preventDefault();
  window.shipearlyBuyButton.addItem({
    variant_id: 43248584687709,
    quantity: 1, // Optional. Defaults to 1.
  });
}, false);
</script>

Multiple items can be added simultaneously if done in an array by calling addItems

Add items with addItems([{ variant_id, quantity },{ variant_id, quantity }]) or addItem({ variant_id, quantity }).

An item may have one of the following product keys:

variant_id: 43248584687709,
ID for a specific variant from your eCommerce platform.
product_id: 7034682900573,
Selects an arbitrary variant of the product. Only recommended for simple products with no variants.
sku: 'HEL-1',
upc: '83736789238',
Should always be provided as a string in case of leading zeroes.

Other Functions

Note that all methods are async and return a Promise resolved upon completion.

When the cart instance is first created it will not be displayed until render() is called. The parent of the rendered element can be specified with a CSS selector such as render('#main') otherwise it defaults to the body tag.
Replace Items: Replace all items with setItems([{ variant_id, quantity },{ variant_id, quantity }]).
Empty Cart: Remove all items with emptyItems().
Currency: Set the currency code with setCurrencyCode('USD') default is detected from the client when the first item is added to the cart.
Assign a Pre-Defined Retailer to Exclusively show in Checkout: Preselect retailer id with setPreselectRetailerShipEarlyId(2068) or setPreselectRetailerAccountId('12345ABC').
Display Pre-Determined Delivery Method in Checkout: Preselect delivery option with setPreselectDeliveryOption('local_delivery').
Batch update several properties of the cart with

saveCart({
  currency_code: 'USD',
  preselect_retailer_shipearly_id: 2068,
  preselect_delivery_option: 'local_delivery',
})

Any of the above methods trigger a refresh of the cart’s internal model and will redraw the cart if it is rendered. The refresh() method can be called to force this but doing so shouldn’t be necessary.

Internal Cart Model

Attributes can be read from the instance through a cart property that is populated when render() or refresh() is called for the first time and is updated by any of the above setter methods.

Eg. Setting a currency code input value after rendering.

window.shipearlyBuyButton.render().then(function() {
  document.querySelector('#currencyCode').value = window.shipearlyBuyButton.cart.currency_code;
});

It is also possible to call refresh() instead of render() if all that is desired is the internal model. This might be desirable on a dedicated cart page where the slider would be redundant.

<script>
window.addEventListener('load', function() {
  window.shipearlyBuyButton = ShipEarly.BuyButton({
    client_id: '<SHIPEARLY_API_CLIENT_ID>',
  });
  window.shipearlyBuyButton.refresh().then(function() {
    console.debug(window.shipearlyBuyButton.cart);
    // Set page elements with values from the cart property
  });
});
</script>

Events

The BuyButton instance will also supports addEventListener for the following events.

‘change' when a cart item is changed with the cart’s UI controls.
‘change:error' when an error occurs during the AJAX update performed when updating a cart item with the cart’s UI controls.
'submit' when the “Checkout” button is clicked.