Shopify Buy Button Integration – ShipEarly

Buy Buttons help you add your products to your external non-Shopify website and blog posts. They also make purchasing the products easier for customers by removing the need to go to a separate page or website to finalize their order.

A Buy Button is like a shortcut for buying one of your products. You can place Buy Buttons on your non-Shopify website or blog. Buy Buttons can show product pictures, descriptions, and prices, all while letting customers purchase products without leaving the website. Any updates to a product’s details in your Shopify admin will appear on the product’s Buy Button.

Shopify Support for Buy Buttons

Integrate ShipEarly to Buy Button

1. Edit each BuyButton snippet and search for the cart component configuration options. Search script for a line containing

"cart": {

2. Insert shipearlyBuyButtonCartInit as a new “afterRender“ event below that line in each snippet so that you end up with the following.

"cart": {
  "events": {
     "afterRender": shipearlyBuyButtonCartInit 
},

3. Include this JavaScript function in all pages containing a BuyButton script modified with the above changes. Preferably, it should be placed in the <head> tag of a page template.

<script>
/*!
 * ShipEarly Shopify BuyButton v1.0.3
 */

function shipearlyBuyButtonCartInit(cart) {
	var button = cart.view.wrapper.querySelector(cart.selectors.cart.button);
	if (button === null) {
		return;
	}
	try {
		button.addEventListener('click', function(e) {
			e.stopImmediatePropagation();
			e.preventDefault();

			var domain = cart.props.client.config.domain;
			var query = cart.model.lineItems.map(function(item) {
				var gid = item.variant.id;
				try {
					gid = atob(gid);
				} catch (exception) {
					console.debug({ exception, gid });
				}
				var id = gid.split('/').pop();
				var quantity = item.quantity;
				return encodeURIComponent('updates[' + id + ']') + '=' + encodeURIComponent(quantity);
			}).join('&');

			// Cross-domain Google Analytics fix
			var linkerParam = '';
			if (typeof ga === 'function') {
				ga(function() {
					linkerParam = ga.getAll()[0].get('linkerParam');
				});
			}
			if (linkerParam) {
				query += '&' + linkerParam;
			}

			window.location = 'https://' + domain + '/pages/checkout' + '?' + query;
		});
	} catch (ex) {
		console.error(ex);
	}
}
</script>

Shopify Support for Buy Buttons

Integrate ShipEarly to Buy Button

Related articles