How can I simplify the code for separate JavaScript buy buttons?

Leeeroy
Visitor
1 0 0

Hi all,

 

I'm looking to simplify this code to avoid pasting this on each page for each button. My coding experience is limited but I'd like to call a .js script into each page with a buy button whilst just updating the product component ID. Thanks in advance.

Here is the current buy button code from Shopify:

<div id='product-component-1714079872752'></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
var script = document.createElement('script');
script.async = true;
script.src=scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: '91deae-e6.myshopify.com',
storefrontAccessToken: '3156c92da95e32d57284f93df3bba868',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '8651151966437',
node: document.getElementById('product-component-1714079872752'),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px"
}
},
"button": {
"font-family": "Candara, sans-serif",
":hover": {
"background-color": "#000000"
},
"background-color": "#000000",
":focus": {
"background-color": "#000000"
}
}
},
"contents": {
"img": false,
"title": false,
"price": false
},
"text": {
"button": "Add to cart"
}
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"button": false,
"buttonWithQuantity": true
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
"font-family": "Candara, sans-serif",
":hover": {
"background-color": "#000000"
},
"background-color": "#000000",
":focus": {
"background-color": "#000000"
}
}
},
"text": {
"button": "Add to cart"
}
},
"option": {},
"cart": {
"styles": {
"button": {
"font-family": "Candara, sans-serif",
":hover": {
"background-color": "#000000"
},
"background-color": "#000000",
":focus": {
"background-color": "#000000"
}
}
},
"text": {
"total": "Subtotal",
"button": "Checkout"
}
},
"toggle": {
"styles": {
"toggle": {
"font-family": "Candara, sans-serif",
"background-color": "#000000",
":hover": {
"background-color": "#000000"
},
":focus": {
"background-color": "#000000"
}
}
}
}
},
});
});
}
})();
/*]]>*/
</script>

Replies 2 (2)

finditallnow
Visitor
2 0 0

good question, i need this solution too, can any one provide feedback, as to how we can split the embed code so that, the javascript is static and placed in maybe child funtion.php, while we only change and use component id on different page

finditallnow
Visitor
2 0 0

I Found a Solution to this. Use the following Code in your child function.php and be sure to update the areas marked as XXXXXXXXXXXXX with ur own ids:

 

 

/*
 *  add shopify script
 */
