How can I translate new "Filter" titles ?

[Binh]

Hi Guy!

How can I translate the title of this new Filter, when I am currently using this variable {{ filter.label | escape }} and I can't find it in app.

Thanks.

[evaldas_92]

It appears that adding product options to collection filter does not use translated option names when they are available. It does not seem to matter if options are added to filter before or after those options are translated.

Here I have a 3 products with translated option names:

Store: evr-novicell-7.myshopify.com

{
  "data": {
    "products": {
      "edges": [
        {
          "node": {
            "id": "gid://shopify/Product/7124606877858",
            "options": [
              {
                "id": "gid://shopify/ProductOption/9208951373986",
                "name": "Option 1",
                "translations": [
                  {
                    "key": "name",
                    "value": "Option 1 in da"
                  }
                ]
              },
              {
                "id": "gid://shopify/ProductOption/9208962941090",
                "name": "Option 2",
                "translations": [
                  {
                    "key": "name",
                    "value": "Option 2 in da"
                  }
                ]
              }
            ]
          }
        },
        {
          "node": {
            "id": "gid://shopify/Product/7124615463074",
            "options": [
              {
                "id": "gid://shopify/ProductOption/9208962810018",
                "name": "Option 1",
                "translations": [
                  {
                    "key": "name",
                    "value": "Option 1 in da"
                  }
                ]
              },
              {
                "id": "gid://shopify/ProductOption/9208962842786",
                "name": "Option 2",
                "translations": [
                  {
                    "key": "name",
                    "value": "Option 2 in da"
                  }
                ]
              }
            ]
          }
        },
        {
          "node": {
            "id": "gid://shopify/Product/7124615495842",
            "options": [
              {
                "id": "gid://shopify/ProductOption/9208962875554",
                "name": "Option 1",
                "translations": [
                  {
                    "key": "name",
                    "value": "Option 1 in da"
                  }
                ]
              },
              {
                "id": "gid://shopify/ProductOption/9208962908322",
                "name": "Option 2",
                "translations": [
                  {
                    "key": "name",
                    "value": "Option 2 in da"
                  }
                ]
              }
            ]
          }
        }
      ]
    }
  },
  "extensions": {
    "cost": {
      "requestedQueryCost": 11,
      "actualQueryCost": 11,
      "throttleStatus": {
        "maximumAvailable": 1000,
        "currentlyAvailable": 989,
        "restoreRate": 50
      }
    }
  }
}

Then I set up collection filters:

And open the front-end (Dawn 1.0.0) - filter option names are not translated:

[JonasSchindler]

Hi Evaldas, did you find a solution to this problem?

I also need to translate options filter labels for the collection filter.

[evaldas_92]

No, last reply I got from Shopify was some months ago and they said it's a known limitation and will be addressed in the future 😞 

[JonasSchindler]

ok crazy, but thanks for your reply. 😕

Did you manage to find a workaround, like with a metafield app or something?

Is it possible to modify the theme code to get the filter label to translation apps?

[JonasSchindler]

Ok, for everybody who faces the same problem. I quickly developed a dirty work-around. It is working stable and may help others.

In my theme (Impulse) there is for loop (for filters in filters) in the file "collection-grid-filters-form.liquid"

The loop goes through each filter item and gets it's "filter.label" (like @Binh describes above).

I used a switch statement to catch my filter labels that I want to translate:

{% case filter.label %}
   {% when "Stielmaterial" %}
        {{ 'products.filter.stemmaterial'| t}}
   {% when "Stiellänge" %}
        {{ 'products.filter.stemlength'| t}}
   {% when "Tätigkeit" %}
        {{ 'products.filter.usecase'| t}}
   {% when "Werkzeugkopf Material" %}
        {{ 'products.filter.tool_head_material'| t}}
   {% else %}
        {{ filter.label | escape }}
{% endcase %}

For each of my labels, I created an entry in the locale files (en.default.json) of the language I want to translate to. This entry gets displayed when the switch statement catches the filter label.

Best,

Jonas

[SoBooster]

If you need a quick and advanced solution to translate filter title and values according to your translation data, you can use this filter app https://apps.shopify.com/ultimate-search-and-filter-1.

It lets you translate the Filter title and it fetches the translated filter values automatically; no code needed.