Shopify "Buy now" button (Javascript code integration) Problem!

Hey Alex,

Thanks for the login details. Which code are you trying add and where exactly?

The text you are referring to is only a warning to let users know that custom code can break the layout builder, if it’s not properly formatted.

Best regards,
Rikard

Hi,

Thanks for the update. So the problem is that there are no products showing at the last Grid Row element on the front page? I see that the content you have added in the block is there on the front end, but the div which I think is supposed to hold the actual product, is empty. I would suggest that you reach out to the authors of this code for support instead, as they should be in a better situation to help you out with this.

Best regards,
Rikard

Hi Alex,

Thanks for the update. We don’t have any problems with looking for errors for you, but debugging third party code which has no relation to the theme, is beyond the scope of our support policy unfortunately. We have to stick to supporting our theme, basically.

Best regards,
Rikard

Hi,

Have you tried creating a custom shortcode for the shopify button instead of directly embedding the code in a text or code block? This should keep you from directly using html tags that could potentially break the layout of the builder and instead use the custom shortcode.

// https://codex.wordpress.org/Shortcode_API

Regarding the anchor, it is not working correctly because the ID has been applied to an anchor inside the section. You have to directly apply the segment-3 ID to the color section.

<div id="segment-3" style="height:1px; margin-top:0px" class="hr hr-invisible   avia-builder-el-67  el_after_av_buttonrow  avia-builder-el-last "><span class="hr-inner "><span class="hr-inner-style"></span></span></div>

Thank you for your patience.

Best regards,
Ismael

Hi,

Thank you for the update.

We recommend creating a custom shortcode for the shopify embed code in the functions.php file so that you do not have to add the embed code directly in the builder. A custom shortcode should look something like this.

//[foobar]
function foobar_func( $atts ){
	return "foo and bar";
}
add_shortcode( 'foobar', 'foobar_func' );

You can now use the shortcode [foobar] in a text or code block and it will render the text “foo and bar” in the front end.

Would you mind providing an example of the shopify code?

Best regards,
Ismael

Hi,

Thank you for the info.

In order to load the shopify script, we have to add this snippet in the functions.php file.

/*
 *  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: 'shop-smileicon-de.myshopify.com',
			storefrontAccessToken: '2bf601fd5327e67d70751fad741c6fa5',
		});

		document.querySelectorAll('.product-component-shopify').forEach(function(el) {
			console.log(el)
			ShopifyBuy.UI.onReady(client).then(function (ui) {
				ui.createComponent('product', {
					id: '6147674898616',
					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);

And the following code creates the new shortcode.

// 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' );

To add a new shopify button in a page, insert a code or text block, then use this shortcode.

[avs_shopify_button component="1612524419965"]

Just replace the value of the component attribute or parameter with the actual id of the shopify product component.

Best regards,
Ismael