gatsbyjs / gatsby-starter-shopify

A Gatsby starter using the latest Shopify plugin showcasing a store with product overview, individual product pages, and a cart
https://shopify-demo.gatsbyjs.com/
BSD Zero Clause License
311 stars 137 forks source link

variantForOptions always return undefined #71

Open lezan opened 2 years ago

lezan commented 2 years ago

I was testing the variantForOptions when I find out it is always undefined so this line

https://github.com/gatsbyjs/gatsby-starter-shopify/blob/66d9909db8d7492e6dbfb93e3d914ca0f626ec6c/src/pages/products/%7BShopifyProduct.productType%7D/%7BShopifyProduct.handle%7D.jsx#L48

always assign the second part (variant),

Checking Shopify documentation (here)[https://shopify.github.io/js-buy-sdk/product-helpers.js.html#line6] variant it is not what variantForOptions expect as the second argument but more an object like that

{
  size: "Small",
  color: "Red"
}

So maybe something like that can work and fix the issue

const productVariant = client?.product?.helpers?.variantForOptions(shopify, {
  [variant?.selectedOptions[0]?.name]: variant?.selectedOptions[0]?.value,
  [variant?.selectedOptions[1]?.name]: variant?.selectedOptions[1]?.value,
}) || variant;

If you wanna try it yourself just fork this repo and print the helpers with a console.