nuxt-shopify：无法将 productvariant 添加到结帐无效的全局 ID

编程问答 2022-06-01

问题描述

我正在使用 shopify-nuxt 构建一个无头 shopify 网站。我已经可以获取产品和产品变体并创建结帐以获取结帐 ID。

现在，我想将商品添加到购物车以完成结帐。我从 productvariant 中获得的 ID 如下所示：

 {
        "id": 37347204038813,"product_id": 5909234516125,"inventory_item_id": 39367677640861,"admin_graphql_api_id": "gid://shopify/Productvariant/37347204038813"
 },

现在，在我的 Vuex 商店中，当我想添加一个 lineItem 时，我使用的是这样的方法：

  async addCartItem(state,{selectedVariantId}) {
    const lineItemsToAdd = [
      {
        variantId: selectedVariantId,// either id,product_id or inventory_item_id
        quantity: 1
      }];
console.log(lineItemsToAdd) // [{variantId: 5909234516125,quantity: 1}]

    
    await this.$shopify.checkout.addLineItems(this.app.$checkout.getCheckoutId(),lineItemsToAdd)
      .then(checkout => {
        // The Method is not going here.
        state.commit('updateCheckout',checkout);
      }).catch((e) => {
        console.log(e);
      });
  },

当我尝试将 lineItem 添加到结帐时，使用 sdk 我收到以下错误：

Error: [{"message":"Variable $lineItems of type [CheckoutLineItemInput!]! was provided invalid value for 0.variantId (Invalid global id `5909234516125`)","locations":[{"line":1,"column":3245}],"extensions":{"value":[{"variantId":5909234516125,"quantity":1}],"problems":[{"path":[0,"variantId"],"explanation":"Invalid global id `5909234516125`","message":"Invalid global id `5909234516125`"}]}}]

我注意到，我的 productvariant 的 ID 看起来与 nuxt-shopify 文档示例的 ID 不同。但我不知道如何获得“正确”的 id，因为使用错误的 id 获取产品不起作用。

解决方法

经过大量研究，我发现了如何获取正确的 ID。您必须获取属性 admin_graph_api_id 并使用 btoa 对其进行编码，如下所示：

btoa(this.selectedVariantId)

nuxt.jsshopifyshopify-api