How do I add a Shopify button to my Angular 16 application

I have an angular16 application. My client has a shopify store that he wants an "order now" button on the site that'll go to the shopify store. He's generated these buttons with code on Shopify, but I'm not sure how Shopify expects me to integrate them. I tried and failed. I did some Googling and got nowhere. I asked ChatGPT and thought I was on my way, but there are clearly some pieces that ChatGPT left out.

I've done an npm install of the shopify button module. I built a service component to call the shopify button:

import { Component, OnInit } from '@angular/core';
import { GetExternalScriptService } from '../services/get-external-script.service';

@Component({
selector: 'app-shopify-button',
templateUrl: './shopify-button.component.html',
styleUrls: ['./shopify-button.component.css'],
})
export class ShopifyButtonComponent implements OnInit {
constructor(private scriptService: GetExternalScriptService) {}

ngOnInit(): void {
// Load the Shopify Buy Button script
this.scriptService
.loadScript('https://sdks.shopifycdn.com/buy-button/2.11.0/buy-button.min.js')
.then(() => {
this.renderShopifyButton();
})
.catch((error) => {
console.error('Error loading Shopify Buy Button script:', error);
});
}

renderShopifyButton(): void {
const client = ShopifyBuy.buildClient({
domain: 'your-shop.myshopify.com', // I'll obviously fill these in ...
storefrontAccessToken: 'your-storefront-access-token',
});

const button = ShopifyBuy.UI.init(client);

button.create('product', {
id: 'product-id', // Replace with the product ID you want to display
node: document.getElementById('shopify-button'),
options: {
product: {
buttonDestination: 'checkout',
layout: 'vertical',
variantId: 'all',
width: '240',
},
cart: {
startOpen: false,
},
},
});
}
}


This was ChatGPT generated code. But it doesn't know what that ShopifyBuy object is, which makes sense, since it's not declared anywhere. But I don't understand that one.

As you can see, I'm going a bit in circles and, if anyone can help, I'd be very appreciative.

Continue reading...