How to get app block setting from its javascript asset file

[EddieLuong]

Hi guys,

I create an app block (using theme app extension) with the file/folder structure:

themes-app-extension

-- assets

    ---- my-css.css

    ---- my-javascript.js

-- blocks

    ---- app-block.liquid

-- locales

-- snippets

In the app-block.liquid I create the block setting in the block schema as below:

{% schema %}
  {
    "name": "My block",
    "target": "section",
    "stylesheet": "my-css.css",
    "javascript": "my-javascript.js",
    "templates": [
      "collection", "index"
    ],
    "settings": [
      {
        "id": "text_size",
        "type": "number",
        "label": "Text size",
        "default": 15
      }, {
        "id": "icon_size",
        "type": "number",
        "label": "Icon size",
        "default": 20
      }
    ]
  }
{% endschema %}

In app-block.liquid, I can get the app block setting by access the block object as below:

{{ block.settings.text_size }}
{{ block.settings.icon_size }}

But now I want to get the app block setting in javascript file, meaning my-javascript.js

Is there anyway to do this? I appreciate any help and suggestion.

Thanks

[scottshop · Accepted solution]

@EddieLuong did you find an answer for this? I believ you'd want to write to a JS variable within your liquid template and then read that value from within your my-javascript.js file.

[EddieLuong]

Hi @scottshop Yes, I did like that and it's working fine.

Thanks

[raul-vila]

Hi there, could you write an example of how did you do it? Thanks 🙂