如何将 Shopify 按钮添加到我的 Angular 16 应用程序

Question

我有一个 Angular16 应用程序。我的客户有一家 Shopify 商店，他希望网站上有一个“立即订购”按钮，可以转到 Shopify 商店。他在 Shopify 上使用代码生成了这些按钮，但我不确定 Shopify 希望我如何集成它们。我尝试过但失败了。我做了一些谷歌搜索，但一无所获。我问了 ChatGPT，以为我已经在路上了，但显然 ChatGPT 遗漏了一些内容。

我已经完成了shopify按钮模块的

npm install

。我构建了一个服务组件来调用shopify按钮：

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,
    },
  },
});
  }
}

这是 ChatGPT 生成的代码。但它不知道

ShopifyBuy

对象是什么，这是有道理的，因为它没有在任何地方声明。但我不明白那个。

如你所见，我有点绕圈子，如果有人能提供帮助，我将非常感激。

Answer 1

要将 Shopify 按钮添加到 Angular 16 应用程序中，您可以使用 Shopify 的 Buy Button SDK。这允许您将 Shopify 产品或产品系列集成到 Angular 应用程序中，使用户能够直接从您的 Shopify 商店购买商品。这是需要遵循的一些步骤：

1. 设置 Shopify 购买按钮

2. 将 Buy Button SDK 添加到您的 Angular 项目

3. 将 Buy Button SDK 添加到您的 Angular 项目

4. 为按钮创建组件

5. 将组件嵌入到您的应用程序中

6. 可选：集成购物车

   此集成可确保您的 Shopify 按钮和产品在 Angular 16 应用程序中无缝显示并正常运行。