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 6 (6)
evaldas_92
Shopify Partner
34 0 14

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
34 0 14

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

 

SoBooster
Shopify Partner
36 1 1

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.