Блог

Я создаю веб-сайт Shopify без головы, используя shopify-nuxt. Я уже могу извлекать продукты и параметры продукта и создавать проверку, чтобы получить идентификатор проверки.

Теперь я хочу добавить товары в корзину, чтобы завершить оформление заказа. Идентификаторы, которые я получаю от своего параметра продукта, выглядят следующим образом:

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

Теперь, в моем магазине Vuex, когда я хочу добавить элемент строки, я использую такой метод:

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

Когда я пытаюсь добавить a 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`"}]}}]
 

Я заметил, что идентификатор моего параметра продукта отличается от идентификатора примера документации nuxt-Shopify. Но я не знаю, как получить «правильный» идентификатор, потому что выборка продукта с неправильными идентификаторами не работает.

После долгих исследований я узнал, как получить правильный идентификатор. Вы должны извлечь свойство admin_graph_api_id и присвоить ему btoa значение следующим образом:

btoa(this.selectedVariantId)