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

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

vinodk
Shopify Partner
24 0 5

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 %}

 

 

Reply 1 (1)

Ole_
Shopify Partner
41 8 20

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

 

 

If you find my suggestions helpful, kindly express your feedback by liking or marking them as a solution.

visionz.de