wp-graphql-woocommerce icon indicating copy to clipboard operation
wp-graphql-woocommerce copied to clipboard

Unable to match a `Variable Product Attributes` with his `Variants Attributes` by his `name` or `label`

Open daguitosama opened this issue 1 month ago • 0 comments

Describe the bug

Im building a headless WooCommerce Server Side rendered Store using Remix and leveraging this awesome plugin api.

While building a product page, I noticed some times, for Variable products, when Product Attributes Names has several words, like: Design By 1NationUp the GraphQL API messes up the variation attribute node label, and return something that does not match the actual name of the Attribute, like: Design By 1nationup, it drops the capitalizaitons on the last word, returns 1nationup instead 1NationUp. So because of that, I haven't been able to find a reliable way to build a variant selection widget for the page.

Would like to ask if this is a known scenario, or completely unseen before. Is so weird, for most products works great, but in this case with the attribute name being 3 words with diferent capitalizations in the last word, it drops the capitals on the that one.

To Reproduce Steps to reproduce the behavior:

  1. Create a variable product
  2. Add a attrubute named as Design By 1NationUp

2.1 Set Variants for Yes and No 3. Fetch a query containing productAttributes and variantAttributes (attached query) 4. See how they differ on the name of the product attribute and the label of the variant attribute (attached screen)

Expected behavior It would be expected, that the variant attribute name or label respect the name of the product attribute. Since the variant attribute name looks like it get's deterministically slugified, I assume it does so for a reason, so i defaulted to the label, wish looks like a exact match with the product attribute name on most cases. So by respecting that, folks can rely on it and ship product variant selection features that work seameslly and with out any weird errors.

Screenshots On the screen you can see above, a Woo Rest API query result containing the Product Attribute in question named as "Design by 1NationUp". And on the botton, you can see the GraphQL IDE query & result, wish variant attribute label missmatch the afordmentioned Product Attribute Name. Screenshot 2024-06-26 at 5 09 29 PM

Desktop (please complete the following information):

  • OS: MacOS Ventura 13.6
  • Browser Chrome 126

Plugin Versions

  • WooGraphQL Version: 0.20.0
  • WPGraphQL Version: 1.27.0
  • WordPress Version: 6.5.4
  • **WooCommerce Version:**9.0.1

Additional context Used graphql query:


query getProduct($productSlug: String!) {
  products(where: {slugIn: [$productSlug]}) {
    nodes {
      databaseId
      type
      name
      sku
      slug
      description
      image {
        altText
        srcSet
        sourceUrl
      }
      ... on VariableProduct {
        variations(first: 300) {
          nodes {
            id
            price(format: RAW)
            attributes {
              nodes {
                attributeId
                name
                label
                value
              }
            }
            image {
              altText
              srcSet
              sourceUrl
            }
          }
        }
        attributes(first: 100) {
          nodes {
            attributeId
            name
            variation
            label
            options
          }
        }
      }
      ... on SimpleProduct {
        price(format: RAW)
      }
    }
  }
}

Variables:

{
  "productSlug": "your-product-slug-here"
}

daguitosama avatar Jun 26 '24 21:06 daguitosama