Porting javascript parameter from script tags to theme app ext embedded block

[prysie]

Hopefully this will be a simple question.  I am porting from the script tag API to theme app extension embedded block.  The current implementation has 2 parameters being registered with script tag API by passing these as parameters

i.e. adding ?param1=foo&param2=bar

On the client side these parameters are retrieved by looping over the java scripts and parsing the parameters.

I'd like to port my app as low friction as possible and have tried to implement the same in a liquid block:

"javascript": "myscript.js?param1=foo&param2=bar",

or trying with html5 tags

<script id="myscript" src="{{ 'myscript.js' | asset_url }}" data-param1=foo data-param2="bar" defer></script>

I have tried the combinations of both but can not seem to get the parameters on the client side.

I'm sure this is a pretty basic requirement, hopefully someone can point me in the right direction.

[prysie · Accepted solution]

This is how I solved it for anyone interested.

Liquid

{% assign param1 = 'true' %}
{% assign param2 = '6Le26rQfAAAAAIkjnI6O3QFzT0DOTUUm2nzAJfPy' %}

<script id="myscript" src="{{ 'myscript-dev.js' | asset_url }}" data-param1={{ param1 }} data-param2={{param2}} defer></script>

Client Javascript

var javaScript= document.getElementById('myscript')

param1 = javaScript.getAttribute('data-param1')

param2 = javaScript.getAttribute('data-param2')