How can I translate new "Filter" titles ?

Binh
Shopify Partner
3 1 3

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.

Binh_0-1632732092376.png

Binh_1-1632732160152.png

 

Thanks.

Halotheme - Top Theme Shopify


If our answer is helpful then please like and accept as solution!


New Submit ThemeHalo 

Replies 5 (5)
evaldas_92
Shopify Partner
32 0 13

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:

evaldas_92_0-1632755051968.png

 

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

evaldas_92_1-1632755099275.png

 

JonasSchindler
Shopify Partner
6 0 1

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

 

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

evaldas_92
Shopify Partner
32 0 13

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
Shopify Partner
6 0 1

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
Shopify Partner
6 0 1

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