function ava_script_shopify_script(){
?>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
	window.shopifyOptions = {
		"product": {
		"styles": {
		"product": {
		"@media (min-width: 601px)": {
		"max-width": "100%",
		"margin-left": "0",
		"margin-bottom": "50px"
		},
		"text-align": "left"
		},
		"title": {
		"font-family": "Lato, sans-serif",
		"font-size": "30px",
		"color": "#4e3a5e"
		},
		"button": {
		"font-family": "Lato, sans-serif",
		":hover": {
		"background-color": "#2395e6"
		},
		"background-color": "#27a5ff",
		":focus": {
		"background-color": "#2395e6"
		},
		"border-radius": "35px",
		"padding-left": "55px",
		"padding-right": "55px"
		},
		"price": {
		"font-family": "Lato, sans-serif",
		"font-size": "26px",
		"color": "#a87bc9"
		},
		"compareAt": {
		"font-family": "Lato, sans-serif",
		"font-size": "22.099999999999998px",
		"color": "#a87bc9"
		},
		"unitPrice": {
		"font-family": "Lato, sans-serif",
		"font-size": "22.099999999999998px",
		"color": "#a87bc9"
		},
		"description": {
		"font-family": "Lato, sans-serif",
		"font-size": "17px",
		"color": "#827191"
		}
		},
		"layout": "horizontal",
		"contents": {
		"img": false,
		"imgWithCarousel": true,
		"button": false,
		"buttonWithQuantity": true,
		"description": true
		},
		"width": "100%",
		"text": {
		"button": "Add to cart"
		},
		"googleFonts": [
		"Lato"
		]
		},
		"productSet": {
		"styles": {
		"products": {
		"@media (min-width: 601px)": {
		"margin-left": "-20px"
		}
		}
		}
		},
		"modalProduct": {
		"contents": {
		"img": false,
		"imgWithCarousel": true,
		"button": false,
		"buttonWithQuantity": true
		},
		"styles": {
		"product": {
		"@media (min-width: 601px)": {
		"max-width": "100%",
		"margin-left": "0px",
		"margin-bottom": "0px"
		}
		},
		"button": {
		"font-family": "Lato, sans-serif",
		":hover": {
		"background-color": "#2395e6"
		},
		"background-color": "#27a5ff",
		":focus": {
		"background-color": "#2395e6"
		},
		"border-radius": "35px",
		"padding-left": "55px",
		"padding-right": "55px"
		}
		},
		"googleFonts": [
		"Lato"
		],
		"text": {
		"button": "Add to cart"
		}
		},
		"option": {},
		"cart": {
		"styles": {
		"button": {
		"font-family": "Lato, sans-serif",
		":hover": {
		"background-color": "#2395e6"
		},
		"background-color": "#27a5ff",
		":focus": {
		"background-color": "#2395e6"
		},
		"border-radius": "35px"
		},
		"title": {
		"color": "#919191"
		},
		"header": {
		"color": "#919191"
		},
		"lineItems": {
		"color": "#919191"
		},
		"subtotalText": {
		"color": "#919191"
		},
		"subtotal": {
		"color": "#919191"
		},
		"notice": {
		"color": "#919191"
		},
		"currency": {
		"color": "#919191"
		},
		"close": {
		"color": "#919191",
		":hover": {
		"color": "#919191"
		}
		},
		"empty": {
		"color": "#919191"
		},
		"noteDescription": {
		"color": "#919191"
		},
		"discountText": {
		"color": "#919191"
		},
		"discountIcon": {
		"fill": "#919191"
		},
		"discountAmount": {
		"color": "#919191"
		},
		"cart": {
		"background-color": "#f9f9f9"
		},
		"footer": {
		"background-color": "#f9f9f9"
		}
		},
		"text": {
		"title": "Shopping Cart",
		"total": "Subtotal",
		"button": "Checkout"
		},
		"contents": {
		"note": true
		},
		"popup": false,
		"googleFonts": [
		"Lato"
		]
		},
		"toggle": {
		"styles": {
		"toggle": {
		"font-family": "Lato, sans-serif",
		"background-color": "#27a5ff",
		":hover": {
		"background-color": "#2395e6"
		},
		":focus": {
		"background-color": "#2395e6"
		}
		}
		},
		"googleFonts": [
		"Lato"
		]
		},
		"lineItem": {
		"styles": {
		"variantTitle": {
		"color": "#919191"
		},
		"title": {
		"color": "#919191"
		},
		"price": {
		"color": "#919191"
		},
		"fullPrice": {
		"color": "#919191"
		},
		"discount": {
		"color": "#919191"
		},
		"discountIcon": {
		"fill": "#919191"
		},
		"quantity": {
		"color": "#919191"
		},
		"quantityIncrement": {
		"color": "#919191",
		"border-color": "#919191"
		},
		"quantityDecrement": {
		"color": "#919191",
		"border-color": "#919191"
		},
		"quantityInput": {
		"color": "#919191",
		"border-color": "#919191"
		}
		}
		}
		};
	var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';

	if (window.ShopifyBuy) {
		if (window.ShopifyBuy.UI) {
			ShopifyBuyInit();
		} else {
			loadScript();
		}
	} else {
		loadScript();
	}

	function loadScript() {
		var script = document.createElement('script');
		script.async = true;
		script.src=scriptURL;
		(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
		script.onload = ShopifyBuyInit;
	}

	function ShopifyBuyInit() {
		var client = ShopifyBuy.buildClient({
			domain: 'XXXXXX.myshopify.com', 
			storefrontAccessToken: 'XXXXXX38881840d8edXXXXXXX',
		});

		document.querySelectorAll('.product-component-shopify').forEach(function(el) {
			console.log(el)
			ShopifyBuy.UI.onReady(client).then(function (ui) {
				ui.createComponent('product', {
					id: 'XXXX67589XXXXX',
					node: document.getElementById(el.id),
					moneyFormat: '%E2%82%AC%7B%7Bamount_with_comma_separator%7D%7D',
					options: window.shopifyOptions,
				});
			});
		});
	}
	})();
	/*]]>*/
</script>
<?php
}
add_action('wp_footer', 'ava_script_shopify_script', 9999);



// shopify button
function avs_shopify_button_cb( $atts ) {
	$param = shortcode_atts( array(
		'component' => '',
	), $atts );

	return "<div class='product-component-shopify' id='product-component-{$param["component"]}'></div>";
}
add_shortcode( 'avs_shopify_button', 'avs_shopify_button_cb' );

 

Afterwards just use the below code on the page you want any of your product to show. Replace the componet id with the required products id:

 

[avs_shopify_button component="XXXXX16305XXXXXX"]