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_Visionz
Shopify Partner
49 10 22

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.
Our (German) agency: visionz.de
Our Shopify App for custom pricing & unlimited product options: Visionz Easy Product Options