Theme.liquid java script

[learningdesign]

In my Assets Folder

i have created a file
application.js.liquid

and then transfer all codes from .js files on assets folder to my application file which i have created

then in theme.liquid file i have delete all .js scripts and paste this code in the last of theme.liquid

this code

but when i do this webiste few section got broke beccasue of these three codes

{{ ‘slideshow.js’ | asset_url | script_tag }}
{{ ‘animations.min.js’ | asset_url | script_tag }}

{{ ‘vendor.min.js’ | asset_url | script_tag }}

when i delte this website got broke when i leave this website is ok how to solve this problem please i am doing all this to increase my speed in getmetrix

[Huptech-Web]

Hi @learningdesign , You should use “async” or “defer” in the script tag do not use both. Replace the below script with your code. Also, Check the sequence of the code. Add the code to your file in the same sequence.

If this does not work please provide me the storefront URL.

[learningdesign]

yes the sequence is correct with your code also it did not work

[learningdesign]

{%- capture dir -%}
{%- case request.locale.iso_code -%}
{%- when ‘ae’ or ‘ar’ or ‘arc’ or ‘bcc’ or ‘bqi’ or ‘ckb’ or ‘dv’ or ‘fa’ or ‘glk’ or ‘ha’ or ‘he’ or ‘kwh’ or ‘ks’ or ‘ku’ or ‘mzn’ or ‘nqo’ or ‘pnb’ or ‘ps’ or ‘sd’ or ‘ug’ or ‘ur’ or ‘yi’ -%}
rtl
{%- else -%}
ltr
{%- endcase -%}
{%- endcapture -%}

{% render 'thunder-injects' %} {% render 'head-preload' %}

{% if settings.favicon != blank -%}

{%- endif %} {{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} – {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} – {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %}

{% if page_description %}

{% endif %}

{%- unless settings.heading_font.system? and settings.body_font.system? -%}

{%- endunless -%}

{% render ‘social-meta-tags’ %}

{{ ‘app.css’ | asset_url | stylesheet_tag }}
{{ ‘product-grid.css’ | asset_url | stylesheet_tag }}

{% render ‘head-variables’ %}

{%- if tinyscript -%}{{ content_for_header }}{%- else -%}{% render ‘tiny-script-control’ %}{%- endif -%}

{% include ‘hulk_po_vd’ %}

{{ 'accessibility.skip_to_text' | t }}

{% sections 'header-group' %}

{{ content_for_layout }}

{% sections 'footer-group' %} {% render 'cart-drawer' %} {% render 'product-drawer' %} {% render 'search-drawer' %}

{{ ‘vendor.min.js’ | asset_url | script_tag }}
{% if settings.animations %}
{{ ‘animations.min.js’ | asset_url | script_tag }}

{% endif %}
{{ ‘product.js’ | asset_url | script_tag }}
{{ ‘slideshow.js’ | asset_url | script_tag }}
{{ ‘app.js’ | asset_url | script_tag }}

{%- if settings.free_shipping -%}
{{ ‘free-shipping.js’ | asset_url | script_tag }}
{{ ‘free-shipping.css’ | asset_url | stylesheet_tag }}
{%- endif -%}
{%- if request.design_mode -%}
{{ ‘theme-editor.js’ | asset_url | script_tag }}
{%- endif -%}
{% render ‘back-to-top’ %}
{{‘tiny-img-link-preloader.js’ | asset_url | script_tag }}
{% render ‘thunder-preload’ %}

this is my theme.liquid code and my sequence is

Vendor
animation
product
slideshow
app
scroll-shadow
predictive-search
freeshipping
theme-editor
tiny-img-link-preloader

please check what i am doing wrong here

[Huptech-Web]

Hi @learningdesign , I checked that your JS is called at the end. Can you share the screenshot where you have added your code exactly in the theme.liquid?

[learningdesign]

Screen shot with full code

{%- capture dir -%}
{%- case request.locale.iso_code -%}
{%- when ‘ae’ or ‘ar’ or ‘arc’ or ‘bcc’ or ‘bqi’ or ‘ckb’ or ‘dv’ or ‘fa’ or ‘glk’ or ‘ha’ or ‘he’ or ‘kwh’ or ‘ks’ or ‘ku’ or ‘mzn’ or ‘nqo’ or ‘pnb’ or ‘ps’ or ‘sd’ or ‘ug’ or ‘ur’ or ‘yi’ -%}
rtl
{%- else -%}
ltr
{%- endcase -%}
{%- endcapture -%}

{% render 'thunder-injects' %} {% render 'head-preload' %}

{% if settings.favicon != blank -%}

{%- endif %} {{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} – {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} – {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %}

{% if page_description %}

{% endif %}

{%- unless settings.heading_font.system? and settings.body_font.system? -%}

{%- endunless -%}

{% render ‘social-meta-tags’ %}

{{ ‘app.css’ | asset_url | stylesheet_tag }}
{{ ‘product-grid.css’ | asset_url | stylesheet_tag }}

{% render ‘head-variables’ %}

{%- if tinyscript -%}{{ content_for_header }}{%- else -%}{% render ‘tiny-script-control’ %}{%- endif -%}

{% include ‘hulk_po_vd’ %}

{{ 'accessibility.skip_to_text' | t }}

{% sections 'header-group' %}

{{ content_for_layout }}

{% sections 'footer-group' %} {% render 'cart-drawer' %} {% render 'product-drawer' %} {% render 'search-drawer' %}

{{ ‘vendor.min.js’ | asset_url | script_tag }}
{% if settings.animations %}
{{ ‘animations.min.js’ | asset_url | script_tag }}

{% endif %}

{{ ‘slideshow.js’ | asset_url | script_tag }}

{%- if settings.free_shipping -%}

{%- endif -%}
{%- if request.design_mode -%}

{%- endif -%}
{% render ‘back-to-top’ %}

{% render ‘thunder-preload’ %}

[Huptech-Web]

Hi @learningdesign , As you have added all the JS in a single file it might cause an issue because of dependency. As you know apart from theme.liquid many JS are used in sections and snippets which may create a conflict. To resolve this issue you need to break down your Javascript code. Add the JS file code one by one to your file and check if any error occurs or your theme breaks. This way you will know which file or code is creating the conflict.

[learningdesign]

I have already did that these 3 codes are breaking website

{{ ‘vendor.min.js’ | asset_url | script_tag }}
{{ ‘animations.min.js’ | asset_url | script_tag }}
{{ ‘slideshow.js’ | asset_url | script_tag }}

[Huptech-Web]

Okay, I have checked these files are called twice on your store! That can also create a conflict in your code. If you add them to your code then remove them from the theme.liquid so they don’t render twice on the site.

[learningdesign]

if i remove these 3 scripts from theme. liquid my website got broke

you mean i need to delete it from the application.js.liquid file where i copy all code ?

[Huptech-Web]

If removing these codes from theme.liquid breaks your website then leave them as they are and remove its code from your application.js.liquid.

[learningdesign]

Can you help me in any one of this error which will make my website speed little better becasue this minify js did not have any effect on my website

[Huptech-Web]

Hi @learningdesign , You can fix the speed issue by fixing the large content paint “Largest Contentful Paint”, “Avoid Large layout Shifts”, and “Reduce Javascript Execution time” issues. It will help you improve your website speed.