How we can include jquery library in front end with APP with theme extension

[vinodk]

Hello
I am creating the shopify public app and did some jquery code in the app in front end. I need to include jquery library in the front end via app with the help of theme extensions. Please let me know how i can do this. below is code example i need to include via schema.

{% schema %}
  {
    "name": "Lyfsize",
    "target": "section",
    "stylesheet": "front_shop.css",
    "javascript": "front_shop.js",
    "templates": ["product", "index"],
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "Click here"
      },
      {
        "type": "color",
        "id": "text_color",
        "label": "Text Color for anchor tag",
        "default": "#000000"
      },
       {
        "type": "color",
        "id": "form_text_color",
        "label": "Text Color for Form Label",
        "default": "#000000"
      },
      {
        "type": "color",
        "id": "form_button_text_color",
        "label": "Text Color for Submit Button",
        "default": "#ffffff"
      },
      {
        "type": "color",
        "id": "form_button_background_color",
        "label": "Submit Button background color",
        "default": "#000000"
      },
       {
        "type": "checkbox",
       "id": "show_announcement",
       "label": "Show Form",
       "default": false
      }
    ]
  }
{% endschema %}

[Ole_Visionz]

At the top of the javascript file you are loading (in your case the front_shop.js), add the following:

function include(filename, onload) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src=filename;
    script.type = 'text/javascript';
    script.onload = script.onreadystatechange = function() {
        if (script.readyState) {
            if (script.readyState === 'complete' || script.readyState === 'loaded') {
                script.onreadystatechange = null;                                                  
                onload();
            }
        } 
        else {
            onload();          
        }
    };
    head.appendChild(script);
}

include('http://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js');

This will load the jquery library and allow you to use jquery functions in your front_shop.js