SKU selector does not display expected labels

Dear community,
Some of my products come in different sizes: S, M, L and XL. It used to work before migrating to VTEX IO, but now, when I configured the sku-selector, the sizes are S, METRO, la and SG instead of S, M, L and XL.
Other properties for other products (model 1, model 2, model 3; 38, 40, 42; etcetera) are ok.
Does anyone know how to solve this?
Thank you, have a nice day
Coca

Do the values you mentioned (S, METRO, la, SG) make any sense to you? Are they visible in any part of the catalog of your store? Knowing where they are being pulled from will help us understand what is going on.

Also, are you using the latest version of our starter store theme or did you create your theme from scratch?

My guess is you might need to fiddle with the props in the SKU selector component to get it to display what you want. I would take a closer look at showVariationsLabels and displayMode.

1 Like

Those values don’t make sense to me, in fact, before IO they were correctly shown in the past framework. In the catalog there are no products with those specifications (S, METRO, la, SG), I can see the specifications are S, M, L and XL.
Past framework
VTEX IO

I created my theme from scratch, from minimum-boilerplate (all empty but the manifest and style files)
I did play with the showVariationsLabels and displayMode, I don’t know why the block is reading [S, M, L, XL] and displaying [S, METRO, la, SG]

My guess is that something is going wrong with storefront content translation, since your store locale is set to es-CL.

I can see how XL could become SG as an acronym for “super grande” and maybe M could become METRO if misinterpreted as the length unit for meters.

Whenever you face an issue that you feel might be related to storefront translations, you can always add the ?cultureInfo={locale} query parameter to render the page in a different {locale}. This would be your PDP in en-US, for instance.

This documentation might be able to help you fix these strings:

1 Like

Bingo! Just checked it out in your store and that’s exactly what is happening:

To fix METRO, I think you would need to write the following GraphQL query and arguments.

Query

mutation Save($saveArgs: SaveArgsV2!) {
  saveV2(args: $saveArgs)
}

Query variables

{
  "saveArgs": {
    "to": "es-CL",
    "messages": [
      {
        "srcLang": "en-US",
        "srcMessage": "M",
        "context": "vtex.sku-selector@3.x",
        "targetMessage": "M"
      }
    ]
  }
}

Could you check it that works for you?

2 Likes

@georgebrindeiro it didn’t work! But I talked to someone internally and they told me that this query only works for strings that are defined by messages in VTEX IO apps.

What I learned

Since these strings were pulled from the Catalog, I had to find the right values for fieldId and fieldValueId to use the Specification values mutation. I got them from here, where the Talla vestido specification can be found in my store’s catalog.

Query

mutation translate($args:FieldValueInputTranslation, $locale:Locale){
  translateFieldValues(fieldValues:$args,locale:$locale)
}

Mutation

{
  "args": {
    "fieldId": "20",
    "fieldValuesNames":[
        {
          "id":"65",
          "name":"S"
        },
        {
          "id": "66",
          "name": "M"
        },
        {
          "id": "67",
          "name": "L"
        },
        {
          "id": "68",
          "name": "XL"
      	}
    ]
  },
  "locale": "es-CL"
}

What surprised me

Turns out I didn’t even have to do any of that! These mutations are only necessary if you are using multi-language stores.

If a regular store is getting auto-translated when it is only offered in a single language, that means there is something wrong with your locale settings.

I was told you should open a ticket to VTEX support requesting help to fix it – it seems like mine was set to es-CO in one place and es-CL in another.

And now it works, no need for GraphQL queries :raised_hands: Thank youuuu

2 Likes

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.