wp-graphql-woocommerce
wp-graphql-woocommerce copied to clipboard
Unable to match a `Variable Product Attributes` with his `Variants Attributes` by his `name` or `label`
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:
- Create a variable product
- 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.
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"
}