Shopify / theme-extension-getting-started

A theme app extension boilerplate that highlights the basic structure and features that are available to developers who want to integrate their apps with Shopify Online Stores.
https://shopify.dev/apps/online-store/theme-app-extensions/getting-started
MIT License
105 stars 45 forks source link

i18n error only when adding theme extension block to theme for first time #24

Open qq99 opened 1 year ago

qq99 commented 1 year ago

I'm developing a theme extension that uses en.default.schema.json to also translate the configurable properties of the block. The idea is that I will offer this app in multiple markets, not just en.

See this snippet from my app's en.default.schema.json:

{
  "common": {
    "settings": {
      "font_size_label": "Font Size",
      "color_label": "Color",
      "font_size": {
        "normal": "Normal",
        "small": "Small",
        "extra_small": "Extra Small"
      },
      "margin_top": "Top margin adjustment"
    }
  }
}

When you go to add the block to your theme, you see that everything else is translated properly except the radios: image

However, if you save your theme, then reload, you'll see that the font size options are now i18n'd properly: image

Here's a gif of the process of me adding, seeing bug, saving theme, reloading, and seeing bug resolve: firefox_zZafH0jR7H

I thought I was going insane but I believe this is just a Shopify bug. I tried different nestings of keys (e.g., common.settings.foo), namings, etc, radio options just seem to be bugged.

You should be able to replicate this with this shop & theme (feel free to play with it, this is an older demo store that I'm not using actively) https://admin.shopify.com/store/qunit-price-demo-store/themes/143642493204/editor?previewPath=%2Fproducts%2Fblueberry-shampoo&block=template--17897272017172__main%2Ffd29d93c-4ad0-4c9f-8b35-5395c6e8a214&section=template--17897272017172__main

by adding and removing the Unit Price or the Unit block.

I fear that my app will be rejected in review because of this.

qq99 commented 1 year ago

This is how I was using it in my app block .liquid:

{% schema %}
  {
    "name": "t:unit_price_element.meta.title",
    "target": "section",
    "stylesheet": "unitprice.css",
    "javascript": "unitprice.js",
    "settings": [
      {
        "label": "t:common.settings.color_label",
        "id": "color",
        "type": "color",
        "default": "#555"
      },
      {
        "label": "t:unit_price_element.settings.savings_color_label",
        "id": "savingsColor",
        "type": "color",
        "default": "#00ac00"
      },
      {
        "label": "t:common.settings.font_size_label",
        "id": "fontSize",
        "type": "radio",
        "options": [
          {
            "value": "1em",
            "label": "t:common.settings.font_size.normal"
          }, {
            "value": "0.9em",
            "label": "t:common.settings.font_size.small"
          }, {
            "value": "0.7em",
            "label": "t:common.settings.font_size.extra_small"
          }
        ],
        "default": "0.9em"
      },
    ],
  ...
  }
{% endschema %}

In case it helps with repro. I have to update my app to remove the translation so I can pass app store review